/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
    /* Fonts */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-title: 'Outfit', sans-serif;

    /* Theme Dynamic Colors (Defaults - Overridden by Tenant Brand Settings) */
    --color-primary: #0066de;
    --color-primary-rgb: 0, 102, 222;
    --color-secondary: #10b981;
    --color-secondary-rgb: 16, 185, 129;
    --color-accent: #f59e0b;
    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;

    /* Module-Specific Theme Accent (Default: Logo Blue) */
    --module-primary: #0066de;
    --module-primary-rgb: 0, 102, 222;
    --module-accent: #00b4d8;

    /* Common System Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-round: 50%;
    /* Default Theme Variables (Light Mode Only) */
    --bg-app: #f4f5f7;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #fcfcfd;
    --bg-header: rgba(255, 255, 255, 0.8);
    --bg-input: #f4f5f7;
    --bg-input-focus: #ffffff;
    
    --border-color: rgba(0, 0, 0, 0.08);
    --border-color-hover: rgba(0, 0, 0, 0.15);
    
    --text-main: #18181b;
    --text-muted: #71717a;
    --text-inverse: #ffffff;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    --glass-opacity: 0.6;
    --glass-border: rgba(0, 0, 0, 0.04);
}

/* Module Color Identity Overrides */
body[data-active-module="dashboard"] {
    --module-primary: #0066de;
    --module-primary-rgb: 0, 102, 222;
    --module-accent: #00b4d8;
}
body[data-active-module="sales"], body[data-active-module="pos"] {
    --module-primary: #3b82f6;
    --module-primary-rgb: 59, 130, 246;
    --module-accent: #06b6d4;
}
body[data-active-module="purchases"] {
    --module-primary: #8b5cf6;
    --module-primary-rgb: 139, 92, 246;
    --module-accent: #6366f1;
}
body[data-active-module="inventory"] {
    --module-primary: #0d9488;
    --module-primary-rgb: 13, 148, 136;
    --module-accent: #10b981;
}
body[data-active-module="expenses"] {
    --module-primary: #ef4444;
    --module-primary-rgb: 239, 68, 68;
    --module-accent: #f43f5e;
}
body[data-active-module="income"] {
    --module-primary: #10b981;
    --module-primary-rgb: 16, 185, 129;
    --module-accent: #34d399;
}
body[data-active-module="accounts"] {
    --module-primary: #1e3a8a;
    --module-primary-rgb: 30, 58, 138;
    --module-accent: #3b82f6;
}
body[data-active-module="ledgers"] {
    --module-primary: #78350f;
    --module-primary-rgb: 120, 53, 15;
    --module-accent: #f59e0b;
}
body[data-active-module="financial"] {
    --module-primary: #475569;
    --module-primary-rgb: 71, 85, 105;
    --module-accent: #0f172a;
}
body[data-active-module="masters"] {
    --module-primary: #f97316;
    --module-primary-rgb: 249, 115, 22;
    --module-accent: #f59e0b;
}
body[data-active-module="reports"] {
    --module-primary: #06b6d4;
    --module-primary-rgb: 6, 182, 212;
    --module-accent: #3b82f6;
}
body[data-active-module="saas"] {
    --module-primary: #1e3a8a;
    --module-primary-rgb: 30, 58, 138;
    --module-accent: #64748b;
}
body[data-active-module="settings"] {
    --module-primary: #64748b;
    --module-primary-rgb: 100, 116, 139;
    --module-accent: #475569;
}

/* Sidebar active states */
.sidebar-menu .menu-item.active {
    background: rgba(var(--module-primary-rgb), 0.08) !important;
    color: var(--module-primary) !important;
    font-weight: 600;
}
.sidebar-menu .menu-item.active i {
    color: var(--module-primary) !important;
}

/* Tab item active states */
.tab-item.active {
    border-bottom: 2px solid var(--module-primary) !important;
    color: var(--module-primary) !important;
}

/* Unified primary button and form control focus styling */
.btn-primary {
    background: var(--module-primary) !important;
    border-color: var(--module-primary) !important;
}
.btn-primary:hover {
    background: var(--module-accent) !important;
    border-color: var(--module-accent) !important;
}
.form-control:focus {
    border-color: var(--module-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--module-primary-rgb), 0.15) !important;
}

/* Branded Parties master creation popups */
.modal-window:has(.party-master-form) {
    width: min(820px, calc(100vw - 32px));
    max-width: 820px;
    max-height: calc(100vh - 32px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #cbd9ed;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(8,31,70,.28);
}
.modal-window:has(.party-master-form) .modal-header { display: none; }
.modal-window:has(.party-master-form) .modal-body { padding: 0; overflow-y: auto; }
.party-master-form { padding: 20px; background: #f8fbff; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.party-master-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -20px -20px 6px;
    padding: 17px 20px;
    color: #fff;
    background: linear-gradient(135deg,#1769ff,#0a47ad);
}
.customer-master-form .party-master-header { background: linear-gradient(135deg,#7c3aed,#4f46e5); }
.party-master-header > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.16); }
.party-master-header h3 { margin: 0; color: #fff; font-size: 1rem; }
.party-master-header p { margin: 3px 0 0; color: rgba(255,255,255,.82); font-size: .7rem; }
.party-master-form .form-group { margin: 0; }
.party-master-form .form-label { margin-bottom: 5px; color: #43536b; font-size: .72rem; font-weight: 700; }
.party-master-form .form-control { min-height: 40px; border: 1px solid #ccd8e8; border-radius: 8px; background: #fff; color: #14213d; }
.party-master-form .form-control:focus { border-color: #1769ff; box-shadow: 0 0 0 3px rgba(23,105,255,.12); }
.party-master-form .btn-submit-modal { background: linear-gradient(135deg,#1769ff,#0a4fbe); border-color: #1769ff; color: #fff; }
@media (max-width: 650px) { .party-master-form { grid-template-columns: 1fr !important; } .party-master-form > * { grid-column: 1 !important; } }

/* ==========================================================================
   GLOBAL RESET & BASICS
   ========================================================================== */
html {
    font-size: 16px;
}
@media (min-width: 768px) {
    html {
        font-size: clamp(11.5px, 0.28vw + 11.2px, 16px);
    }
}
@media (min-width: 768px) and (max-height: 800px) {
    html {
        font-size: 13px;
    }
}
@media (min-width: 768px) and (max-height: 700px) {
    html {
        font-size: 11.5px;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--border-radius-sm);
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-app);
    color: var(--text-main);
    overflow: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism utility */
.glass-panel {
    background: rgba(var(--bg-surface), var(--glass-opacity));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}

/* ==========================================================================
   APP LAYOUT
   ========================================================================== */
.app-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    transition: grid-template-columns var(--transition-normal);
}

.app-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns var(--transition-normal);
}

.app-layout.sidebar-collapsed {
    grid-template-columns: 78px 1fr;
}

/* ==========================================================================
   SIDEBAR REDESIGN STYLES
   ========================================================================== */
.app-sidebar {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    z-index: 100;
    transition: width var(--transition-normal);
    position: relative;
    width: 280px;
}

.sidebar-collapsed .app-sidebar {
    width: 78px;
}

.sidebar-header {
    height: 86px;
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    gap: 12px;
}

.brand-logo-container {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    opacity: 1;
    transition: opacity var(--transition-normal);
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-collapsed .brand-details {
    opacity: 0;
    width: 0;
    pointer-events: none;
    display: none;
}

.sidebar-menu {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

/* Menu Items */
.menu-item {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    color: #475569; /* Slate 600 */
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    gap: 12px;
}

.menu-item i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #64748b; /* Slate 500 */
    transition: color 0.2s ease;
}

.menu-item span {
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity var(--transition-normal);
}

.sidebar-collapsed .menu-item span {
    opacity: 0;
    display: none;
}

.menu-item:hover {
    background-color: #eff6ff; /* Light blue */
    color: #2563eb;
}

.menu-item:hover i {
    color: #2563eb;
}

/* Active State */
.menu-item.active {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #2563eb;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}

.menu-item.active i {
    color: #2563eb;
}

/* Active Indicator */
.menu-item.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: #2563eb;
    border-radius: 4px;
}

/* Submenu Chevron */
.submenu-chevron {
    margin-left: auto;
    width: 16px !important;
    height: 16px !important;
    color: #64748b;
    transition: transform 0.25s ease;
}

.sidebar-menu-group.collapsed .submenu-chevron {
    transform: rotate(-90deg);
}

/* Submenu Container */
.sidebar-submenu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background-color: #f8fafc;
    border-radius: 14px;
    margin-top: 6px;
    transition: all 0.25s ease;
}

.sidebar-menu-group.collapsed .sidebar-submenu {
    display: none;
}

/* Submenu Items */
.sidebar-submenu .submenu-item {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #475569;
    background: transparent;
    border-radius: 10px;
    gap: 10px;
}

.sidebar-submenu .submenu-item i {
    width: 18px;
    height: 18px;
}

.sidebar-submenu .submenu-item:hover {
    background-color: #eff6ff;
    color: #2563eb;
}

.sidebar-submenu .submenu-item.active {
    background-color: #ffffff;
    color: #2563eb;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Collapsed Sidebar Menu Items Tooltip / Hover Behavior */
.sidebar-collapsed .menu-item {
    justify-content: center;
    padding: 0;
}

.sidebar-collapsed .menu-item i {
    margin: 0;
}

.sidebar-collapsed .submenu-chevron {
    display: none;
}

.sidebar-collapsed .sidebar-submenu {
    display: none !important; /* Hide submenu in collapsed mode */
}

/* Footer & Profile */
.sidebar-footer {
    padding: 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
}

.sidebar-collapsed .sidebar-footer {
    padding: 10px;
    align-items: center;
}

/* Persistent, non-intrusive software-maker signature */
.software-brand-signature{flex:0 0 auto;display:flex;align-items:center;gap:9px;margin:0 12px 12px;padding:9px 10px;border:1px solid #e5ebf3;border-radius:12px;background:linear-gradient(135deg,#f8fbff,#f7f5ff);color:#172033;box-shadow:0 3px 12px rgba(15,23,42,.04);user-select:none}.software-brand-signature img{width:34px;height:34px;object-fit:cover;border-radius:9px;flex:0 0 auto}.software-brand-signature>div{min-width:0;display:flex;flex-direction:column;line-height:1.08}.software-brand-signature small{font-size:.55rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em}.software-brand-signature strong{margin-top:2px;font-size:.75rem;color:#1e3a5f}.software-brand-signature span{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.53rem;color:#64748b}.sidebar-collapsed .software-brand-signature{width:44px;height:44px;box-sizing:border-box;justify-content:center;margin:0 auto 12px;padding:5px;border-radius:12px}.sidebar-collapsed .software-brand-signature img{width:32px;height:32px}.sidebar-collapsed .software-brand-signature>div{display:none}.header-software-mark{display:none;width:34px;height:34px;padding:3px;box-sizing:border-box;border:1px solid #e2e8f0;border-radius:10px;background:#fff}.header-software-mark img{width:100%;height:100%;object-fit:cover;border-radius:7px}.dark-theme .software-brand-signature{border-color:#334155;background:linear-gradient(135deg,#172033,#241b35)}.dark-theme .software-brand-signature strong{color:#dbeafe}.dark-theme .header-software-mark{border-color:#334155;background:#172033}@media(max-width:820px){.header-software-mark{display:block}.software-brand-signature{margin-bottom:10px}}

.sidebar-collapsed .profile-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    justify-content: center !important;
}

.sidebar-collapsed .profile-card i,
.sidebar-collapsed .user-info-text {
    display: none !important;
}

.sidebar-collapsed .dark-mode-card {
    padding: 8px !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
}

.sidebar-collapsed .dark-mode-label,
.sidebar-collapsed .switch-toggle {
    display: none !important;
}

/* Switch Toggle Slider */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-round {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 20px;
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.switch-toggle input:checked + .slider-round {
    background-color: #2563eb;
}

.switch-toggle input:checked + .slider-round:before {
    transform: translateX(16px);
}

/* Dark Mode Variables Override */
body.dark-theme {
    --bg-app: #09090b;
    --bg-surface: #18181b;
    --bg-surface-elevated: #27272a;
    --bg-header: rgba(24, 24, 27, 0.8);
    --bg-input: #27272a;
    --bg-input-focus: #18181b;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-hover: rgba(255, 255, 255, 0.15);
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-inverse: #09090b;
}

body.dark-theme .app-sidebar,
body.dark-theme .sidebar-footer {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

body.dark-theme .sidebar-header {
    border-color: #27272a !important;
}

body.dark-theme .brand-name {
    color: #f4f4f5 !important;
}

body.dark-theme .brand-subtitle {
    color: #a1a1aa !important;
}

body.dark-theme .menu-item {
    color: #a1a1aa !important;
}

body.dark-theme .menu-item i {
    color: #71717a !important;
}

body.dark-theme .menu-item:hover {
    background-color: #27272a !important;
    color: #3b82f6 !important;
}

body.dark-theme .menu-item:hover i {
    color: #3b82f6 !important;
}

body.dark-theme .menu-item.active {
    background: linear-gradient(135deg, #1e3a8a, #172554) !important;
    color: #3b82f6 !important;
}

body.dark-theme .menu-item.active i {
    color: #3b82f6 !important;
}

body.dark-theme .menu-item.active::before {
    background: #3b82f6 !important;
}

body.dark-theme .sidebar-submenu {
    background-color: #09090b !important;
}

body.dark-theme .sidebar-submenu .submenu-item {
    color: #a1a1aa !important;
}

body.dark-theme .sidebar-submenu .submenu-item:hover {
    background-color: #27272a !important;
    color: #3b82f6 !important;
}

body.dark-theme .sidebar-submenu .submenu-item.active {
    background-color: #18181b !important;
    color: #3b82f6 !important;
}

body.dark-theme .profile-card {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

body.dark-theme .user-info-text h4 {
    color: #f4f4f5 !important;
}

body.dark-theme .user-info-text span {
    color: #a1a1aa !important;
}

body.dark-theme .dark-mode-card {
    background-color: #09090b !important;
    border-color: #27272a !important;
}

body.dark-theme .dark-mode-label {
    color: #e4e4e7 !important;
}

body.dark-theme .sidebar-toggle-btn {
    background-color: #18181b !important;
    border-color: #27272a !important;
}

body.dark-theme .sidebar-toggle-btn i {
    color: #a1a1aa !important;
}

/* ==========================================================================
   APP HEADER
   ========================================================================== */
.app-header {
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-header);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 90;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    max-width: 500px;
}

.menu-mobile-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.global-search-container {
    position: relative;
    width: 100%;
}

.global-search-container .search-icon {
    position: absolute;
    left: 14px;
    top: 10px;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.global-search-container input {
    width: 100%;
    padding: 10px 16px 10px 42px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.global-search-container input:focus {
    border-color: var(--color-primary);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* Header Action Controls */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Top-right account menu */
.header-profile-wrapper{position:relative;margin-left:3px}.header-profile-trigger{height:42px;display:flex;align-items:center;gap:9px;padding:4px 9px 4px 5px;border:1px solid #dbe3ee;border-radius:13px;background:#fff;color:#172033;cursor:pointer;transition:.18s;box-shadow:0 2px 8px rgba(15,23,42,.04)}.header-profile-trigger:hover,.header-profile-trigger[aria-expanded="true"]{border-color:#93b4ed;background:#f8fbff;box-shadow:0 7px 20px rgba(37,99,235,.11)}.header-profile-avatar,.profile-menu-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(37,99,235,.24)}.header-profile-avatar{width:32px;height:32px;font-size:.78rem}.header-profile-copy{display:flex;flex-direction:column;text-align:left;max-width:130px}.header-profile-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}.header-profile-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;font-size:.62rem}.header-profile-trigger>svg{width:14px;height:14px;color:#64748b}
.header-profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);z-index:3500;width:min(360px,calc(100vw - 24px));overflow:hidden;border:1px solid #dce3ed;border-radius:16px;background:#fff;box-shadow:0 22px 60px rgba(15,23,42,.2);animation:profile-menu-in .18s ease-out}.header-profile-dropdown.hidden{display:none!important}.profile-menu-head{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid #edf1f6;background:linear-gradient(135deg,#f8fbff,#faf7ff)}.profile-menu-avatar{width:42px;height:42px}.profile-menu-head>div{min-width:0}.profile-menu-head strong,.profile-menu-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-menu-head strong{font-size:.9rem;color:#111827}.profile-menu-head small{margin-top:3px;color:#64748b;font-size:.7rem}.profile-menu-details{padding:11px 16px;border-bottom:1px solid #edf1f6}.profile-menu-details>div{display:flex;justify-content:space-between;gap:18px;padding:3px 0;font-size:.73rem}.profile-menu-details span{color:#6b7280}.profile-menu-details strong{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#273449;text-align:right}.profile-menu-actions{padding:7px}.profile-menu-actions button{width:100%;min-height:38px;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:#374151;text-align:left;font-size:.76rem;cursor:pointer}.profile-menu-actions button:hover{background:#f1f5f9;color:#1d4ed8}.profile-menu-actions svg{width:16px;height:16px}.profile-menu-state{color:#64748b;font-size:.65rem}.profile-menu-actions .profile-logout-action{color:#dc2626}.profile-menu-actions .profile-logout-action:hover{background:#fff1f2;color:#be123c}@keyframes profile-menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.dark-theme .header-profile-trigger,.dark-theme .header-profile-dropdown{background:#172033;border-color:#334155;color:#e5e7eb}.dark-theme .profile-menu-head{background:linear-gradient(135deg,#1e293b,#241b35);border-color:#334155}.dark-theme .profile-menu-head strong,.dark-theme .profile-menu-details strong{color:#f8fafc}.dark-theme .profile-menu-details,.dark-theme .profile-menu-head{border-color:#334155}.dark-theme .profile-menu-actions button{color:#dbe4f0}.dark-theme .profile-menu-actions button:hover{background:#263449}
@media(max-width:700px){.header-profile-copy{display:none}.header-profile-trigger{padding:4px}.header-profile-trigger>svg{display:none}.header-profile-dropdown{position:fixed;right:10px;top:64px}}

/* Sales-pattern quotation workspace */
.modal-window.modal-quotation-create{width:100vw!important;max-width:none!important;height:100vh!important;max-height:none!important;margin:0!important;border-radius:0!important}.modal-window.modal-quotation-create .modal-body{height:calc(100vh - 64px)!important;max-height:none!important;padding:0!important;overflow:hidden!important;background:linear-gradient(180deg,#f7f9ff,#f8f6fc)}.quotation-entry-workspace>.form-group{margin:0;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.quotation-entry-workspace>div[style*="grid-column: 1/-1"]{background:#fff!important}.quotation-entry-workspace #qItemsListContainer{min-height:180px!important}.quotation-entry-workspace .q-line-input{min-height:30px!important}.dark-theme .modal-window.modal-quotation-create .modal-body{background:#0f172a}.dark-theme .quotation-entry-workspace>.form-group,.dark-theme .quotation-entry-workspace>div[style*="grid-column: 1/-1"]{background:#172033!important;border-color:#334155}.dark-theme .quotation-command-head{background:linear-gradient(135deg,#172554,#2e1065)!important;border-color:#334155!important}
@media(max-width:1050px){.quotation-entry-workspace{grid-template-columns:repeat(2,minmax(0,1fr))!important}.quotation-entry-workspace .form-group[style*="grid-column:3"]{grid-column:1/-1!important}}
@media(max-width:650px){.quotation-entry-workspace{grid-template-columns:1fr!important;padding:10px!important}.quotation-entry-workspace>.form-group{grid-column:1!important}.quotation-command-head{align-items:flex-start!important;gap:10px}.quotation-entry-workspace #qItemsListContainer{overflow-x:auto!important}}

/* Quotation mode reuses the complete Sales workspace with a distinct teal identity. */
.quotation-document-mode{--quotation-accent:#0891b2;--quotation-dark:#0f766e;background:linear-gradient(180deg,#f0fdfa,#f0f9ff)!important}.quotation-document-mode .sales-command-header{border-bottom:3px solid var(--quotation-accent)!important;background:linear-gradient(90deg,#fff,#ecfeff)!important}.quotation-document-mode .sales-command-header h2,.quotation-document-mode .sales-products-toolbar h3{color:var(--quotation-dark)!important}.quotation-document-mode .sales-command-header h2:before{content:"QUOTATION";margin-right:8px;padding:3px 7px;border-radius:5px;background:#ccfbf1;color:#0f766e;font-size:.58rem;letter-spacing:.06em;vertical-align:middle}.quotation-document-mode #sTopSaveBtn,.quotation-document-mode #sHeaderSavePrintBtn,.quotation-document-mode #sFooterCompleteBtn,.quotation-document-mode #sSavePrintBtn,.quotation-document-mode #sInvoiceQuickAddProd{background:linear-gradient(135deg,#0f766e,#0891b2)!important}.quotation-document-mode #sHeaderHoldBtn,.quotation-document-mode #sHeaderRecallBtn,.quotation-document-mode #sHeaderSaveDraftBtn{border-color:#0891b2!important;color:#0f766e!important}.quotation-document-mode .sales-customer-section,.quotation-document-mode .sales-info-row{border-top:3px solid #14b8a6!important}.quotation-document-mode .sales-products-row-card{border-top:3px solid #06b6d4!important}.quotation-document-mode .sales-summary-card{border-color:#67e8f9!important}.quotation-document-mode .sales-summary-card>div:first-child{background:linear-gradient(135deg,#0f766e,#0891b2)!important}.dark-theme .quotation-document-mode{background:#0f172a!important}
.quotation-document-mode .sales-command-header h2:before{content:none!important;display:none!important}
.quotation-document-mode .sales-main-pane{background:linear-gradient(180deg,#f0fdfa,#f0f9ff)!important}
.quotation-document-mode .sales-customer-section,.quotation-document-mode .sales-info-row{border-color:#99f6e4!important}
.quotation-document-mode .sales-products-row-card{border-color:#a5f3fc!important}

/* Official support contact panel */
.support-contact-panel{display:grid;gap:15px}.support-contact-hero{display:flex;align-items:center;gap:14px;padding:17px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#f5f3ff 55%,#ecfeff);border:1px solid #dbeafe}.support-contact-hero img{width:58px;height:58px;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(37,99,235,.15)}.support-contact-hero h3{margin:0;color:#172554;font-size:1.05rem}.support-contact-hero p{margin:4px 0 0;color:#64748b;font-size:.8rem}.support-contact-grid{display:grid;gap:9px}.support-contact-grid>a,.support-social-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;color:#1f2937;text-decoration:none;transition:.18s}.support-contact-grid>a:hover{border-color:#93c5fd;transform:translateY(-1px);box-shadow:0 8px 22px rgba(37,99,235,.1)}.support-contact-grid>a>span,.support-social-card>span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#eff6ff;color:#2563eb}.support-contact-grid svg{width:18px;height:18px}.support-contact-grid small,.support-contact-grid strong{display:block}.support-contact-grid small{color:#64748b;font-size:.68rem}.support-contact-grid strong{margin-top:2px;overflow-wrap:anywhere;font-size:.82rem}.support-social-card>span{background:#f5f3ff;color:#7c3aed}.support-social-card p{margin:3px 0 0;color:#94a3b8;font-size:.65rem}.support-contact-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:10px;background:#fffbeb;color:#92400e;font-size:.7rem;line-height:1.45}.support-contact-note svg{width:16px;height:16px;flex:0 0 auto}.dark-theme .support-contact-hero{background:linear-gradient(135deg,#172554,#2e1065);border-color:#334155}.dark-theme .support-contact-hero h3{color:#f8fafc}.dark-theme .support-contact-grid>a,.dark-theme .support-social-card{background:#172033;border-color:#334155;color:#e5e7eb}

.shortcut-tip {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.shortcut-tip kbd {
    background: var(--bg-surface-elevated);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.header-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
}

.header-select {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-weight: 500;
}

.header-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-md);
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
}

.header-btn:hover {
    border-color: var(--border-color-hover);
    color: var(--color-primary);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-danger);
    color: var(--text-inverse);
    font-size: 0.65rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: var(--border-radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-surface);
}

/* ==========================================================================
   VIEWPORT SECTIONS & SWITCHING
   ========================================================================== */
.app-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.app-content-viewport {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}

.erp-view {
    display: none;
    animation: fadeIn var(--transition-normal);
}

.erp-view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   UI COMPONENTS (CARDS, TABLES, BADGES)
   ========================================================================== */
.view-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.view-title {
    font-family: var(--font-title);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-title-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    flex-shrink: 0;
}

.view-title-icon i,
.view-title-icon svg {
    width: 18px;
    height: 18px;
}

.view-actions {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition-fast);
}

.btn i,
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--text-inverse);
}
.btn-primary:hover {
    background: rgba(var(--color-primary-rgb), 0.9);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.25);
}

.btn-secondary {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background: var(--bg-surface);
    border-color: var(--border-color-hover);
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover {
    background: rgba(var(--color-danger-rgb), 0.9);
}

/* Grid & Cards */
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

@media (max-width: 767px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
}

/* Pixel-close alignment to the supplied Purchase Invoice reference */
.modal-window.modal-purchase-create .purchase-command-workspace { background: #fff; }
.modal-window.modal-purchase-create .purchase-command-header {
    height: 70px;
    min-height: 70px;
    grid-template-columns: 245px 1fr auto;
    padding: 8px 20px;
}
.modal-window.modal-purchase-create .purchase-brand-cluster > .purchase-icon-btn { display: none; }
.modal-window.modal-purchase-create .purchase-brand-cluster { border-right: 1px solid #e2e8f0; padding-right: 18px; }
.modal-window.modal-purchase-create .purchase-brand-cluster strong { font-size: 1.05rem; color: #101828; }
.modal-window.modal-purchase-create .purchase-brand-cluster span { display: block; color: #667085; font-size: .68rem; text-transform: none; letter-spacing: 0; }
.modal-window.modal-purchase-create .purchase-title-cluster { display: flex; justify-content: flex-start; }
.modal-window.modal-purchase-create .purchase-title-cluster h2 { font-size: 1.25rem; }
.modal-window.modal-purchase-create .purchase-header-actions .purchase-branch-pill:first-child { display: inline-flex; }
.modal-window.modal-purchase-create .purchase-header-actions .purchase-branch-pill:nth-of-type(1) { order: 5; }
.modal-window.modal-purchase-create .purchase-header-actions .purchase-branch-pill:nth-of-type(2) { order: 4; }
.modal-window.modal-purchase-create #pCreateSettingsBtn { order: 3; }
.modal-window.modal-purchase-create #pTopSaveBtn { order: 2; }

.modal-window.modal-purchase-create .purchase-command-layout {
    gap: 10px 14px;
    padding: 12px 20px 78px;
    background: #fff;
}
.modal-window.modal-purchase-create .purchase-left-rail > .purchase-command-card:nth-child(2) .purchase-card-header { display: none; }
.modal-window.modal-purchase-create .purchase-left-rail > .purchase-command-card:nth-child(2) { padding: 12px 14px; }
.modal-window.modal-purchase-create .purchase-info-grid { gap: 18px; }
.modal-window.modal-purchase-create .purchase-info-grid > div:nth-child(n+6) { display: none; }

.modal-window.modal-purchase-create .supplier-card {
    grid-template-columns: minmax(0, 2fr) minmax(300px, .9fr);
    align-items: stretch;
    padding: 12px;
    background: linear-gradient(90deg, #fff 0%, #fbfffd 100%);
}
.modal-window.modal-purchase-create .supplier-card .purchase-card-header { grid-column: 1 / -1; margin: 0; }
.modal-window.modal-purchase-create .supplier-card .purchase-card-header span { font-size: 0; }
.modal-window.modal-purchase-create .supplier-card .purchase-card-header span::after { content: "Select Supplier"; font-size: .88rem; }
.modal-window.modal-purchase-create .supplier-card > .purchase-field-block:first-of-type { grid-column: 1; }
.modal-window.modal-purchase-create .supplier-card .purchase-supplier-profile {
    grid-column: 1;
    display: grid;
    grid-template-columns: 62px minmax(220px, 1fr) minmax(170px, .7fr);
    gap: 14px;
    align-items: center;
    min-height: 98px;
    padding: 12px;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #fff;
}
.modal-window.modal-purchase-create .purchase-supplier-avatar {
    width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: #eaf8f0; color: #079447;
}
.modal-window.modal-purchase-create .purchase-supplier-avatar svg { width: 29px; height: 29px; }
.modal-window.modal-purchase-create .purchase-supplier-identity,
.modal-window.modal-purchase-create .purchase-supplier-contact { display: grid; gap: 8px; min-width: 0; }
.modal-window.modal-purchase-create .purchase-supplier-identity > div { display: flex; align-items: center; gap: 8px; }
.modal-window.modal-purchase-create .purchase-supplier-identity > div strong { font-size: .96rem; }
.modal-window.modal-purchase-create .purchase-supplier-identity span,
.modal-window.modal-purchase-create .purchase-supplier-contact span { display: flex; align-items: center; gap: 7px; color: #596579; font-size: .7rem; }
.modal-window.modal-purchase-create .purchase-supplier-identity svg,
.modal-window.modal-purchase-create .purchase-supplier-contact svg { width: 13px; height: 13px; color: #64748b; }
.modal-window.modal-purchase-create .purchase-active-pill { padding: 3px 8px; border-radius: 999px; background: #eaf8f0; color: #07833f !important; font-weight: 700; }
.modal-window.modal-purchase-create .supplier-card .purchase-supplier-metrics {
    grid-column: 2;
    grid-row: 2 / span 3;
    align-self: stretch;
    padding: 10px;
    border: 1px solid #e3e9f0;
    border-radius: 8px;
    background: #fff;
}
.modal-window.modal-purchase-create .supplier-card > .purchase-field-block:has(#pSupplierLedger),
.modal-window.modal-purchase-create .supplier-card > .purchase-field-block:has(#pSupplierGstin),
.modal-window.modal-purchase-create .supplier-card > .purchase-field-block:has(#pPaymentTerms) { display: none; }

.modal-window.modal-purchase-create .purchase-item-command { padding: 10px 12px; }
.modal-window.modal-purchase-create .purchase-item-command .purchase-card-header { margin-bottom: 8px; }
.modal-window.modal-purchase-create .purchase-item-command .purchase-card-header > div:first-child span { font-size: 0; }
.modal-window.modal-purchase-create .purchase-item-command .purchase-card-header > div:first-child span::after { content: "Add Products"; font-size: .9rem; }
.modal-window.modal-purchase-create .purchase-action-chips button { border-radius: 6px; background: #fff; }
.modal-window.modal-purchase-create .purchase-spreadsheet-card { min-height: 245px; border-radius: 8px; }
.modal-window.modal-purchase-create .purchase-spreadsheet-head { color: #162033; background: #f8fafc; }
.modal-window.modal-purchase-create .purchase-spreadsheet-row { min-height: 52px; }

.modal-window.modal-purchase-create .purchase-summary-rail { grid-row: 1 / span 8; }
.modal-window.modal-purchase-create .purchase-summary-panel { padding: 14px; }
.modal-window.modal-purchase-create .purchase-summary-metrics { margin-bottom: 10px; }
.modal-window.modal-purchase-create .purchase-summary-metrics div { padding: 7px 2px; }
.modal-window.modal-purchase-create .purchase-summary-metrics div:nth-child(3)::before { content: none; }
.modal-window.modal-purchase-create .purchase-summary-metrics div:nth-child(3) span { display: block; }
.modal-window.modal-purchase-create .purchase-charge-grid,
.modal-window.modal-purchase-create .purchase-payment-strip,
.modal-window.modal-purchase-create .purchase-summary-actions,
.modal-window.modal-purchase-create .purchase-summary-panel::after { display: none; }
.modal-window.modal-purchase-create .purchase-net-total { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
.modal-window.modal-purchase-create .purchase-net-total strong { margin: 0; font-size: 1.2rem; }
.modal-window.modal-purchase-create .purchase-net-total small { display: none; }

.modal-window.modal-purchase-create .purchase-bottom-grid.purchase-expense-workspace { grid-column: 1 / span 2; }
.modal-window.modal-purchase-create .purchase-command-footer { height: 64px; }

@media (max-width: 1366px) {
    .modal-window.modal-purchase-create .purchase-command-layout { grid-template-columns: minmax(0, 1fr) 285px; padding-inline: 12px; }
    .modal-window.modal-purchase-create .purchase-command-header { grid-template-columns: 215px 1fr auto; padding-inline: 12px; }
    .modal-window.modal-purchase-create .purchase-info-grid { gap: 10px; }
    .modal-window.modal-purchase-create .supplier-card { grid-template-columns: minmax(0, 1.8fr) 290px; }
    .modal-window.modal-purchase-create .purchase-add-row { grid-template-columns: minmax(190px, 1fr) 62px 84px 72px 64px 88px; }
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card.clickable:hover, .card-clickable:hover, .summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color-hover);
}

/* Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.table-custom {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-custom th {
    background: var(--bg-surface-elevated);
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
}

.table-custom td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.table-custom tr:last-child td {
    border-bottom: none;
}

.table-custom tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-success { background: rgba(16, 185, 129, 0.15); color: var(--color-secondary); }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: var(--color-accent); }
.badge-danger { background: rgba(239, 68, 68, 0.15); color: var(--color-danger); }
.badge-info { background: rgba(99, 102, 241, 0.15); color: var(--color-primary); }

/* Form Elements */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    transition: border-color var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

/* Compact purchase entry workspaces */
.purchase-compact-form {
    font-size: 0.82rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 8px 10px;
    max-height: 82vh;
    overflow-y: auto;
    padding-right: 6px;
}

.purchase-compact-form .form-group {
    margin-bottom: 0;
}

.purchase-compact-form .form-label {
    font-size: 0.68rem;
    margin-bottom: 3px;
    font-weight: 800;
    line-height: 1.15;
    display: flex;
    align-items: center;
    gap: 4px;
}

.purchase-compact-form .form-control,
.purchase-compact-form select.form-control,
.purchase-compact-form .dropdown-search-input {
    min-height: 30px;
    height: 30px;
    padding: 4px 7px;
    font-size: 0.78rem;
    border-radius: 7px;
}

.purchase-compact-form textarea.form-control {
    height: 46px;
    min-height: 46px;
    resize: vertical;
}

.purchase-compact-form > [style*="grid-column: 1/-1"],
.purchase-compact-form > [style*="grid-column:1/-1"] {
    grid-column: 1 / -1 !important;
}

.purchase-compact-form #pItemsListContainer,
.purchase-compact-form #poItemsList {
    max-height: 92px !important;
    padding: 6px !important;
}

.purchase-compact-form h3,
.purchase-compact-form h4,
.purchase-compact-form h5 {
    font-size: 0.9rem !important;
}

.purchase-compact-form .btn {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 0.76rem;
}

.purchase-swipe-list {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 18px 22px;
    min-height: calc(100vh - 145px);
}

.purchase-list-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
    gap: 28px;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    background: #fff;
}

.purchase-list-insights span,
.purchase-list-insights small {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
}

.purchase-list-insights strong {
    display: block;
    color: #1f2937;
    font-size: 1.12rem;
    margin: 3px 0;
}

.purchase-list-header,
.purchase-list-toolbar,
.purchase-list-totals {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.purchase-list-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.pink-play-dot {
    color: #ec4899;
    font-size: 0.9rem;
}

.purchase-status-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #eef0f3;
    margin: 12px 0 14px;
}

.purchase-status-tabs button {
    border: 0;
    background: transparent;
    padding: 0 0 10px;
    color: #4b5563;
    font-weight: 700;
    cursor: pointer;
}

.purchase-status-tabs button.active {
    color: #2563eb;
    border-bottom: 3px solid #2563eb;
}

.purchase-status-tabs span {
    background: #eef2f7;
    color: #6b7280;
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 4px;
}

.purchase-list-toolbar {
    justify-content: flex-start;
    margin-bottom: 14px;
}

.purchase-list-toolbar .filter-control {
    height: 32px;
    border-radius: 6px;
    border: 1px solid #dfe5ee;
}

.purchase-list-toolbar .filter-control:first-child {
    width: min(450px, 34vw);
}

.purchase-swipe-table-wrap {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f1f2f4;
}

.purchase-swipe-table thead th {
    background: #f7f7f6;
    color: #5f6368;
    font-size: 0.75rem;
    font-weight: 800;
}

.purchase-swipe-table tbody td {
    padding: 18px 10px;
    vertical-align: middle;
}

.purchase-swipe-table td small {
    display: block;
    color: #6b7280;
    font-size: 0.72rem;
    margin-top: 3px;
}

.purchase-mode-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 7px;
    background: #eef2ff;
    color: #4f46e5;
    padding: 5px 9px;
    font-size: 0.72rem;
    font-weight: 800;
}

.purchase-list-totals {
    justify-content: flex-start;
    margin-top: 28px;
}

.purchase-list-totals span {
    background: #f3f6f9;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 800;
}

.purchase-list-totals span:nth-child(2) {
    background: #eef8f2;
}

.purchase-list-totals span:nth-child(3) {
    background: #fff4ec;
}

.purchase-list-totals strong {
    margin-left: auto;
}

.purchase-swipe-create {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: 10px 12px;
    background: #fff;
}

.purchase-create-topbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    position: sticky;
    top: 0;
    z-index: 4;
}

.purchase-create-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-create-title strong,
.purchase-create-title small {
    display: block;
}

.purchase-create-title strong {
    font-size: 1rem;
}

.purchase-create-title small {
    color: #6b7280;
    font-size: 0.72rem;
}

.purchase-number-preview {
    display: flex;
    align-items: center;
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    overflow: hidden;
    height: 36px;
    min-width: 200px;
    background: #fff;
}

.purchase-number-preview span,
.purchase-number-preview strong {
    padding: 0 14px;
}

.purchase-number-preview span {
    border-right: 1px solid #dfe5ee;
    color: #374151;
}

.purchase-meta-strip {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 9px 12px;
    background: #fafafa;
    color: #565d66;
}

.purchase-meta-strip span {
    white-space: nowrap;
}

.purchase-swipe-create > .form-group:has(#pBillSupplierContainer) {
    grid-column: span 2;
    background: #eaf5ff;
    border-radius: 8px;
    padding: 12px;
}

.purchase-swipe-create > div:has(#pAddItemSelectContainer) {
    background: #eaf5ff !important;
    border-radius: 8px !important;
    border: 1px solid #dbeafe;
}

.purchase-swipe-create #pItemsListContainer {
    background: #fff;
    border: 1px solid #eef0f3 !important;
    min-height: 92px;
}

.purchase-swipe-create > .form-group:has(#pBillNotes) {
    grid-column: span 3 !important;
    min-height: 150px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.purchase-swipe-create > .form-group:has(#pBillNotes) textarea {
    min-height: 100px;
}

.purchase-swipe-create > div:has(#pModalGrandTotal) {
    grid-column: span 3 !important;
    min-height: 150px;
    background: #e9f8f0;
    border: 1px solid #d8f0e3 !important;
    border-radius: 8px;
    padding: 18px !important;
    margin-top: 0 !important;
}

.purchase-swipe-create > div:has(#pModalGrandTotal) h4 {
    font-size: 1.05rem !important;
}

.modal-backdrop.modal-backdrop-purchase-create,
.modal-backdrop:has(.modal-window.modal-purchase-create) {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 3000;
    background: #f4f7fb;
    backdrop-filter: none;
}

/* Sales and quotation workspaces must cover the viewport, not the main-column box. */
.modal-backdrop.modal-backdrop-sales-create,
.modal-backdrop:has(.modal-window.modal-sales-create) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 3000 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #f4f7fb !important;
    backdrop-filter: none !important;
}
.modal-window.modal-sales-create.modal-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.modal-window.modal-sales-create.modal-fullscreen>.modal-header{display:none!important}
.modal-window.modal-sales-create.modal-fullscreen>.modal-body{width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;padding:0!important;overflow:hidden!important}
.modal-window.modal-sales-create .sales-command-workspace{width:100vw!important;max-width:none!important;height:100vh!important;margin:0!important}

.modal-window.modal-purchase-create {
    background: #f4f7fb !important;
    border: 0 !important;
}

.modal-window.modal-purchase-create .modal-header {
    display: none;
}

.modal-window.modal-purchase-create .modal-body {
    max-height: 100vh !important;
    height: 100vh;
    padding: 0 !important;
    overflow: hidden !important;
}

.modal-window.modal-purchase-create .purchase-swipe-create {
    height: 100vh;
    grid-template-columns: 1.05fr 1fr 1.15fr 360px;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 14px;
    padding: 0 18px 18px;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(244,247,251,0.96) 180px),
        #f4f7fb;
}

.modal-window.modal-purchase-create .purchase-create-topbar {
    margin: 0 -18px;
    padding: 14px 22px;
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid #dbe4ef;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(14px);
}

.modal-window.modal-purchase-create .purchase-create-title strong {
    font-size: 1.15rem;
    letter-spacing: 0;
}

.modal-window.modal-purchase-create .purchase-create-title small {
    font-size: 0.78rem;
}

.modal-window.modal-purchase-create .purchase-number-preview {
    border-radius: 10px;
    height: 42px;
    min-width: 220px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.modal-window.modal-purchase-create .purchase-meta-strip {
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.modal-window.modal-purchase-create .form-group {
    margin-bottom: 0;
}

.modal-window.modal-purchase-create .form-label {
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
}

.modal-window.modal-purchase-create .form-control,
.modal-window.modal-purchase-create .dropdown-search-input {
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid #d8e0eb;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.modal-window.modal-purchase-create .form-control:focus,
.modal-window.modal-purchase-create .dropdown-search-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12);
}

#pBillSupplierContainer [id$="-btnQuickAdd"],
#pBillSupplierContainer [id$="-btnFullAdd"],
.modal-window.modal-purchase-create #pBillSupplierContainer [id$="-btnQuickAdd"],
.modal-window.modal-purchase-create #pBillSupplierContainer [id$="-btnFullAdd"] {
    display: none !important;
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group {
    padding: 12px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillSupplierContainer) {
    grid-column: span 2;
    background: linear-gradient(135deg, #ecf8ff, #ffffff);
    border-color: #bfdbfe;
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillInvoiceNo),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pPartyBillNo),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pPartyBillDate),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pGeneratedDate),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillWarehouse),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillPaymentMethod) {
    grid-column: span 1;
}

.modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pAddItemSelectContainer) {
    grid-column: 1 / 4;
    background: #fff !important;
    border: 1px solid #cfe0f5 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.08);
}

.modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pAddItemSelectContainer) > div:last-child {
    grid-template-columns: minmax(220px, 2fr) minmax(92px, 0.7fr) minmax(120px, 0.8fr) 140px !important;
}

.modal-window.modal-purchase-create #pItemsListContainer {
    grid-column: 1 / 4;
    min-height: 220px;
    max-height: 32vh !important;
    padding: 0 !important;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dbe4ef !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pSupplierLedger),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pDueDate),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pPaymentTerms),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pSupplierGstin),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pChallanNo),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pEwayNo),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pTransport),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pReceivedBy) {
    grid-column: span 1;
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillDiscount),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillFreight),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pRoundOff),
.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pExtraTax) {
    grid-column: 4;
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillNotes) {
    grid-column: 1 / 4 !important;
    min-height: 118px;
}

.modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillNotes) textarea {
    min-height: 66px;
}

.modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pModalGrandTotal) {
    grid-column: 4 !important;
    grid-row: 4 / span 5;
    min-height: 260px;
    align-self: start;
    position: sticky;
    top: 86px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between !important;
    gap: 18px;
    background: linear-gradient(160deg, #eafaf3, #ffffff 58%, #eff6ff) !important;
    border: 1px solid #bfe8d2 !important;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(16, 185, 129, 0.14);
}

.modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pModalGrandTotal) h4 {
    font-size: 0.82rem !important;
    text-transform: uppercase;
    letter-spacing: 0;
    color: #047857 !important;
}

.modal-window.modal-purchase-create #pModalGrandTotal {
    display: block;
    margin-top: 8px;
    color: #064e3b;
    font-size: 2.35rem;
    line-height: 1;
}

.modal-window.modal-purchase-create #pSaveInvoiceBtn {
    min-height: 48px;
    font-weight: 800;
}

.modal-window.modal-purchase-create .clear-btn.p-remove-item {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

/* Enterprise Purchase Invoice Command Center */
.modal-window.modal-purchase-create .purchase-command-workspace {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f6f8fb;
    color: #0f172a;
}

.purchase-command-header {
    display: grid;
    grid-template-columns: minmax(270px, 0.9fr) minmax(320px, 1.1fr) minmax(420px, 1.35fr);
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #dbe4ef;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    z-index: 12;
}

.purchase-brand-cluster,
.purchase-title-cluster,
.purchase-header-actions,
.purchase-card-header,
.purchase-action-chips,
.purchase-summary-actions,
.purchase-command-footer {
    display: flex;
    align-items: center;
}

.purchase-brand-cluster {
    gap: 12px;
}

.purchase-brand-cluster span,
.purchase-title-cluster small,
.purchase-hero-strip small,
.purchase-net-total span,
.purchase-net-total small {
    display: block;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.purchase-brand-cluster strong,
.purchase-title-cluster h2,
.purchase-hero-strip strong {
    color: #0f172a;
}

.purchase-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #059669, #2563eb);
    color: #fff;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.2);
    overflow: hidden;
}

.purchase-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-title-cluster {
    justify-content: center;
    gap: 12px;
}

.purchase-title-cluster h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0;
}

.purchase-header-actions {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.purchase-icon-btn,
.purchase-mini-btn {
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #334155;
    border-radius: 12px;
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.purchase-icon-btn:hover,
.purchase-mini-btn:hover,
.purchase-action-chips button:hover,
.purchase-payment-strip button:hover,
.purchase-quick-actions-grid button:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.purchase-mini-btn {
    height: 32px;
    padding: 0 10px;
    font-weight: 800;
}

.purchase-status-badge,
.purchase-sync-pill,
.purchase-branch-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.purchase-status-badge.draft {
    color: #92400e;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.purchase-status-badge.warning {
    color: #9a3412;
    background: #ffedd5;
    border: 1px solid #fdba74;
}

.purchase-status-badge.posted {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #86efac;
}

.purchase-sync-pill {
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
}

.purchase-branch-pill {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.purchase-hero-strip {
    display: grid;
    grid-template-columns: 230px repeat(4, minmax(130px, 1fr));
    gap: 12px;
    padding: 14px 18px;
    background: #f6f8fb;
}

.purchase-hero-strip > div {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.purchase-command-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(320px, 0.78fr) minmax(560px, 1.55fr) minmax(320px, 0.72fr);
    gap: 14px;
    padding: 0 18px 12px;
    overflow: hidden;
}

.purchase-left-rail,
.purchase-center-workspace,
.purchase-summary-rail {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
}

.purchase-center-workspace {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.purchase-command-card,
.purchase-item-command,
.purchase-spreadsheet-card,
.purchase-summary-panel {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.purchase-command-card:hover,
.purchase-item-command:hover,
.purchase-summary-panel:hover {
    border-color: #c7d7ea;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.075);
}

.purchase-command-card,
.purchase-item-command,
.purchase-summary-panel {
    padding: 14px;
}

.purchase-left-rail,
.purchase-summary-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.purchase-card-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.purchase-card-header > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
}

.purchase-card-header i {
    color: #059669;
}

.purchase-field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-window.modal-purchase-create .purchase-command-workspace .form-label {
    min-height: auto;
    font-size: 0.72rem;
    color: #475569;
    margin: 0;
}

.modal-window.modal-purchase-create .purchase-command-workspace .form-control,
.modal-window.modal-purchase-create .purchase-command-workspace .dropdown-search-input {
    min-height: 42px !important;
    height: auto !important;
    border-radius: 12px !important;
    border: 1px solid #d8e0eb !important;
    background: #fff !important;
    padding: 9px 11px !important;
    font-size: 0.86rem !important;
}

.purchase-info-grid,
.purchase-charge-grid,
.purchase-quick-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.purchase-supplier-metrics,
.purchase-summary-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.purchase-supplier-metrics div,
.purchase-summary-metrics div,
.purchase-insight-list div {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
}

.purchase-supplier-metrics small,
.purchase-summary-metrics span,
.purchase-insight-list span {
    display: block;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.purchase-supplier-metrics strong,
.purchase-summary-metrics strong,
.purchase-insight-list strong {
    color: #0f172a;
    font-size: 0.92rem;
}

.purchase-inline-drawer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cfe0f5;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
}

.purchase-inline-drawer h5 {
    margin: 0;
    font-size: 0.82rem;
}

.purchase-inline-drawer > div:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.purchase-action-chips {
    gap: 8px;
    flex-wrap: wrap;
}

.purchase-action-chips button,
.purchase-payment-strip button,
.purchase-quick-actions-grid button {
    border: 1px solid #dbe4ef;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 800;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.purchase-add-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 120px 140px 130px;
    gap: 10px;
    align-items: end;
}

.purchase-spreadsheet-card {
    flex: 1;
    min-height: 330px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.purchase-spreadsheet-head,
.purchase-spreadsheet-row {
    display: grid;
    grid-template-columns: 92px 54px minmax(180px, 1.4fr) 80px 70px 70px 92px 72px 92px 72px 80px 110px 38px;
    min-width: 1220px;
    align-items: center;
}

.purchase-spreadsheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef4fb;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 1px solid #dbe4ef;
}

.purchase-spreadsheet-head span,
.purchase-spreadsheet-row > span,
.purchase-spreadsheet-row > button {
    padding: 10px 9px;
}

.purchase-spreadsheet-body {
    flex: 1;
    overflow: auto;
}

.modal-window.modal-purchase-create .purchase-command-workspace #pItemsListContainer {
    grid-column: auto;
    min-height: 0;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

.purchase-spreadsheet-row {
    border-bottom: 1px solid #eef2f7;
    color: #1e293b;
    font-size: 0.8rem;
}

.purchase-spreadsheet-row:hover {
    background: #f8fbff;
}

.purchase-spreadsheet-row small {
    display: block;
    color: #64748b;
    margin-top: 2px;
}

.purchase-row-image {
    width: 34px;
    height: 34px;
    margin-left: 9px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purchase-empty-workspace {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #64748b;
}

.purchase-empty-workspace i {
    width: 46px;
    height: 46px;
    color: #2563eb;
}

.purchase-empty-workspace strong {
    color: #0f172a;
}

.purchase-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 14px;
}

.purchase-insight-list {
    display: grid;
    gap: 8px;
}

.purchase-insight-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.purchase-upload-zone {
    min-height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed #93c5fd;
    border-radius: 14px;
    background: #f8fbff;
    color: #64748b;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.purchase-upload-zone:hover {
    background: #eff6ff;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.purchase-upload-zone.dragging {
    background: #ecfdf5;
    border-color: #059669;
    box-shadow: inset 0 0 0 2px rgba(5, 150, 105, 0.16);
}

.purchase-upload-zone i {
    color: #2563eb;
}

.notes-card textarea {
    resize: vertical;
}

.purchase-attachment-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.purchase-attachment-item,
.purchase-attachment-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

.purchase-attachment-item span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.purchase-attachment-item button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    background: #fee2e2;
    color: #b91c1c;
    cursor: pointer;
    font-weight: 900;
}

.purchase-summary-rail {
    overflow: visible;
}

.purchase-summary-panel {
    position: sticky;
    top: 0;
}

.purchase-summary-metrics {
    margin-top: 0;
}

.purchase-charge-grid {
    margin: 12px 0;
}

.purchase-net-total {
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #059669, #0f766e);
    color: #fff;
    box-shadow: 0 16px 34px rgba(5, 150, 105, 0.25);
}

.purchase-net-total span,
.purchase-net-total small {
    color: rgba(255,255,255,0.82);
}

.purchase-net-total strong {
    display: block;
    margin: 6px 0;
    font-size: 2rem;
    line-height: 1;
}

.purchase-payment-strip,
.purchase-summary-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.purchase-payment-strip button.active {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.purchase-summary-actions {
    grid-template-columns: 0.8fr 1.2fr;
}

.purchase-summary-actions .btn {
    min-height: 44px;
    justify-content: center;
}

.purchase-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.purchase-quick-create-panel {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #f8fbff;
}

.purchase-quick-create-panel > div {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.purchase-quick-create-panel strong {
    text-transform: capitalize;
}

.purchase-command-footer {
    justify-content: space-between;
    gap: 12px;
    padding: 9px 18px;
    background: #fff;
    border-top: 1px solid #dbe4ef;
    color: #64748b;
    font-size: 0.74rem;
}

.purchase-command-footer strong {
    color: #0f172a;
}

.muted {
    color: #64748b;
}

.ok {
    color: #059669 !important;
}

.danger-text {
    color: #dc2626 !important;
}

.modal-window.modal-purchase-create .purchase-command-workspace input:focus,
.modal-window.modal-purchase-create .purchase-command-workspace select:focus,
.modal-window.modal-purchase-create .purchase-command-workspace textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.13) !important;
}

.purchase-return-compact {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.purchase-return-compact > p,
.purchase-return-compact > .table-responsive {
    grid-column: 1 / -1;
}

.purchase-compact-subgrid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 8px 10px;
}

@media (max-width: 1100px) {
    .purchase-compact-form {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .purchase-swipe-create {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .purchase-list-insights {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
    .purchase-list-toolbar {
        flex-wrap: wrap;
    }
    .purchase-list-toolbar .filter-control:first-child {
        width: 100%;
    }
    .purchase-swipe-create > .form-group:has(#pBillNotes),
    .purchase-swipe-create > div:has(#pModalGrandTotal) {
        grid-column: 1 / -1 !important;
    }
    .purchase-compact-subgrid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

/* Purchase entry production workspace */
.modal-window.modal-purchase-create .purchase-command-layout {
    width: min(100%, 1580px);
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) 310px;
}
.modal-window.modal-purchase-create .purchase-command-header > * { min-width: 0; }
.modal-window.modal-purchase-create .purchase-brand-cluster strong { display: block; font-size: .95rem; }
.modal-window.modal-purchase-create .purchase-info-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.modal-window.modal-purchase-create .purchase-info-grid > div:nth-child(6) { display: none; }
.modal-window.modal-purchase-create .purchase-add-row {
    grid-template-columns: minmax(230px, 1fr) 74px 100px 86px 76px 100px;
    gap: 8px;
}
.modal-window.modal-purchase-create .purchase-spreadsheet-head,
.modal-window.modal-purchase-create .purchase-spreadsheet-row {
    grid-template-columns: 38px 48px minmax(170px, 1.5fr) 70px 105px 58px 66px 100px 88px 70px 105px 36px;
    min-width: 980px;
}
.modal-window.modal-purchase-create .purchase-spreadsheet-row > span,
.modal-window.modal-purchase-create .purchase-spreadsheet-head > span { border-right: 1px solid #edf1f5; }
.modal-window.modal-purchase-create .purchase-spreadsheet-row > span:last-of-type { text-align: right; }

.modal-window.modal-purchase-create .purchase-bottom-grid.purchase-expense-workspace {
    display: grid;
    grid-template-columns: .9fr 1.25fr 1.1fr;
    gap: 10px;
}
.modal-window.modal-purchase-create .purchase-expense-fields,
.modal-window.modal-purchase-create .purchase-paid-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.modal-window.modal-purchase-create .purchase-expense-card .purchase-mini-btn { margin-top: 10px; color: #06743a; }
.modal-window.modal-purchase-create .purchase-payment-mode {
    display: flex;
    gap: 20px;
    margin: 0 0 10px;
    font-size: .8rem;
}
.modal-window.modal-purchase-create .purchase-payment-mode label { display: inline-flex; align-items: center; gap: 6px; }
.modal-window.modal-purchase-create .purchase-payment-card textarea { margin-top: 8px; }
.modal-window.modal-purchase-create .purchase-distribution-table { border: 1px solid #e4eaf1; border-radius: 7px; overflow: hidden; }
.modal-window.modal-purchase-create .purchase-distribution-head,
.modal-window.modal-purchase-create .purchase-distribution-row {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, .9fr);
    font-size: .69rem;
}
.modal-window.modal-purchase-create .purchase-distribution-head { background: #f7f9fc; font-weight: 800; }
.modal-window.modal-purchase-create .purchase-distribution-head span,
.modal-window.modal-purchase-create .purchase-distribution-row span { padding: 7px; border-right: 1px solid #edf1f5; }
.modal-window.modal-purchase-create .purchase-distribution-row { border-top: 1px solid #edf1f5; }
.modal-window.modal-purchase-create .purchase-distribution-empty { padding: 24px 10px; text-align: center; color: #8491a3; font-size: .75rem; }

.modal-window.modal-purchase-create .purchase-summary-metrics div:nth-child(3)::before { content: "Sub Total"; color: #64748b; font-size: .76rem; }
.modal-window.modal-purchase-create .purchase-summary-metrics div:nth-child(3) span { display: none; }
.modal-window.modal-purchase-create .purchase-summary-panel::after {
    content: "Expenses are distributed proportionally by item value";
    display: block;
    margin-top: 10px;
    padding: 8px;
    border-radius: 6px;
    background: #f0fbf4;
    color: #32724e;
    font-size: .67rem;
}

.modal-window.modal-purchase-create .purchase-command-footer {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
}
.modal-window.modal-purchase-create .purchase-command-footer .purchase-shortcuts,
.modal-window.modal-purchase-create .purchase-command-footer .purchase-footer-actions { display: flex; align-items: center; gap: 8px; }
.modal-window.modal-purchase-create .purchase-command-footer .purchase-shortcuts span {
    display: inline-flex;
    gap: 4px;
    font-size: .67rem;
    color: #667085;
}
.modal-window.modal-purchase-create .purchase-footer-actions .btn { min-height: 38px; border-radius: 7px; padding: 8px 14px; }

.modal-window.modal-purchase-create .purchase-settings-drawer {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    padding: 20px;
    background: #fff;
    border-left: 1px solid #dfe7f1;
    box-shadow: -18px 0 40px rgba(16, 24, 40, .13);
}
.modal-window.modal-purchase-create .purchase-settings-drawer p { color: #667085; font-size: .78rem; }
.modal-window.modal-purchase-create .purchase-column-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 22px; }
.modal-window.modal-purchase-create .purchase-column-options label { display: flex; gap: 7px; align-items: center; padding: 9px; border: 1px solid #e5eaf0; border-radius: 7px; font-size: .76rem; }

.modal-window.modal-purchase-create .hide-purchase-hsn .purchase-spreadsheet-head > :nth-child(4),
.modal-window.modal-purchase-create .hide-purchase-hsn .purchase-spreadsheet-row > :nth-child(4),
.modal-window.modal-purchase-create .hide-purchase-batch .purchase-spreadsheet-head > :nth-child(5),
.modal-window.modal-purchase-create .hide-purchase-batch .purchase-spreadsheet-row > :nth-child(5),
.modal-window.modal-purchase-create .hide-purchase-unit .purchase-spreadsheet-head > :nth-child(7),
.modal-window.modal-purchase-create .hide-purchase-unit .purchase-spreadsheet-row > :nth-child(7),
.modal-window.modal-purchase-create .hide-purchase-discount .purchase-spreadsheet-head > :nth-child(9),
.modal-window.modal-purchase-create .hide-purchase-discount .purchase-spreadsheet-row > :nth-child(9),
.modal-window.modal-purchase-create .hide-purchase-tax .purchase-spreadsheet-head > :nth-child(10),
.modal-window.modal-purchase-create .hide-purchase-tax .purchase-spreadsheet-row > :nth-child(10) { display: none; }

@media (max-width: 1280px) {
    .modal-window.modal-purchase-create .purchase-command-layout { grid-template-columns: minmax(0, 1fr) 282px; padding-inline: 10px; }
    .modal-window.modal-purchase-create .purchase-command-header { grid-template-columns: 220px 210px 1fr; padding-inline: 12px; }
    .modal-window.modal-purchase-create .purchase-brand-cluster span { display: none; }
    .modal-window.modal-purchase-create .purchase-bottom-grid.purchase-expense-workspace { grid-template-columns: 1fr 1fr; }
    .modal-window.modal-purchase-create .purchase-distribution-card { grid-column: 1 / -1; }
    .modal-window.modal-purchase-create .purchase-shortcuts { display: none !important; }
}
@media (max-width: 900px) {
    .modal-window.modal-purchase-create .purchase-command-layout { display: block; }
    .modal-window.modal-purchase-create .purchase-command-layout > * { margin-bottom: 10px; }
    .modal-window.modal-purchase-create .purchase-summary-rail { display: block; }
    .modal-window.modal-purchase-create .purchase-summary-panel { position: static; }
    .modal-window.modal-purchase-create .purchase-info-grid,
    .modal-window.modal-purchase-create .supplier-card { grid-template-columns: 1fr 1fr; }
    .modal-window.modal-purchase-create .purchase-add-row { grid-template-columns: 1fr 1fr; }
    .modal-window.modal-purchase-create .purchase-bottom-grid.purchase-expense-workspace { grid-template-columns: 1fr; }
    .modal-window.modal-purchase-create .purchase-distribution-card { grid-column: auto; }
}
@media (max-width: 600px) {
    .modal-window.modal-purchase-create .purchase-command-header { grid-template-columns: 1fr auto; }
    .modal-window.modal-purchase-create .purchase-header-actions .purchase-branch-pill { display: none; }
    .modal-window.modal-purchase-create .purchase-info-grid,
    .modal-window.modal-purchase-create .supplier-card,
    .modal-window.modal-purchase-create .purchase-expense-fields,
    .modal-window.modal-purchase-create .purchase-paid-fields { grid-template-columns: 1fr; }
    .modal-window.modal-purchase-create .purchase-command-footer { overflow-x: auto; }
    .modal-window.modal-purchase-create .purchase-footer-actions .btn { white-space: nowrap; padding-inline: 10px; }
}

@media (max-width: 700px) {
    .purchase-compact-form,
    .purchase-return-compact,
    .purchase-compact-subgrid {
        grid-template-columns: 1fr;
    }
    .purchase-swipe-list {
        padding: 12px;
    }
    .purchase-list-insights,
    .purchase-swipe-create {
        grid-template-columns: 1fr;
    }
    .purchase-create-topbar,
    .purchase-meta-strip,
    .purchase-list-header,
    .purchase-list-totals {
        flex-wrap: wrap;
    }
    .purchase-swipe-create > .form-group:has(#pBillSupplierContainer) {
        grid-column: 1 / -1;
    }
    .purchase-number-preview {
        width: 100%;
    }
}

@media (min-width: 1101px) {
    .modal-window.modal-purchase-create .purchase-swipe-create {
        grid-template-columns: 1.05fr 1fr 1.15fr 360px;
    }
}

@media (max-width: 1100px) {
    .modal-window.modal-purchase-create .purchase-swipe-create {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        overflow-y: auto;
    }
    .modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pAddItemSelectContainer),
    .modal-window.modal-purchase-create #pItemsListContainer,
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillNotes),
    .modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pModalGrandTotal) {
        grid-column: 1 / -1 !important;
        grid-row: auto;
        position: static;
    }
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillDiscount),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillFreight),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pRoundOff),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pExtraTax) {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .modal-window.modal-purchase-create .purchase-swipe-create {
        grid-template-columns: 1fr;
        padding: 0 10px 84px;
    }
    .modal-window.modal-purchase-create .purchase-create-topbar {
        margin: 0 -10px;
    }
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group,
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillSupplierContainer),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillDiscount),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pBillFreight),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pRoundOff),
    .modal-window.modal-purchase-create .purchase-swipe-create > .form-group:has(#pExtraTax),
    .modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pAddItemSelectContainer) {
        grid-column: 1 / -1 !important;
    }
    .modal-window.modal-purchase-create .purchase-swipe-create > div:has(#pAddItemSelectContainer) > div:last-child {
        grid-template-columns: 1fr !important;
    }
    .modal-window.modal-purchase-create #pItemsListContainer {
        max-height: 300px !important;
    }
}

@media (max-width: 1280px) {
    .purchase-command-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .purchase-title-cluster {
        justify-content: flex-start;
    }
    .purchase-header-actions {
        justify-content: flex-start;
    }
    .purchase-command-layout {
        grid-template-columns: minmax(300px, 0.85fr) minmax(520px, 1.15fr);
        overflow-y: auto;
    }
    .purchase-summary-rail {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(340px, 1fr) minmax(260px, 0.7fr);
        overflow: visible;
    }
    .purchase-summary-panel {
        position: static;
    }
}

@media (max-width: 920px) {
    .purchase-hero-strip,
    .purchase-command-layout,
    .purchase-bottom-grid,
    .purchase-summary-rail {
        grid-template-columns: 1fr;
    }
    .purchase-command-layout {
        overflow-y: auto;
    }
    .purchase-add-row {
        grid-template-columns: 1fr 1fr;
    }
    .purchase-add-row #pAddToListBtn {
        grid-column: 1 / -1;
        min-height: 44px;
    }
    .purchase-command-footer {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .modal-window.modal-purchase-create .modal-body {
        overflow: hidden !important;
    }
    .purchase-command-header {
        padding: 10px;
        gap: 10px;
    }
    .purchase-header-actions .purchase-branch-pill,
    .purchase-title-cluster .purchase-sync-pill {
        display: none;
    }
    .purchase-hero-strip,
    .purchase-command-layout {
        padding-left: 10px;
        padding-right: 10px;
    }
    .purchase-command-layout {
        padding-bottom: 86px;
    }
    .purchase-info-grid,
    .purchase-charge-grid,
    .purchase-supplier-metrics,
    .purchase-summary-metrics,
    .purchase-add-row,
    .purchase-payment-strip,
    .purchase-summary-actions {
        grid-template-columns: 1fr;
    }
    .purchase-summary-panel {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 20;
        padding: 10px;
        box-shadow: 0 -12px 30px rgba(15, 23, 42, 0.16);
    }
    .purchase-summary-panel .purchase-card-header,
    .purchase-summary-metrics,
    .purchase-charge-grid,
    .purchase-payment-strip {
        display: none;
    }
    .purchase-net-total {
        padding: 10px 12px;
    }
    .purchase-net-total strong {
        font-size: 1.45rem;
    }
    .purchase-summary-actions {
        margin-top: 8px;
    }
    .purchase-spreadsheet-card {
        min-height: 300px;
    }
}

.modal-window.modal-purchase-create .purchase-command-workspace.purchase-swipe-create {
    grid-template-columns: none;
    padding: 0;
}

/* ==========================================================================
   MODULE-SPECIFIC VIEWS
   ========================================================================== */

/* Dashboard KPI layouts */
.kpi-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.12);
    color: var(--color-primary);
}

.kpi-icon-wrapper.sales { background: rgba(16, 185, 129, 0.12); color: var(--color-secondary); }
.kpi-icon-wrapper.purchases { background: rgba(99, 102, 241, 0.12); color: var(--color-primary); }
.kpi-icon-wrapper.expenses { background: rgba(239, 68, 68, 0.12); color: var(--color-danger); }
.kpi-icon-wrapper.profit { background: rgba(245, 158, 11, 0.12); color: var(--color-accent); }

.kpi-info h3 {
    font-size: 1.85rem;
    font-weight: 700;
    font-family: var(--font-title);
    margin-top: 4px;
}

.chart-card-wrapper {
    margin-top: 24px;
    min-height: 350px;
}

/* POS Layout (Highly optimized for speed, touch and responsiveness) */
.pos-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    height: calc(100vh - 120px);
    gap: 20px;
    transition: all var(--transition-normal);
}

.pos-catalog {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.pos-catalog-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Category horizontal scroll bar */
.pos-categories-container {
    width: 100%;
    margin-bottom: 12px;
    position: relative;
}

.pos-categories-wrapper {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: none; /* Firefox */
}

.pos-categories-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.pos-category-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.pos-category-pill:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.pos-category-pill.active {
    background: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.2);
}

/* Grid size toggles */
.pos-grid-toggles {
    display: flex;
    gap: 4px;
    background: var(--bg-surface-elevated);
    padding: 4px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.pos-grid-size-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.pos-grid-size-btn:hover {
    color: var(--color-primary);
}

.pos-grid-size-btn.active {
    background: var(--bg-surface);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* Catalog Grid Variants */
.pos-catalog-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding-bottom: 20px;
    transition: all var(--transition-normal);
}

.pos-catalog-grid.grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.pos-catalog-grid.grid-medium {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.pos-catalog-grid.grid-large {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

/* Product Card Redesign */
.pos-product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    position: relative;
    user-select: none;
    overflow: hidden;
}

.pos-product-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.pos-product-image-container {
    width: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface-elevated);
    margin-bottom: 8px;
}

.pos-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.pos-product-card:hover .pos-product-image {
    transform: scale(1.06);
}

/* Grid sizes overrides for image height */
.grid-compact .pos-product-image-container { height: 75px; }
.grid-medium .pos-product-image-container { height: 100px; }
.grid-large .pos-product-image-container { height: 140px; }

.pos-product-stock-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    z-index: 5;
}

.pos-product-category-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    z-index: 5;
}

.pos-product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pos-product-name {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 6px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pos-product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.pos-product-price {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.05rem;
}

.pos-product-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* POS Cart Pane */
.pos-cart-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal);
}

.pos-cart-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pos-cart-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pos-cart-item {
    display: flex;
    gap: 10px;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 8px 10px;
    position: relative;
    transition: all var(--transition-fast);
    align-items: center;
}

.pos-cart-item:hover {
    border-color: var(--color-primary-rgb);
    box-shadow: var(--shadow-sm);
}

.pos-cart-item-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
}

.pos-cart-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pos-cart-item-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-cart-item-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    transition: all var(--transition-fast);
}

.qty-btn:hover {
    background: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
}

.pos-cart-item-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.pos-cart-item-total {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
}

.pos-cart-item-modifiers {
    display: flex;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.pos-cart-item-modifiers input {
    width: 50px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.7rem;
    text-align: right;
}

.pos-cart-item-remove {
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    margin-left: 6px;
    line-height: 1;
    padding: 0 4px;
    transition: transform var(--transition-fast);
}

.pos-cart-item-remove:hover {
    transform: scale(1.2);
}

.pos-cart-totals {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-elevated);
}

.pos-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pos-grand-total {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-secondary);
}

.pos-cart-checkout-actions {
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-elevated);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Floating cart button and Mobile bottom drawer */
.pos-mobile-cart-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-primary);
    color: var(--text-inverse);
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    z-index: 95;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.pos-mobile-cart-toggle i {
    width: 24px;
    height: 24px;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .pos-layout {
        grid-template-columns: 1fr 340px;
    }
}

@media (max-width: 767px) {
    .pos-layout {
        grid-template-columns: 1fr;
        height: calc(100vh - 70px);
        margin-bottom: 80px; /* Safe space for floating button */
    }

    .pos-cart-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 85vh;
        z-index: 1000;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    }

    .pos-cart-panel.mobile-drawer-open {
        transform: translateY(0);
    }

    .pos-mobile-cart-toggle {
        display: flex;
    }

    /* Modal Backdrop for Mobile Drawer */
    .pos-mobile-drawer-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        display: none;
    }

    .pos-mobile-drawer-backdrop.active {
        display: block;
    }
}

/* ==========================================================================
   SaaS BRANDING & THEME EDITOR
   ========================================================================== */
.color-picker-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-preview-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

/* ==========================================================================
   MODALS AND NOTIFICATIONS Dropdown
   ========================================================================== */
.modal-backdrop {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: calc(100% - 70px);
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: top var(--transition-normal), height var(--transition-normal);
}

.modal-window {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp var(--transition-normal);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-window.invoice-payment-detail-modal {
    width: min(1120px, calc(100vw - 42px)) !important;
    max-width: 1120px !important;
}

.modal-window.invoice-payment-detail-modal .modal-body {
    overflow: visible;
}

@media (max-width: 920px) {
    .modal-window.invoice-payment-detail-modal {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
    }

    .modal-window.invoice-payment-detail-modal .invoice-payment-detail-layout {
        grid-template-columns: 1fr !important;
        max-height: 80vh !important;
    }
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none !important;
}

/* Toast System styling */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 14px 20px;
    border-radius: var(--border-radius-md);
    background: var(--bg-surface);
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    animation: toastSlideIn var(--transition-normal);
    min-width: 280px;
}

.toast-success { border-left-color: var(--color-secondary); }
.toast-danger { border-left-color: var(--color-danger); }
.toast-warning { border-left-color: var(--color-accent); }

@keyframes toastSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Notifications Dropdown */
.notifications-dropdown {
    position: absolute;
    top: 50px;
    right: 0;
    width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 120;
}

.dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-elevated);
}

.dropdown-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
}

.clear-btn {
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.notifications-list {
    max-height: 250px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notification-item:hover {
    background: var(--bg-surface-elevated);
}

.notification-item-time {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Search results drop box */
.search-results-dropdown {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.search-result-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}

.search-result-item:hover {
    background: var(--bg-surface-elevated);
}

.search-result-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.search-result-category {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   ACCOUNTS, LEDGER & REPORT TAB LAYOUTS
   ========================================================================== */
.accounts-tab-header, .ledger-tab-header, .reports-tab-header {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 16px;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab-btn i,
.tab-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.tab-btn:hover {
    color: var(--text-main);
}

.tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--bg-surface-elevated);
    padding: 14px;
    border-radius: var(--border-radius-md);
    margin-bottom: 20px;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.filter-control {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
}

/* Global Overlay & Print Invoices styling */
@media print {
    body * {
        visibility: hidden;
    }
    #invoicePrintTemplate, #invoicePrintTemplate * {
        visibility: visible;
    }
    #invoicePrintTemplate {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        color: #000 !important;
        background: #fff !important;
    }
}

/* Keyboard Shortcuts Modal Help */
.kbd-shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kbd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.kbd-row kbd {
    background: var(--bg-surface-elevated);
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   PHASE 2 ADDITIONS (FULL-SCREEN MODALS, SEARCHABLE DROPDOWNS, CENTERED SEARCH)
   ========================================================================== */
.modal-window.modal-fullscreen {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Searchable Dropdown CSS */
.searchable-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.searchable-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    margin-top: 4px;
}

.searchable-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-main);
    transition: background var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-align: left;
}

.searchable-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.searchable-dropdown-item.selected {
    background: var(--color-primary);
    color: #fff;
}

.dropdown-search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* Centered global search overrides */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.header-left {
    flex: 0 0 auto !important;
    max-width: none !important;
}

.global-search-container {
    position: relative;
    width: 480px;
    margin: 0 auto;
}

.header-right {
    flex: 0 0 auto !important;
}

/* Global search grouped results */
.search-group-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.search-result-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.search-result-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   PREMIUM SALES INVOICE REDESIGN STYLES
   ========================================================================== */

/* Fullscreen modal styling overrides for this screen */
.modal-window.modal-fullscreen {
    background: var(--bg-app) !important;
}

.modal-window.modal-fullscreen .modal-header {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 24px !important;
}

.modal-window.modal-fullscreen .modal-body {
    padding: 20px !important;
    overflow: hidden !important;
    max-height: calc(100vh - 70px - 58px) !important;
}

/* Main Layout Grid */
.invoice-layout-grid {
    display: grid;
    grid-template-columns: 320px 1fr 340px;
    gap: 20px;
    height: calc(100vh - 160px);
    overflow: hidden;
}

/* Scrollable column panel */
.invoice-panel-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.invoice-scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

/* Beautiful Cards */
.invoice-card {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    margin-bottom: 16px;
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.invoice-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

.invoice-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background: linear-gradient(to right, rgba(var(--color-primary-rgb), 0.03), transparent);
}

.invoice-card-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
}

.invoice-card-icon-container.blue { background: linear-gradient(135deg, #3b82f6, #0066de); }
.invoice-card-icon-container.green { background: linear-gradient(135deg, #10b981, #059669); }
.invoice-card-icon-container.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.invoice-card-icon-container.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.invoice-card-title {
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
}

.invoice-card-body {
    padding: 16px;
}

/* Premium Inputs */
.invoice-field-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.invoice-field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.invoice-field-control-container {
    position: relative;
    display: flex;
    align-items: center;
}

.invoice-field-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
    pointer-events: none;
}

.invoice-field-control {
    width: 100%;
    min-height: 48px;
    background: var(--bg-app);
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 10px 14px 10px 42px;
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 500;
    transition: all var(--transition-normal);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);
}

.invoice-field-control:hover {
    background: var(--bg-surface-elevated);
    border-color: var(--border-color-hover);
}

.invoice-field-control:focus {
    background: var(--bg-input-focus);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12), var(--shadow-sm);
}

.invoice-field-control:focus ~ .invoice-field-icon {
    color: var(--color-primary);
}

/* Dropdown tweaks */
.invoice-field-control-container .searchable-dropdown-wrapper {
    width: 100%;
}
.invoice-field-control-container .dropdown-search-input {
    padding-left: 42px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid transparent !important;
    background-color: var(--bg-app) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
}
.invoice-field-control-container .dropdown-search-input:focus {
    background-color: var(--bg-input-focus) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12) !important;
}

/* Product Search Bar Area */
.product-search-bar-card {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-md);
    padding: 16px;
    margin-bottom: 20px;
}

.product-search-actions-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.product-search-input-group {
    flex: 1;
    position: relative;
}

.scanner-indicators-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
}

.scanner-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
}

.scanner-indicator.active {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    animation: scannerPulse 1.5s infinite;
}

@keyframes scannerPulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.product-qty-price-row {
    display: grid;
    grid-template-columns: 140px 140px 1fr;
    gap: 12px;
    align-items: center;
}

/* Quantity controls redesign */
.qty-control-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg-app);
    border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.04);
    overflow: hidden;
    height: 48px;
}

.qty-btn {
    border: none;
    background: none;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.qty-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

.qty-input-field {
    flex: 1;
    border: none;
    background: none;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    width: 50px;
    height: 100%;
}

/* Redesigned Product Table */
.invoice-table-wrapper {
    flex: 1;
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
    overflow-y: auto;
    position: relative;
    min-height: 200px;
}

.invoice-table-custom {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: left;
}

.invoice-table-custom th {
    background: var(--bg-surface-elevated);
    padding: 14px 16px;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.invoice-table-custom td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    vertical-align: middle;
    color: var(--text-main);
}

.invoice-table-custom tr:hover {
    background: rgba(var(--color-primary-rgb), 0.02);
}

.prod-thumbnail {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: var(--shadow-sm);
}

.inline-qty-badge {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}

/* Beautiful Empty State */
.invoice-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    height: 100%;
    color: var(--text-muted);
}

.invoice-empty-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.invoice-empty-title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.invoice-empty-desc {
    font-size: 0.85rem;
    max-width: 280px;
    line-height: 1.4;
}

/* Right Column Summary */
.summary-net-payable-card {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 25px rgba(16,185,129,0.3);
    margin-top: 14px;
    position: relative;
    overflow: hidden;
}

.summary-net-payable-card::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    right: -40px;
    top: -40px;
}

.net-payable-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 4px;
}

.net-payable-value {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

/* Quick action buttons list */
.quick-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.btn-invoice-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    min-height: 48px;
    color: #fff;
    padding: 8px 12px;
    box-shadow: var(--shadow-sm);
}

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

.btn-invoice-action:active {
    transform: translateY(0);
}

.btn-invoice-action.hold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.btn-invoice-action.recall { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.btn-invoice-action.draft { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.btn-invoice-action.import { background: linear-gradient(135deg, #6b7280, #4b5563); }
.btn-invoice-action.print { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.btn-invoice-action.post { 
    background: linear-gradient(135deg, #10b981, #059669);
    grid-column: 1 / -1;
    font-size: 0.95rem;
    min-height: 52px;
    box-shadow: 0 4px 15px rgba(16,185,129,0.25);
}

/* Quick Creation Forms Inline Wrap */
.invoice-inline-form-row {
    background: var(--bg-surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    animation: slideDownFade var(--transition-normal);
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyboard Shortcuts bar */
.shortcuts-footer-bar {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 10px 20px;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.shortcut-pill {
    display: flex;
    align-items: center;
    gap: 6px;
}

.shortcut-pill kbd {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--text-main);
    font-weight: 800;
    font-family: inherit;
    box-shadow: var(--shadow-sm);
}

/* Held Invoices Drawer overlay */
.held-invoices-drawer {
    position: absolute;
    top: 0;
    right: -360px;
    width: 350px;
    height: 100%;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transition: right var(--transition-normal);
}

.held-invoices-drawer.open {
    right: 0;
}

.drawer-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-elevated);
}

.drawer-header h4 {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.held-invoice-item {
    background: var(--bg-app);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.held-invoice-item:hover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.02);
}

.held-item-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.held-item-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE SYSTEM
   ========================================================================== */
@media (max-width: 767px) {
    /* Stack elements on mobile only */
    .invoice-layout-grid {
        grid-template-columns: 1fr;
        height: auto;
        overflow-y: auto;
        padding-bottom: 80px; /* Space for sticky bottom bar */
        gap: 16px;
    }
    
    .modal-window.modal-fullscreen .modal-body {
        overflow-y: auto !important;
    }
    
    .invoice-panel-column {
        height: auto;
        overflow: visible;
    }
    
    .invoice-table-wrapper {
        min-height: auto;
        max-height: 400px;
    }
    
    .shortcuts-footer-bar {
        display: none; /* Hide shortcuts on touch devices */
    }
}

@media (max-width: 768px) {
    /* Dedicated Mobile Layout styling */
    .modal-window.modal-fullscreen .modal-body {
        padding: 10px !important;
    }
    
    .invoice-card {
        border-radius: 12px;
        margin-bottom: 10px;
    }
    
    .invoice-card-header {
        padding: 10px 14px;
    }
    
    .invoice-card-body {
        padding: 12px;
    }
    
    .product-qty-price-row {
        grid-template-columns: 1fr 1fr;
    }
    
    .product-qty-price-row #sAddToListBtn {
        grid-column: 1 / -1;
    }
    
    /* Sticky Mobile Footer */
    .mobile-sticky-summary-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--bg-surface);
        border-top: 1.5px solid var(--border-color);
        box-shadow: 0 -8px 25px rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        z-index: 1000;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .mobile-total-box {
        display: flex;
        flex-direction: column;
    }
    
    .mobile-total-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    
    .mobile-total-value {
        font-family: var(--font-title);
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--color-secondary);
    }
    
    /* Mobile FAB (Floating Action Button) */
    .mobile-fab-btn {
        position: fixed;
        right: 16px;
        bottom: 80px; /* Sits above sticky bottom summary */
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background: linear-gradient(135deg, #0066de, #2563eb);
        color: #fff;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(37,99,235,0.4);
        cursor: pointer;
        z-index: 1002;
        transition: transform var(--transition-normal);
    }
    
    .mobile-fab-btn.open {
        transform: rotate(45deg);
        background: linear-gradient(135deg, #ef4444, #dc2626);
        box-shadow: 0 6px 20px rgba(220,38,38,0.4);
    }
    
    /* Speed dial menu */
    .mobile-fab-speeddial {
        position: fixed;
        right: 20px;
        bottom: 145px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        z-index: 1002;
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all var(--transition-normal);
    }
    
    .mobile-fab-speeddial.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    
    .speeddial-option {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        cursor: pointer;
    }
    
    .speeddial-label {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        box-shadow: var(--shadow-sm);
        color: var(--text-main);
    }
    
    .speeddial-icon-btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-md);
        color: var(--text-main);
    }
    
    .speeddial-option:hover .speeddial-icon-btn {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }
    
    /* Render products as cards in mobile layout instead of tables */
    .mobile-product-card {
        background: var(--bg-surface);
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 12px;
        padding: 12px;
        margin-bottom: 8px;
        display: flex;
        gap: 12px;
        align-items: center;
        position: relative;
    }
    
    .mobile-product-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .mobile-product-card-title {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-main);
    }
    
    .mobile-product-card-meta {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    .mobile-product-card-price {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--color-secondary);
    }
    
    .mobile-product-card-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }
    
    .mobile-product-card-delete {
        background: none;
        border: none;
        color: var(--color-danger);
        cursor: pointer;
    }
}

/* ==========================================================================
   UNIFIED SMART SALES WORKSPACE (POS + INVOICE MERGE) STYLES
   ========================================================================== */

/* Fullscreen toggle overrides */
.app-layout.fullscreen-sales-mode {
    grid-template-columns: 1fr !important;
}
.app-layout.fullscreen-sales-mode #appSidebar {
    display: none !important;
}
.app-layout.fullscreen-sales-mode .app-header {
    display: none !important;
}
.app-layout.fullscreen-sales-mode .app-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Fullscreen Workspace layout container */
.sales-ws-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background-color: var(--bg-app);
    overflow: hidden;
}

/* Sticky top branding header */
.sales-ws-header {
    height: 70px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1.5px solid var(--border-color);
    display: grid;
    grid-template-columns: 240px 1fr auto;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
    gap: 16px;
}

.sales-ws-brand-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sales-ws-logo-text {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-primary);
    letter-spacing: -0.01em;
}

.sales-ws-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(var(--color-danger-rgb), 0.08);
    color: var(--color-danger);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all var(--transition-fast);
}

.sales-ws-close-btn:hover {
    background: var(--color-danger);
    color: #fff;
    transform: scale(1.05);
}

.sales-ws-search-center {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.sales-ws-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.sales-ws-barcode-icon {
    position: absolute;
    right: 12px;
    width: 118px;
    height: 31px;
    padding: 5px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background: #fff;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.sales-ws-barcode-icon::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            #111 0 2px,
            transparent 2px 4px,
            #111 4px 5px,
            transparent 5px 8px,
            #111 8px 11px,
            transparent 11px 13px,
            #111 13px 14px,
            transparent 14px 17px
        );
}

.sales-ws-search-control {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    padding: 10px 145px 10px 42px;
    font-size: 0.9rem;
    background: var(--bg-surface);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.sales-ws-search-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.12), var(--shadow-md);
    background: var(--bg-input-focus);
}

.sales-ws-brand-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.sales-ws-comp-logo {
    height: 38px;
    width: 38px;
    border-radius: 8px;
    object-fit: contain;
    border: 1px solid var(--border-color);
    background: #fff;
}

/* Two-column layout grid */
.sales-ws-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    height: calc(100vh - 70px);
    overflow: hidden;
}

/* Main left-side Catalog panel */
.sales-ws-main-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 16px;
    border-right: 1.5px solid var(--border-color);
}

/* Scrollable catalog wrapper */
.sales-ws-catalog-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

/* Customer card summary styled dynamically */
.sales-ws-cust-card {
    background: var(--bg-surface);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 16px;
    align-items: center;
}

.sales-ws-cust-left {
    border-right: 1.5px dashed var(--border-color);
    padding-right: 14px;
}

.sales-ws-cust-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    font-size: 0.75rem;
}

.sales-ws-cust-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sales-ws-cust-meta-label {
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

.sales-ws-cust-meta-val {
    font-weight: 700;
    color: var(--text-main);
}

/* Custom categories horizontal bar */
.sales-ws-categories-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
    scrollbar-width: none; /* Hide scrollbar for standard browsers */
}
.sales-ws-categories-bar::-webkit-scrollbar {
    display: none; /* Hide scrollbar for webkit */
}

.sales-ws-cat-pill {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sales-ws-cat-pill:hover {
    border-color: var(--border-color-hover);
    color: var(--text-main);
}

.sales-ws-cat-pill.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--color-primary-rgb), 0.2);
}

/* Product Cards Grid */
.sales-ws-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    padding-bottom: 20px;
}

/* Redesigned Product Catalog Card */
.sales-ws-prod-card {
    background: var(--bg-surface);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.01);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal);
    position: relative;
}

.sales-ws-prod-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--color-primary-rgb), 0.2);
}

.sales-ws-prod-img-box {
    width: 100%;
    height: 110px;
    position: relative;
    background: var(--bg-app);
}

.sales-ws-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sales-ws-prod-stock-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.sales-ws-prod-stock-badge.low {
    background: var(--color-danger);
}

.sales-ws-prod-card-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.sales-ws-prod-card-cat {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.sales-ws-prod-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
    margin-bottom: 8px;
    height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sales-ws-prod-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.sales-ws-prod-card-price {
    font-family: var(--font-title);
    font-weight: 800;
    color: var(--color-primary);
    font-size: 0.95rem;
}

.sales-ws-prod-card-add-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.sales-ws-prod-card-add-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Right Checkout & Active Cart Panel */
.sales-ws-cart-pane {
    background: var(--bg-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1.5px solid var(--border-color);
    overflow: hidden;
}

.sales-ws-layout > :last-child {
    border-right: none !important;
    padding-right: 0 !important;
}

.sales-ws-cart-header {
    padding: 16px;
    border-bottom: 1.5px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface-elevated);
}

.sales-ws-cart-title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Scrollable Cart items list */
.sales-ws-cart-items-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.sales-ws-cart-row {
    background: var(--bg-app);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
}

.sales-ws-cart-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sales-ws-cart-row-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sales-ws-cart-row-title {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-main);
    padding-right: 10px;
}

.sales-ws-cart-row-actions-grid {
    display: grid;
    grid-template-columns: 90px 1fr 28px;
    gap: 8px;
    align-items: center;
}

.sales-ws-cart-row-price-block {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.sales-ws-cart-row-inputs {
    display: flex;
    gap: 6px;
}

.sales-ws-cart-row-mini-input {
    width: 50px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 2px 4px;
    font-size: 0.75rem;
    text-align: center;
    background: #fff;
}

/* Checkout Summary Section */
.sales-ws-summary-box {
    border-top: 1.5px solid var(--border-color);
    background: var(--bg-surface-elevated);
    padding: 16px;
}

.sales-ws-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 8px;
    color: var(--text-muted);
}

.sales-ws-summary-row.bold {
    font-weight: 700;
    color: var(--text-main);
}

/* Payments Segment */
.sales-ws-payment-section {
    margin-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 12px;
}

.pos-print-ready-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(118px, 0.9fr);
    gap: 8px !important;
    padding: 6px;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
}

.pos-print-ready-actions .btn {
    min-height: 48px;
    border-radius: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    box-shadow: none !important;
}

.pos-print-ready-primary {
    width: 100% !important;
    color: #fff !important;
    border: 0 !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
}

.pos-print-ready-primary:hover {
    filter: brightness(0.98);
}

.pos-print-ready-secondary {
    color: #334155;
    border: 1px solid rgba(100, 116, 139, 0.24);
    background: #fff;
}

.pos-print-ready-secondary:hover {
    border-color: rgba(100, 116, 139, 0.42);
    background: #f8fafc;
}

.pos-print-ready-actions kbd {
    margin-left: 2px;
    padding: 2px 6px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.1;
    background: rgba(255,255,255,0.18);
}

.pos-print-ready-secondary kbd {
    color: #64748b;
    border-color: rgba(100, 116, 139, 0.22);
    background: #f1f5f9;
}

.sales-ws-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.sales-ws-pay-pill {
    border: 1.5px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: 10px;
    padding: 8px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sales-ws-pay-pill:hover {
    border-color: var(--border-color-hover);
}

.sales-ws-pay-pill.active {
    background: rgba(var(--color-primary-rgb), 0.05);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Change Due Calculator elements */
.sales-ws-cash-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.sales-ws-quick-cash-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 12px;
}
.sales-ws-quick-cash-row::-webkit-scrollbar {
    display: none;
}

.sales-ws-cash-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.sales-ws-cash-btn:hover {
    background: var(--bg-app);
}

/* Keyboard shortcut pills in top header */
.sales-ws-header-actions {
    display: flex;
    gap: 8px;
}

.btn-ws-header-action {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-ws-header-action:hover {
    color: var(--text-main);
    border-color: var(--border-color-hover);
    background: var(--bg-surface-elevated);
}

.btn-ws-header-action.hold { color: var(--color-accent); border-color: rgba(245,158,11,0.3); }
.btn-ws-header-action.recall { color: #8b5cf6; border-color: rgba(139,92,246,0.3); }

/* ==========================================================================
   TABLET & MOBILE SMART SCALES OVERRIDES
   ========================================================================== */
@media (max-width: 767px) {
    .sales-ws-header {
        grid-template-columns: 180px 1fr 140px;
    }
    .sales-ws-header-actions {
        display: none; /* Hide header shortcuts on tablet/mobile */
    }
    
    .sales-ws-layout {
        grid-template-columns: 1fr; /* Stack panels */
        overflow-y: auto;
    }
    
    .sales-ws-cart-pane {
        height: auto;
        box-shadow: none;
        border-top: 1.5px solid var(--border-color);
    }
}

@media (max-width: 768px) {
    .sales-ws-header {
        grid-template-columns: 1fr 50px;
        padding: 0 12px;
        height: 60px;
    }
    
    .sales-ws-brand-left {
        display: none; /* Hide software logo on mobile header */
    }
    
    .sales-ws-cust-card {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .sales-ws-cust-left {
        border-right: none;
        border-bottom: 1.5px dashed var(--border-color);
        padding-right: 0;
        padding-bottom: 12px;
    }
    
    /* Mobile cart panel opens as bottom drawer */
    .sales-ws-cart-pane.mobile-drawer {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100vw;
        height: 75vh;
        z-index: 1005;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
        transition: bottom var(--transition-normal);
        border-top: 1px solid var(--border-color);
    }
    
    .sales-ws-cart-pane.mobile-drawer.open {
        bottom: 0;
    }
    
    /* Mobile drawer backdrop */
    .sales-ws-drawer-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: 1004;
        display: none;
        backdrop-filter: blur(4px);
    }
    
    .sales-ws-drawer-backdrop.active {
        display: block;
    }
}

/* Viewport overrides to ensure fullscreen workspace fits 100% viewport height and width without padding or double scrollbars */
.app-layout.fullscreen-sales-mode .app-content-viewport {
    padding: 0 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   REDESIGNED POS CART & CHECKOUT PANEL CUSTOM STYLES
   ========================================================================== */

/* Top Action Bar above Cart */
.sales-ws-top-bar {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-surface-elevated);
    border-bottom: 1.5px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none; /* Hide scrollbar for clean aesthetic */
    align-items: center;
    flex-wrap: nowrap;
}
.sales-ws-top-bar::-webkit-scrollbar {
    display: none;
}

.btn-ws-top-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 78px;
    flex-shrink: 0;
    gap: 3px;
    line-height: 1.1;
}

.btn-ws-top-action i {
    width: 16px;
    height: 16px;
}

.btn-ws-top-action .shortcut-lbl {
    font-size: 0.55rem;
    font-weight: 700;
    opacity: 0.7;
    background: rgba(0,0,0,0.05);
    padding: 1px 4px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Color codes for Actions */
.btn-ws-top-action.complete {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}
.btn-ws-top-action.complete:hover {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25);
}

.btn-ws-top-action.draft {
    background: rgba(14, 165, 233, 0.08);
    border-color: rgba(14, 165, 233, 0.3);
    color: #0284c7;
}
.btn-ws-top-action.draft:hover {
    background: #0284c7;
    color: #fff;
    border-color: #0284c7;
    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
}

.btn-ws-top-action.print {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
    color: #7c3aed;
}
.btn-ws-top-action.print:hover {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
}

.btn-ws-top-action.preview {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #ea580c;
}
.btn-ws-top-action.preview:hover {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
}

.btn-ws-top-action.hold {
    background: rgba(236, 72, 153, 0.08);
    border-color: rgba(236, 72, 153, 0.3);
    color: #db2777;
}
.btn-ws-top-action.hold:hover {
    background: #db2777;
    color: #fff;
    border-color: #db2777;
    box-shadow: 0 4px 10px rgba(219, 39, 119, 0.25);
}

.btn-ws-top-action.recall {
    background: rgba(120, 113, 108, 0.08);
    border-color: rgba(120, 113, 108, 0.3);
    color: #57534e;
}
.btn-ws-top-action.recall:hover {
    background: #57534e;
    color: #fff;
    border-color: #57534e;
    box-shadow: 0 4px 10px rgba(87, 83, 78, 0.25);
}

.btn-ws-top-action.cancel {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}
.btn-ws-top-action.cancel:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
}

.btn-ws-top-action.recent {
    background: rgba(30, 41, 59, 0.08);
    border-color: rgba(30, 41, 59, 0.3);
    color: #0f172a;
}
.btn-ws-top-action.recent:hover {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

/* Keyboard Shortcuts Bottom Bar */
.sales-ws-shortcuts-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 6px 16px;
    background: #1e293b;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    overflow-x: auto;
    scrollbar-width: none;
}
.sales-ws-shortcuts-footer::-webkit-scrollbar {
    display: none;
}

.pos-shortcut-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #e2e8f0;
    white-space: nowrap;
}

.pos-shortcut-pill kbd {
    background: #334155;
    color: #38bdf8;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #475569;
    font-family: monospace;
    font-size: 0.6rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

/* Active Cart Modern Rows */
/* Active Cart Sleek & Compact Rows */
.sales-ws-cart-item-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.sales-ws-cart-item-row:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    box-shadow: var(--shadow-sm);
    transform: translateY(-0.5px);
}

.cart-item-thumb-box {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
}

.cart-item-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.cart-item-name {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-main);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-sku-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.cart-item-stock-tag {
    background: rgba(34,197,94,0.1);
    color: #16a34a;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 600;
}
.cart-item-stock-tag.low {
    background: rgba(239,68,68,0.1);
    color: var(--color-danger);
}

.cart-item-pricing-details {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) minmax(70px, 1fr) minmax(44px, 0.65fr);
    gap: 6px;
    margin-top: 2px;
}

.cart-item-pricing-col {
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    color: var(--text-muted);
}

.cart-item-pricing-col input {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 1px 3px;
    font-size: 0.65rem;
    width: 100%;
    font-weight: 600;
    background: var(--bg-app);
}

.cart-item-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    gap: 4px;
    margin-top: 4px;
}

.cart-item-metrics-grid span {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 3px 4px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-surface-elevated);
}

.cart-item-metrics-grid small {
    color: var(--text-muted);
    font-size: 0.54rem;
    font-weight: 800;
    line-height: 1;
}

.cart-item-metrics-grid strong {
    color: var(--text-main);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-cost-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 2px 6px 2px 3px;
    border: 1px dashed var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--bg-surface-elevated);
    font-size: 0.58rem;
    font-weight: 700;
}

.cart-item-cost-chip.visible {
    border-style: solid;
    color: var(--text-main);
    background: rgba(var(--color-primary-rgb), 0.06);
}

.pos-cart-cost-toggle {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.cart-item-actions-qty {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-width: 80px;
}

.cart-item-total-price {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-main);
}

.cart-item-qty-adjuster {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-surface);
}

.cart-item-qty-adjuster button {
    background: none;
    border: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.cart-item-qty-adjuster button:hover {
    background: var(--bg-app);
    color: var(--color-primary);
}

.cart-item-qty-val {
    width: 22px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-main);
}

.cart-item-row-buttons {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.btn-item-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 3px;
    border-radius: 4px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-item-action:hover {
    background: var(--bg-app);
}
.btn-item-action.notes:hover {
    color: var(--color-primary);
}
.btn-item-action.delete:hover {
    color: var(--color-danger);
    background: rgba(239,68,68,0.1);
}

/* Notes active indicator */
.btn-item-action.notes.has-notes {
    color: #eab308;
    background: rgba(234,179,8,0.1);
}

/* Cart Summary Card Grid */
.sales-ws-summary-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.summary-metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 2px;
}

.summary-metric-card .title {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.summary-metric-card .value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Color accents for summary cards */
.summary-metric-card.items { border-left: 3px solid #0066de; background: rgba(0, 102, 222, 0.02); }
.summary-metric-card.subtotal { border-left: 3px solid #7c3aed; background: rgba(124, 58, 237, 0.02); }
.summary-metric-card.tax { border-left: 3px solid #ec4899; background: rgba(236, 72, 153, 0.02); }
.summary-metric-card.discount { border-left: 3px solid #ea580c; background: rgba(234, 88, 12, 0.02); }
.summary-metric-card.freight { border-left: 3px solid #eab308; background: rgba(234, 179, 8, 0.02); }
.summary-metric-card.roundoff { border-left: 3px solid #64748b; background: rgba(100, 116, 139, 0.02); }

/* Glowing Net Payable Card */
.sales-ws-net-payable-large {
    background: linear-gradient(135deg, #15803d, #22c55e);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
    color: #fff;
    border: none;
}

.sales-ws-net-payable-large .lbl {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

.sales-ws-net-payable-large .val {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.55rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Redesigned Payment Methods Grid */
.sales-ws-pay-grid-redesign {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pos-compact-top-row {
    order: -4;
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.35fr);
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8edf4;
    background: linear-gradient(180deg, #fff, #fbfdff);
}

.pos-compact-top-row .pos-reference-customer,
.pos-compact-top-row .pos-reference-search-section {
    order: initial;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.pos-compact-top-row .pos-reference-customer {
    display: block;
    border-color: rgba(79, 70, 229, 0.28);
    background:
        radial-gradient(circle at 92% 8%, rgba(168, 85, 247, 0.16), transparent 34%),
        linear-gradient(135deg, #eef2ff 0%, #f5f3ff 48%, #faf5ff 100%);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.09);
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-left {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 7px;
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-left > label {
    grid-column: 1 / -1;
    margin-bottom: 1px;
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-left > div:last-child {
    display: flex;
    gap: 5px !important;
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-right {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 7px;
    padding: 7px 0 0;
    border: 0;
    border-top: 1px solid #edf1f6;
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-meta-item {
    min-width: 0;
    padding: 4px 6px;
    border-radius: 7px;
    border: 1px solid rgba(99, 102, 241, 0.12);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.05);
}

.pos-compact-top-row .pos-reference-customer .sales-ws-cust-meta-item:nth-child(n+4) {
    display: none;
}

.pos-compact-top-row .pos-reference-search-section > small {
    margin: 2px 0 7px 34px;
    color: #0f766e;
}

.pos-compact-top-row .pos-reference-search-section .sales-ws-search-control {
    height: 42px;
    border-color: rgba(13, 148, 136, 0.35);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.08);
}

.pos-compact-top-row .pos-reference-search-section {
    border-color: rgba(13, 148, 136, 0.3);
    background:
        radial-gradient(circle at 92% 10%, rgba(34, 211, 238, 0.2), transparent 35%),
        linear-gradient(135deg, #ecfeff 0%, #f0fdfa 52%, #ecfdf5 100%);
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.09);
}

.pos-compact-top-row .pos-reference-search-section .pos-reference-step {
    color: #0f766e;
}

.pos-reference-main .sales-ws-cart-item-row {
    border-color: rgba(37, 99, 235, 0.2);
    background:
        radial-gradient(circle at 96% 8%, rgba(96, 165, 250, 0.14), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
}

.pos-reference-main .sales-ws-cart-item-row:nth-child(4n + 2) {
    border-color: rgba(13, 148, 136, 0.22);
    background:
        radial-gradient(circle at 96% 8%, rgba(45, 212, 191, 0.15), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
}

.pos-reference-main .sales-ws-cart-item-row:nth-child(4n + 3) {
    border-color: rgba(147, 51, 234, 0.2);
    background:
        radial-gradient(circle at 96% 8%, rgba(192, 132, 252, 0.15), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
}

.pos-reference-main .sales-ws-cart-item-row:nth-child(4n + 4) {
    border-color: rgba(234, 88, 12, 0.2);
    background:
        radial-gradient(circle at 96% 8%, rgba(251, 146, 60, 0.15), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
}

.pos-reference-main .sales-ws-cart-item-row:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.13);
    transform: translateY(-1px);
}

.pos-reference-main .cart-item-thumb-box {
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.pos-reference-main .cart-item-pricing-col input {
    border-color: rgba(59, 130, 246, 0.2);
    background: rgba(255, 255, 255, 0.88);
}

.pos-reference-main .cart-item-qty-adjuster {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(255, 255, 255, 0.85);
}

.pos-reference-main .cart-item-total-price {
    padding: 3px 8px;
    border-radius: 7px;
    color: #1d4ed8;
    background: rgba(219, 234, 254, 0.82);
}

.pos-settings-modal {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pos-settings-section {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface);
}

.pos-settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.pos-settings-section-title > svg {
    width: 22px;
    color: var(--color-primary);
}

.pos-settings-section-title div {
    display: flex;
    flex-direction: column;
}

.pos-settings-section-title span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.pos-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pos-setting-switch {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    cursor: pointer;
}

.pos-setting-switch span {
    display: flex;
    flex-direction: column;
}

.pos-setting-switch small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.pos-settings-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pos-settings-check-grid label {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-app);
}

.pos-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.pos-history-modal {
    min-height: 420px;
}

.modal-window.modal-wide {
    width: min(1180px, calc(100vw - 32px));
    max-width: 1180px;
}

.pos-history-filters {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: end;
    margin-bottom: 12px;
}

.pos-history-filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.pos-history-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pos-history-summary div {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border: 1px solid #dce7f5;
    border-radius: 10px;
    background: #f8fbff;
}

.pos-history-summary span {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.pos-history-summary strong {
    margin-top: 3px;
    color: #1265dc;
    font-size: 0.95rem;
}

.pos-history-table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.pos-history-table td > small,
.pos-history-table td > strong {
    display: block;
}

.pos-history-table td > small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.67rem;
}

.pos-history-amount {
    color: var(--color-success);
    font-weight: 800;
    white-space: nowrap;
}

.pos-history-actions {
    display: flex;
    gap: 4px;
}

.pos-history-actions .btn {
    padding: 5px 7px;
}

.pos-history-actions svg {
    width: 13px;
    height: 13px;
}

.pos-history-empty {
    padding: 36px !important;
    text-align: center;
    color: var(--text-muted);
}

@media (max-width: 1050px) {
    .pos-compact-top-row {
        grid-template-columns: 1fr;
    }
    .pos-history-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

.payment-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--text-muted);
}

.payment-method-card i {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.payment-method-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.3);
    background: var(--bg-surface-elevated);
}

/* Glow on active payment cards */
.payment-method-card.active {
    background: rgba(var(--color-primary-rgb), 0.04);
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.15);
}

.payment-method-card.active i {
    color: var(--color-primary);
}

/* Glowing smart cash return calculator */
.sales-ws-cash-calc-large {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

.cash-calc-display-box {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cash-calc-display-box .lbl {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cash-calc-display-box .val-large {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--color-accent);
}

.sales-ws-quick-cash-row-redesign {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.sales-ws-quick-cash-row-redesign button {
    flex: 1;
    min-width: 50px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sales-ws-quick-cash-row-redesign button:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Print/Share Dropdown style */
.print-actions-wrapper {
    position: relative;
    width: 100%;
}

.print-actions-dropdown {
    position: absolute;
    bottom: 110%;
    right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 220px;
    z-index: 1010;
    display: none;
    padding: 6px 0;
    text-align: left;
}

.print-actions-dropdown.show {
    display: block;
}

.print-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 0.75rem;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-weight: 500;
}

.print-action-item:hover {
    background: var(--bg-app);
}

.print-action-item i {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

/* Dynamic Catalog Cards Styling */
.sales-ws-catalog-card {
    position: relative;
    overflow: hidden;
}

.catalog-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    color: #fff;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

.catalog-card-badge.popular {
    background: linear-gradient(135deg, #a855f7, #c084fc);
}

.catalog-card-badge.new {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.catalog-card-badge.discount {
    background: linear-gradient(135deg, #f97316, #fb923c);
    right: 6px;
    left: auto;
}

/* Center empty space tab panel styling */
.pos-center-tabs {
    display: flex;
    border-bottom: 1.5px solid var(--border-color);
    margin-bottom: 10px;
    gap: 12px;
}

.pos-center-tab-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 6px 4px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.pos-center-tab-btn.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pos-center-tab-content {
    display: none;
}
.pos-center-tab-content.active {
    display: block;
}

/* ==========================================================================
   RETAILER PRO POS — REFERENCE LAYOUT
   ========================================================================== */
.sales-ws-container {
    background: #f8fafc;
}

.sales-ws-header {
    height: 78px;
    grid-template-columns: minmax(360px, 1fr) auto;
    background: #fff;
    border-bottom: 1px solid #e7edf5;
    box-shadow: none;
}

.sales-ws-top-bar {
    min-height: 108px;
    padding: 14px 18px;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #e7edf5;
}

.btn-ws-top-action {
    width: 82px;
    min-width: 82px;
    height: 82px;
    border-radius: 9px;
    justify-content: center;
    box-shadow: none;
}

.btn-ws-top-action i {
    width: 22px;
    height: 22px;
}

.pos-reference-layout {
    grid-template-columns: minmax(620px, 1fr) 380px !important;
    gap: 12px;
    height: calc(100vh - 110px) !important;
    padding: 0 14px 12px;
    background: #f8fafc;
    overflow: hidden;
}

.pos-reference-main {
    min-width: 0;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 12px;
    background: #fff;
}

.pos-reference-customer {
    order: -4;
    display: grid;
    grid-template-columns: minmax(400px, 1fr) minmax(360px, auto);
    width: 100%;
    padding: 12px 14px;
    margin: 0 !important;
    border: 0;
    border-bottom: 1px solid #e8edf4;
    border-radius: 0;
    box-shadow: none;
}

.pos-reference-customer .sales-ws-cust-left {
    display: grid;
    grid-template-columns: auto minmax(250px, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 0;
}

.pos-reference-customer .sales-ws-cust-left > label {
    grid-column: 1 / -1;
}

.pos-reference-customer #salesWsCustomerSelectContainer {
    margin: 0 !important;
}

.pos-reference-customer .sales-ws-cust-right {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
    gap: 8px 14px !important;
    padding-left: 16px;
    border-left: 1px solid #e8edf4;
}

.pos-reference-search-section {
    order: -3;
    padding: 12px 14px;
    border-bottom: 1px solid #e8edf4;
    background: #fff;
}

.pos-reference-search-section > small {
    display: block;
    margin: 3px 0 9px 34px;
    color: #778399;
    font-size: 0.7rem;
}

.pos-reference-search-section .sales-ws-search-center {
    max-width: none;
    margin: 0;
}

.pos-reference-search-section .sales-ws-search-control {
    height: 44px;
    border-color: #bdd1ed;
    background: #fbfdff;
}

.pos-step-number,
.pos-reference-step span {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    border-radius: 50%;
    background: #1265dc;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.pos-reference-scan-panel {
    order: -3;
    min-height: 170px;
    margin: 12px 14px;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #778399;
    background: linear-gradient(180deg, #fff, #fcfdff);
}

.pos-reference-scan-panel.is-hidden {
    display: none;
}

.pos-reference-scan-panel > svg {
    width: 52px;
    height: 52px;
    margin: 8px 0;
    color: #d7dde7;
}

.pos-reference-scan-panel strong {
    color: #17254a;
    font-size: 0.9rem;
}

.pos-reference-scan-panel small {
    margin-top: 5px;
}

.pos-reference-step {
    color: #152347;
    font-size: 1rem;
    font-weight: 800;
}

.pos-reference-product-results {
    order: -2;
    display: none !important;
    min-height: 80px;
    max-height: 245px;
    margin: 0 14px 12px;
    padding: 10px !important;
    border: 1px solid #dfe6ef;
    border-radius: 10px;
    background: #fff;
}

.pos-reference-product-results.has-query {
    display: flex !important;
}

.pos-reference-product-results .sales-ws-catalog-grid {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
}

.pos-reference-product-results .sales-ws-catalog-card {
    min-height: 72px;
    display: grid;
    grid-template-columns: 64px 1fr;
    border-radius: 9px;
    cursor: pointer;
}

.pos-reference-product-results .sales-ws-prod-img-box {
    width: 64px;
    height: 70px;
}

.pos-reference-product-results .sales-ws-prod-card-body {
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 72px;
    gap: 12px;
    align-items: center;
}

.pos-reference-product-results .sales-ws-prod-card-title {
    height: auto;
    margin: 0 0 5px;
    font-size: 0.83rem;
}

.pos-search-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    color: #718096;
    font-size: 0.66rem;
}

.pos-search-product-meta .low-stock {
    color: #dc2626;
    font-weight: 700;
}

.pos-reference-product-results .sales-ws-prod-card-bottom {
    display: contents;
}

.pos-reference-product-results .sales-ws-prod-card-price {
    font-size: 0.92rem;
    text-align: right;
}

.pos-reference-product-results .sales-ws-prod-card-add-btn {
    width: 68px;
    height: 34px;
    gap: 4px;
    color: #fff;
    background: #1265dc;
}

.pos-reference-product-results .sales-ws-prod-card-add-btn span {
    font-size: 0.68rem;
    font-weight: 700;
}

.pos-reference-main .sales-ws-cart-header {
    order: -1;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid #e8edf4;
}

.pos-reference-main .sales-ws-cart-items-wrapper {
    padding: 0 14px 12px;
}

.pos-reference-main .sales-ws-cart-item-row {
    grid-template-columns: 58px minmax(0, 1fr) 130px;
    min-height: 92px;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 9px;
    border-color: #dfe6ef;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.pos-reference-main .cart-item-thumb-box {
    width: 58px;
    height: 58px;
    border-radius: 8px;
}

.pos-reference-main .cart-item-details {
    gap: 5px;
}

.pos-reference-main .cart-item-name {
    font-size: 0.88rem;
    font-weight: 750;
    color: #17254a;
}

.pos-reference-main .cart-item-sku-row {
    font-size: 0.68rem;
}

.pos-reference-main .cart-item-pricing-details {
    grid-template-columns: repeat(3, minmax(80px, 120px));
    gap: 10px;
}

.pos-reference-main .cart-item-pricing-col {
    font-size: 0.65rem;
    font-weight: 650;
}

.pos-reference-main .cart-item-pricing-col input {
    height: 28px;
    padding: 4px 7px;
    font-size: 0.72rem;
    background: #fff;
}

.pos-reference-main .cart-item-actions-qty {
    min-width: 130px;
}

.pos-reference-main .cart-item-total-price {
    font-size: 1rem;
    color: #1265dc;
}

.cart-item-line-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cart-item-line-total small {
    color: #8290a5;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.pos-reference-main .cart-item-qty-adjuster {
    border-radius: 8px;
}

.pos-reference-main .cart-item-qty-adjuster button {
    width: 30px;
    height: 28px;
    font-size: 0.9rem;
}

.pos-reference-main .cart-item-qty-val {
    width: 34px;
    font-size: 0.82rem;
}

.pos-reference-summary-panel {
    min-width: 0;
    overflow: hidden;
    padding: 14px;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.pos-reference-summary-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.pos-reference-summary-panel .sales-ws-summary-grid-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 12px;
}

.pos-reference-summary-panel .summary-metric-card {
    min-height: 40px;
    padding: 8px 2px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    border-radius: 0;
    background: transparent !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pos-reference-summary-panel .summary-metric-card .title {
    color: #52617a;
}

.pos-reference-summary-panel .summary-metric-card .value {
    font-size: 0.92rem;
    color: #111827;
}

.pos-reference-summary-panel .sales-ws-net-payable-large {
    border-radius: 8px;
    margin: 10px 0 12px;
}

.pos-reference-summary-panel .sales-ws-payment-section {
    margin: 0;
    padding: 0;
    border: 0;
}

.pos-reference-summary-panel .sales-ws-pay-grid-redesign {
    grid-template-columns: repeat(3, 1fr);
}

.pos-reference-summary-panel .payment-method-card {
    min-height: 66px;
}

.pos-reference-summary-panel #salesWsCompleteCheckOutBtn {
    min-height: 62px;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #1265dc, #0b57d0) !important;
    border: 0 !important;
    font-size: 1rem !important;
}

.pos-reference-checkout-action {
    flex: 0 0 auto;
    margin-top: 10px !important;
}

.pos-reference-rail {
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #e4eaf2;
    border-radius: 12px;
    background: #fff;
    display: flex !important;
    flex-direction: column;
}

.pos-rail-heading {
    padding: 12px 10px 9px;
    color: #8090a8;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #edf1f6;
}

.pos-rail-btn {
    min-height: 62px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #edf1f6;
    background: #fff;
    color: #34435d;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 650;
}

.pos-rail-btn:hover {
    color: #1265dc;
    background: #f5f9ff;
}

.pos-rail-btn svg {
    width: 20px;
    height: 20px;
}

.pos-rail-btn kbd {
    color: #8390a5;
    font: 0.64rem monospace;
}

.pos-rail-collapse {
    margin-top: auto;
}

.pos-calculator {
    width: min(360px, 100%);
    margin: 0 auto;
}

.pos-calculator-display {
    width: 100%;
    height: 72px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: 1px solid #d9e2ef;
    border-radius: 12px;
    background: #f7faff;
    color: #17254a;
    text-align: right;
    font-size: 1.8rem;
    font-weight: 800;
}

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

.pos-calculator-grid button {
    min-height: 54px;
    border: 1px solid #dce4ef;
    border-radius: 10px;
    background: #fff;
    color: #253552;
    font-size: 1rem;
    font-weight: 750;
    cursor: pointer;
}

.pos-calculator-grid button:hover {
    background: #f0f6ff;
    border-color: #9bbce9;
}

.pos-calculator-grid .calc-operator {
    color: #1265dc;
    background: #eff6ff;
}

.pos-calculator-grid .calc-function {
    color: #dc2626;
}

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

.pos-calculator-grid .calc-equals {
    color: #fff;
    background: #1265dc;
    border-color: #1265dc;
}

.sales-ws-shortcuts-footer {
    height: 32px;
    background: #fff;
    color: #68758a;
    border-top: 1px solid #e7edf5;
}

.sales-ws-shortcuts-footer {
    justify-content: space-between;
}

.pos-footer-left,
.pos-footer-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pos-footer-right button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 0;
    border-left: 1px solid #dfe6ef;
    background: transparent;
    color: #34435d;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.pos-footer-right button:hover {
    color: #1265dc;
}

.pos-footer-right svg {
    width: 15px;
    height: 15px;
}

.pos-footer-right kbd {
    color: #1265dc;
    font-size: 0.62rem;
}

.pos-header-actions {
    display: flex;
    gap: 7px;
    margin-left: 8px;
}

.pos-header-action {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    color: #44536d;
    font-size: 0.68rem;
    font-weight: 750;
    cursor: pointer;
}

.pos-header-action:hover {
    color: #1265dc;
    border-color: #9dbce6;
    background: #f5f9ff;
}

.pos-header-action svg {
    width: 15px;
    height: 15px;
}

.pos-header-action kbd,
.pos-header-action b {
    color: #8090a8;
    font-size: 0.58rem;
}

.sales-ws-brand-right > div:first-child {
    min-width: 185px;
    height: 44px !important;
    padding: 5px 10px !important;
    border: 1px solid #bad0ed !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #fafdff, #eef6ff) !important;
    box-shadow: 0 3px 10px rgba(18, 101, 220, 0.08);
}

.sales-ws-brand-right > div:first-child select {
    flex: 1;
    color: #17254a !important;
    font-size: 0.78rem !important;
}

.pos-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-surface-elevated);
}

.pos-settings-grid > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

.sales-ws-shortcuts-footer .pos-shortcut-pill {
    color: #68758a;
}

.sales-ws-shortcuts-footer .pos-shortcut-pill kbd {
    color: #1265dc;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* POS responsive visual balance across small and large monitors */
.sales-ws-container {
    --pos-font-xs: clamp(0.62rem, 0.54rem + 0.12vw, 0.72rem);
    --pos-font-sm: clamp(0.7rem, 0.62rem + 0.14vw, 0.82rem);
    --pos-font-md: clamp(0.8rem, 0.7rem + 0.18vw, 0.95rem);
    --pos-font-lg: clamp(1rem, 0.82rem + 0.3vw, 1.25rem);
    font-size: var(--pos-font-sm);
}

.pos-software-logo {
    display: block;
    width: auto;
    height: clamp(25px, 2.15vw, 36px);
    max-width: clamp(118px, 11vw, 178px);
    object-fit: contain;
}

.sales-ws-comp-logo {
    width: clamp(28px, 2.35vw, 38px) !important;
    height: clamp(28px, 2.35vw, 38px) !important;
}

.sales-ws-header {
    min-height: 58px;
    height: clamp(60px, 6.4vh, 78px);
    padding-inline: clamp(10px, 1.4vw, 20px);
    gap: clamp(7px, 1vw, 16px);
}

.sales-ws-header span,
.sales-ws-header strong,
.sales-ws-header select,
.sales-ws-header button {
    font-size: var(--pos-font-sm) !important;
}

#salesWsLiveTime {
    font-size: var(--pos-font-md) !important;
}

#salesWsLiveDate,
.sales-ws-company-info span:last-child {
    font-size: var(--pos-font-xs) !important;
}

.pos-reference-step,
.sales-ws-cart-title {
    font-size: var(--pos-font-lg);
}

.pos-reference-step span,
.pos-step-number {
    width: clamp(21px, 1.8vw, 27px);
    height: clamp(21px, 1.8vw, 27px);
    font-size: var(--pos-font-xs);
}

.pos-compact-top-row {
    padding: clamp(7px, 0.8vw, 12px);
    gap: clamp(7px, 0.8vw, 12px);
}

.pos-compact-top-row .pos-reference-customer,
.pos-compact-top-row .pos-reference-search-section {
    padding: clamp(7px, 0.8vw, 12px);
}

.pos-compact-top-row .sales-ws-cust-meta-label,
.pos-compact-top-row .sales-ws-cust-meta-val,
.pos-compact-top-row button,
.pos-reference-main .cart-item-sku-row,
.pos-reference-main .cart-item-pricing-col {
    font-size: var(--pos-font-xs) !important;
}

.pos-reference-main .cart-item-name,
.pos-reference-main .cart-item-qty-val,
.pos-reference-main .cart-item-pricing-col input {
    font-size: var(--pos-font-sm) !important;
}

.pos-reference-main .cart-item-total-price {
    font-size: var(--pos-font-md) !important;
}

.pos-reference-main .sales-ws-cart-item-row {
    min-height: clamp(76px, 9vh, 96px);
}

.pos-reference-summary-panel .summary-metric-card .title,
.pos-reference-summary-panel .payment-method-card,
.cash-calc-display-box .lbl,
.sales-ws-shortcuts-footer {
    font-size: var(--pos-font-xs);
}

.pos-reference-summary-panel .summary-metric-card .value,
.cash-calc-display-box input,
.cash-calc-display-box .val-large {
    font-size: var(--pos-font-md) !important;
}

.sales-ws-net-payable-large .lbl {
    font-size: var(--pos-font-sm);
}

.sales-ws-net-payable-large .val {
    font-size: clamp(1.22rem, 1rem + 0.55vw, 1.75rem);
}

@media (max-height: 760px) {
    .sales-ws-header {
        height: 60px;
    }
    .pos-reference-layout {
        height: calc(100vh - 92px) !important;
        gap: 8px;
        padding: 0 8px 7px;
    }
    .pos-compact-top-row {
        padding-block: 6px;
    }
    .pos-compact-top-row .pos-reference-customer,
    .pos-compact-top-row .pos-reference-search-section {
        padding-block: 6px;
    }
    .pos-reference-summary-panel {
        padding: 9px;
    }
    .pos-reference-summary-panel .summary-metric-card {
        min-height: 34px;
        padding-block: 5px;
    }
    .sales-ws-net-payable-large {
        padding-block: 8px;
    }
}

@media (min-width: 1600px) and (min-height: 900px) {
    .pos-reference-layout {
        grid-template-columns: minmax(760px, 1fr) 430px !important;
        gap: 16px;
        padding-inline: 18px;
    }
    .pos-compact-top-row {
        grid-template-columns: minmax(430px, 0.95fr) minmax(560px, 1.4fr);
    }
    .pos-reference-main .sales-ws-cart-item-row {
        grid-template-columns: 68px minmax(0, 1fr) 150px;
        padding: 12px 14px;
    }
    .pos-reference-main .cart-item-thumb-box {
        width: 64px;
        height: 64px;
    }
}

@media (max-width: 1180px) {
    .pos-reference-layout {
        grid-template-columns: minmax(500px, 1fr) 340px !important;
    }
    .pos-reference-rail {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .pos-reference-layout {
        display: block;
        overflow-y: auto;
    }
    .pos-reference-main,
    .pos-reference-summary-panel {
        min-height: 620px;
        margin-bottom: 12px;
    }
    .pos-reference-summary-panel {
        min-height: auto;
    }
    .pos-reference-customer {
        grid-template-columns: 1fr;
    }
}

/* Customer card tags */
.cust-type-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}
.cust-type-badge.retail { background: rgba(59,130,246,0.15); color: #2563eb; }
.cust-type-badge.wholesale { background: rgba(139,92,246,0.15); color: #7c3aed; }
.cust-type-badge.walk-in { background: rgba(100,116,139,0.15); color: #475569; }
.cust-type-badge.vip { background: rgba(236,72,153,0.15); color: #db2777; border: 1px solid rgba(236,72,153,0.3); }

/* F9 Recent Sales list and Draft recovery layout */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.modal-table th {
    background: var(--bg-app);
    font-weight: 600;
    padding: 10px;
    border-bottom: 1.5px solid var(--border-color);
}

.modal-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.modal-table tr:hover td {
    background: var(--bg-surface-elevated);
}

/* Sales return / exchange workflow */
.return-exchange-modal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 520px;
}

.return-exchange-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--color-primary-rgb), 0.16);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(16, 185, 129, 0.06));
}

.return-exchange-hero h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 3px;
    font-size: 1.05rem;
    font-family: var(--font-title);
}

.return-exchange-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.return-exchange-steps {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.return-exchange-steps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(var(--color-primary-rgb), 0.14);
    color: var(--text-main);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.return-exchange-steps b {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.68rem;
}

.return-exchange-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 10px;
    min-height: 420px;
}

.return-exchange-search,
.return-exchange-workspace {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-surface);
    padding: 10px;
    min-width: 0;
}

.return-invoice-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    max-height: 374px;
    overflow-y: auto;
}

.return-invoice-option {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface-elevated);
    padding: 8px;
    display: grid;
    grid-template-columns: 1.05fr 1fr auto;
    gap: 7px;
    text-align: left;
    cursor: pointer;
}

.return-invoice-option.active {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.07);
}

.return-invoice-option span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.return-invoice-option small,
.return-selected-header p,
.return-item-row small {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.return-selected-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--text-muted);
}

.return-selected-empty svg {
    width: 36px;
    height: 36px;
    color: var(--color-primary);
}

.return-selected-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(360px, 0.9fr);
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.return-selected-header h3 {
    margin: 6px 0 2px;
    font-family: var(--font-title);
}

.return-invoice-money-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.return-invoice-money-grid > div,
.return-money-card {
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface-elevated);
    min-width: 0;
}

.return-invoice-money-grid small,
.return-action-panel small {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.return-invoice-money-grid strong,
.return-action-panel strong {
    color: var(--color-primary);
    font-size: 0.98rem;
    line-height: 1.2;
}

.return-money-card.primary {
    border-color: rgba(var(--color-primary-rgb), 0.28);
    background: rgba(var(--color-primary-rgb), 0.07);
}

.return-money-card.refund strong {
    color: var(--color-success);
}

.return-items-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    max-height: 238px;
    overflow-y: auto;
}

.return-item-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 70px minmax(150px, 180px);
    gap: 8px;
    align-items: center;
    padding: 7px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface-elevated);
}

.return-item-row img {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

.return-item-row strong {
    display: block;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.return-action-panel {
    display: grid;
    grid-template-columns: 0.7fr 1fr 1fr 1.25fr;
    gap: 8px;
    align-items: end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.return-mode-field {
    grid-column: 1 / 3;
}

.return-process-btn {
    grid-column: 3 / 5;
    align-self: stretch;
    min-height: 42px;
}

.return-action-panel label span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .return-exchange-hero,
    .return-exchange-steps {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .return-exchange-hero {
        display: grid;
    }

    .return-exchange-grid,
    .return-selected-header,
    .return-action-panel {
        grid-template-columns: 1fr;
    }

    .return-mode-field {
        grid-column: auto;
    }

    .return-process-btn {
        grid-column: auto;
    }
}

/* Adjust three column workspace layout */
@media (min-width: 1200px) {
    .sales-ws-layout {
        grid-template-columns: 1fr 340px 420px; /* 3 Columns on desktop */
    }
    
    .sales-ws-main-pane {
        border-right: 1px solid var(--border-color);
        padding-right: 12px;
    }
}

/* Dense POS cart rows: keep full item detail visible without wasting vertical space */
.sales-ws-cart-item-row,
.pos-reference-main .sales-ws-cart-item-row {
    grid-template-columns: 42px minmax(0, 1fr) 92px !important;
    min-height: 0 !important;
    gap: 7px !important;
    padding: 5px 7px !important;
    margin-bottom: 5px !important;
    border-radius: 7px !important;
}

.cart-item-thumb-box,
.pos-reference-main .cart-item-thumb-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 6px !important;
}

.cart-item-details,
.pos-reference-main .cart-item-details {
    display: grid !important;
    grid-template-columns: minmax(130px, 190px) minmax(190px, 260px) minmax(210px, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 8px !important;
    row-gap: 2px !important;
    align-items: center;
    min-width: 0;
}

.cart-item-name,
.pos-reference-main .cart-item-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
}

.cart-item-sku-row,
.pos-reference-main .cart-item-sku-row {
    grid-column: 1;
    grid-row: 2;
    gap: 4px !important;
    min-width: 0;
    overflow: hidden;
}

.cart-item-stock-tag {
    padding: 1px 4px !important;
    line-height: 1.15;
    white-space: nowrap;
}

.cart-item-pricing-details,
.pos-reference-main .cart-item-pricing-details {
    grid-column: 2;
    grid-row: 1 / 3;
    grid-template-columns: minmax(70px, 1fr) minmax(62px, 0.8fr) 36px !important;
    gap: 5px !important;
    margin-top: 0 !important;
    align-items: end;
}

.cart-item-pricing-col,
.pos-reference-main .cart-item-pricing-col {
    font-size: 0.54rem !important;
    line-height: 1.05;
    font-weight: 800;
}

.cart-item-pricing-col input,
.pos-reference-main .cart-item-pricing-col input {
    height: 24px !important;
    padding: 2px 6px !important;
    font-size: 0.68rem !important;
    border-radius: 5px !important;
}

.cart-item-pricing-col strong {
    height: 24px;
    display: flex;
    align-items: center;
    color: var(--text-main);
    font-size: 0.68rem;
}

.cart-item-metrics-grid {
    grid-column: 3;
    grid-row: 1 / 3;
    grid-template-columns: repeat(4, minmax(54px, 1fr)) !important;
    gap: 3px !important;
    margin-top: 0 !important;
    align-items: stretch;
}

.cart-item-metrics-grid span {
    padding: 2px 4px !important;
    border-radius: 5px !important;
}

.cart-item-metrics-grid small {
    font-size: 0.49rem !important;
}

.cart-item-metrics-grid strong {
    font-size: 0.58rem !important;
}

.cart-item-cost-chip {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
    margin-top: 0 !important;
    padding: 2px 6px 2px 2px !important;
    font-size: 0.54rem !important;
    white-space: nowrap;
}

.pos-cart-cost-toggle {
    width: 18px !important;
    height: 18px !important;
}

.cart-item-actions-qty,
.pos-reference-main .cart-item-actions-qty {
    min-width: 92px !important;
    justify-content: center !important;
    gap: 5px;
}

.cart-item-line-total small {
    font-size: 0.48rem !important;
}

.cart-item-total-price,
.pos-reference-main .cart-item-total-price {
    font-size: 0.82rem !important;
}

.cart-item-qty-adjuster {
    border-radius: 8px !important;
}

.cart-item-qty-adjuster button {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
}

.cart-item-qty-val {
    min-width: 26px;
    font-size: 0.72rem !important;
}

.btn-item-action {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .cart-item-details,
    .pos-reference-main .cart-item-details {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .cart-item-name,
    .cart-item-sku-row,
    .cart-item-pricing-details,
    .cart-item-metrics-grid,
    .cart-item-cost-chip {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}
/* Legacy Purchase command-center layout. Kept for history, intentionally disabled. */
@media not all {
/* Reference-aligned Purchase Invoice workspace (2026 refresh) */
.modal-window.modal-purchase-create .purchase-command-workspace {
    --purchase-green: #079447;
    --purchase-green-dark: #06743a;
    --purchase-line: #dde5ee;
    --purchase-ink: #101828;
    background: #f8fafc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.modal-window.modal-purchase-create .purchase-command-header {
    grid-template-columns: minmax(250px, 1fr) minmax(260px, 1.25fr) minmax(460px, 2fr);
    min-height: 72px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--purchase-line);
    box-shadow: none;
}

.modal-window.modal-purchase-create .purchase-logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #16a763, #06743a);
    box-shadow: none;
}

.modal-window.modal-purchase-create .purchase-brand-cluster span {
    color: var(--purchase-green);
    font-size: .82rem;
    letter-spacing: .02em;
}

.modal-window.modal-purchase-create .purchase-title-cluster { justify-content: flex-start; }
.modal-window.modal-purchase-create .purchase-title-cluster small,
.modal-window.modal-purchase-create .purchase-sync-pill,
.modal-window.modal-purchase-create .purchase-status-badge,
.modal-window.modal-purchase-create .purchase-hero-strip { display: none; }
.modal-window.modal-purchase-create .purchase-title-cluster h2 { font-size: 1.42rem; }

.modal-window.modal-purchase-create .purchase-header-actions .purchase-icon-btn:not(#pCreateSettingsBtn),
.modal-window.modal-purchase-create .purchase-header-actions .purchase-branch-pill:first-child { display: none; }
.modal-window.modal-purchase-create .purchase-branch-pill {
    min-height: 38px;
    padding: 7px 13px;
    border-radius: 7px;
    color: #344054;
    background: #fff;
    border-color: var(--purchase-line);
}
.modal-window.modal-purchase-create #pTopSaveBtn {
    min-width: 110px;
    min-height: 42px;
    border-radius: 7px;
    background: linear-gradient(180deg, #12a653, #07833f);
    border-color: #07833f;
    box-shadow: 0 5px 12px rgba(7, 148, 71, .2);
}

.modal-window.modal-purchase-create .purchase-command-layout {
    display: grid;
    grid-template-columns: minmax(720px, 1fr) 320px;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 10px;
    padding: 10px 18px 84px;
    overflow: auto;
}
.modal-window.modal-purchase-create .purchase-left-rail,
.modal-window.modal-purchase-create .purchase-center-workspace { display: contents; }
.modal-window.modal-purchase-create .purchase-left-rail > *,
.modal-window.modal-purchase-create .purchase-center-workspace > * { grid-column: 1; }
.modal-window.modal-purchase-create .purchase-summary-rail {
    grid-column: 2;
    grid-row: 1 / span 7;
    display: flex;
    overflow: visible;
    padding: 0;
}

.modal-window.modal-purchase-create .purchase-command-card,
.modal-window.modal-purchase-create .purchase-item-command,
.modal-window.modal-purchase-create .purchase-spreadsheet-card,
.modal-window.modal-purchase-create .purchase-summary-panel {
    border-radius: 8px;
    border-color: var(--purchase-line);
    box-shadow: 0 2px 6px rgba(16, 24, 40, .025);
}
.modal-window.modal-purchase-create .purchase-command-card,
.modal-window.modal-purchase-create .purchase-item-command,
.modal-window.modal-purchase-create .purchase-summary-panel { padding: 12px 14px; }
.modal-window.modal-purchase-create .purchase-card-header { margin-bottom: 10px; }
.modal-window.modal-purchase-create .purchase-card-header > div { font-size: .92rem; }

/* Put invoice metadata first, like the supplied design. */
.modal-window.modal-purchase-create .purchase-left-rail > .purchase-command-card:nth-child(2) { grid-row: 1; }
.modal-window.modal-purchase-create .purchase-left-rail > .supplier-card { grid-row: 2; }
.modal-window.modal-purchase-create .purchase-center-workspace > .purchase-item-command { grid-row: 3; }
.modal-window.modal-purchase-create .purchase-center-workspace > .purchase-spreadsheet-card { grid-row: 4; }
.modal-window.modal-purchase-create .purchase-center-workspace > .purchase-bottom-grid { grid-row: 5; }

.modal-window.modal-purchase-create .purchase-info-grid {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 10px;
}
.modal-window.modal-purchase-create .purchase-info-grid > div:nth-child(n+7) { display: none; }

.modal-window.modal-purchase-create .supplier-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.15fr) minmax(190px, .8fr) minmax(360px, 1.4fr);
    gap: 10px 14px;
    align-items: end;
}
.modal-window.modal-purchase-create .supplier-card .purchase-card-header { grid-column: 1 / -1; }
.modal-window.modal-purchase-create .supplier-card #quickSupplierFormRow { grid-column: 1 / -1; }
.modal-window.modal-purchase-create .supplier-card .purchase-supplier-metrics {
    grid-column: 3;
    grid-row: 2 / span 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}
.modal-window.modal-purchase-create .supplier-card .purchase-field-block:has(#pSupplierGstin),
.modal-window.modal-purchase-create .supplier-card .purchase-field-block:has(#pPaymentTerms),
.modal-window.modal-purchase-create .supplier-card .purchase-field-block:has(#pDueDate) { display: none; }

.modal-window.modal-purchase-create .purchase-add-row {
    grid-template-columns: minmax(320px, 1fr) 100px 125px 115px;
}
.modal-window.modal-purchase-create .purchase-spreadsheet-card { min-height: 260px; }
.modal-window.modal-purchase-create .purchase-spreadsheet-head,
.modal-window.modal-purchase-create .purchase-spreadsheet-row {
    grid-template-columns: 82px 50px minmax(190px, 1.5fr) 72px 60px 60px 90px 65px 90px 65px 70px 105px 36px;
    min-width: 1040px;
}
.modal-window.modal-purchase-create .purchase-spreadsheet-head { background: #f8fafc; }
.modal-window.modal-purchase-create .purchase-empty-workspace { min-height: 205px; }
.modal-window.modal-purchase-create .purchase-bottom-grid { display: none; }

.modal-window.modal-purchase-create .purchase-summary-rail > .quick-actions-card { display: none; }
.modal-window.modal-purchase-create .purchase-summary-panel {
    width: 100%;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
.modal-window.modal-purchase-create .purchase-summary-metrics {
    grid-template-columns: 1fr;
    gap: 0;
}
.modal-window.modal-purchase-create .purchase-summary-metrics div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    border-radius: 0;
}
.modal-window.modal-purchase-create .purchase-summary-metrics span { text-transform: none; font-size: .76rem; }
.modal-window.modal-purchase-create .purchase-charge-grid { grid-template-columns: 1fr 1fr; }
.modal-window.modal-purchase-create .purchase-net-total {
    padding: 14px;
    border-radius: 7px;
    background: #f0fbf4;
    color: var(--purchase-green-dark);
    box-shadow: none;
    border: 1px solid #ccebd8;
}
.modal-window.modal-purchase-create .purchase-net-total span,
.modal-window.modal-purchase-create .purchase-net-total small { color: #587063; }
.modal-window.modal-purchase-create .purchase-net-total strong { font-size: 1.65rem; }
.modal-window.modal-purchase-create .purchase-payment-strip { grid-template-columns: repeat(2, 1fr); }
.modal-window.modal-purchase-create .purchase-payment-strip button { border-radius: 7px; justify-content: center; }
.modal-window.modal-purchase-create .purchase-summary-actions { grid-template-columns: 1fr; }
.modal-window.modal-purchase-create .purchase-summary-actions .btn { border-radius: 7px; min-height: 42px; }

.modal-window.modal-purchase-create .purchase-command-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 64px;
    justify-content: flex-end;
    padding: 10px 24px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--purchase-line);
    box-shadow: 0 -5px 18px rgba(16, 24, 40, .06);
    z-index: 20;
}
.modal-window.modal-purchase-create .purchase-command-footer span { display: none; }

@media (max-width: 1100px) {
    .modal-window.modal-purchase-create .purchase-command-header { grid-template-columns: 1fr auto; }
    .modal-window.modal-purchase-create .purchase-title-cluster { display: none; }
    .modal-window.modal-purchase-create .purchase-command-layout { grid-template-columns: 1fr; }
    .modal-window.modal-purchase-create .purchase-summary-rail { grid-column: 1; grid-row: auto; }
    .modal-window.modal-purchase-create .purchase-info-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-window.modal-purchase-create .supplier-card { grid-template-columns: 1fr 1fr; }
    .modal-window.modal-purchase-create .supplier-card .purchase-supplier-metrics { grid-column: 1 / -1; grid-row: auto; }
}

/* ==========================================================================
   LOGO LOADING ANIMATION STYLES
   ========================================================================== */
@keyframes logo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    50% {
        transform: scale(1.08);
        opacity: 0.6;
        box-shadow: 0 0 0 12px rgba(37, 99, 235, 0);
    }
}
@keyframes loading-dots {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ==========================================================================
   PREMIUM BRANDED SPLASH SCREEN STYLES
   ========================================================================== */
.app-splash-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background:
        radial-gradient(circle at 18% 20%, rgba(59,130,246,.16), transparent 34%),
        radial-gradient(circle at 82% 75%, rgba(124,58,237,.13), transparent 36%),
        linear-gradient(145deg, #f8fbff 0%, #ffffff 48%, #f6f2ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.app-splash-screen.active {
    opacity: 1;
    visibility: visible;
}

.app-splash-screen .splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: splash-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    min-width: min(390px, calc(100vw - 32px));
    padding: 42px 38px 34px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 30px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 30px 80px rgba(37,99,235,.13), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
}

.app-splash-screen .splash-logo-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
}

.app-splash-screen .splash-logo-glow {
    position: absolute;
    inset: -10px;
    border-radius: 24px;
    border: 0;
    opacity: .48;
    background: conic-gradient(from 0deg,#2563eb,#7c3aed,#ec4899,#f59e0b,#10b981,#06b6d4,#2563eb);
    filter: blur(13px);
    animation: logo-color-pulse 2.3s infinite ease-in-out;
}

.app-splash-screen #splashLogo {
    width: 100px;
    height: 100px;
    border-radius: 22px;
    object-fit: contain;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.15);
    position: relative;
    z-index: 2;
    background: #fff;
    animation: splash-logo-float 2.6s ease-in-out infinite;
}

.app-splash-screen .splash-orbit {
    position: absolute;
    inset: -18px;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 50%;
    animation: splash-orbit-spin 5s linear infinite;
    display: block;
}
.app-splash-screen .splash-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:#2563eb;box-shadow:0 0 12px rgba(37,99,235,.65)}
.app-splash-screen .splash-orbit span:nth-child(1){left:50%;top:-4px}.app-splash-screen .splash-orbit span:nth-child(2){right:4px;bottom:22px;background:#7c3aed}.app-splash-screen .splash-orbit span:nth-child(3){left:4px;bottom:22px;background:#10b981}

.app-splash-screen .splash-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.app-splash-screen .splash-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    margin: 0 0 32px 0;
}

.app-splash-screen .splash-progress-container {
    width: 220px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

.app-splash-screen .splash-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981 0%, #2563eb 50%, #7c3aed 100%);
    border-radius: 10px;
    transition: width 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes splash-orbit-spin { to { transform:rotate(360deg); } }
@keyframes splash-logo-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.035)}}
@keyframes logo-color-pulse{0%,100%{opacity:.32;transform:scale(.94)}50%{opacity:.62;transform:scale(1.08)}}

.app-splash-screen .splash-loading-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin: 0;
    min-height: 20px;
}
.app-splash-screen.is-error .splash-logo-glow{background:conic-gradient(#ef4444,#f97316,#ef4444);animation:none;opacity:.42}.app-splash-screen.is-error .splash-progress-bar{background:linear-gradient(90deg,#f97316,#ef4444)}.app-splash-screen.is-error .splash-loading-text{max-width:360px;color:#b91c1c;line-height:1.45}.splash-error-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}.splash-error-actions button,.splash-error-actions a{min-height:36px;padding:8px 14px;border-radius:9px;font:600 .75rem 'Plus Jakarta Sans',sans-serif;text-decoration:none;cursor:pointer}.splash-error-actions button{border:0;background:#2563eb;color:#fff}.splash-error-actions a{border:1px solid #cbd5e1;background:#fff;color:#475569}

/* Splash Animations */
@keyframes splash-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logo-soft-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.15;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.45;
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN SYSTEM OVERRIDES (1366px Laptops & Small Screens)
   ========================================================================== */
@media (max-width: 1366px) {
    html {
        font-size: 12.5px !important;
    }
    body {
        font-size: 12.5px !important;
    }
    .app-sidebar {
        width: 220px !important;
        min-width: 220px !important;
    }
    .app-main-content {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
    }
    .app-content-viewport {
        padding: 14px !important;
    }
    .card {
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }
    h1, .h1 { font-size: 1.35rem !important; }
    h2, .h2 { font-size: 1.15rem !important; }
    h3, .h3 { font-size: 1.0rem !important; }
    h4, .h4 { font-size: 0.85rem !important; }

    /* Compact inputs, select & buttons */
    .form-control, select.form-control, input.form-control, .btn {
        height: 34px !important;
        padding: 4px 10px !important;
        font-size: 0.82rem !important;
        border-radius: 6px !important;
    }
    .btn-sm {
        height: 28px !important;
        padding: 3px 8px !important;
        font-size: 0.75rem !important;
        border-radius: 5px !important;
    }
    .form-group {
        margin-bottom: 10px !important;
    }
    .form-group label {
        margin-bottom: 4px !important;
        font-size: 0.78rem !important;
    }

    /* Compact tables for list/report views */
    .table th, .table td {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
    }

    /* Responsive modal windows to prevent bottom button cutoff */
    .modal-window {
        max-height: 94vh !important;
        width: min(650px, calc(100vw - 20px)) !important;
    }
    .modal-body {
        padding: 12px 14px !important;
    }
    
    /* Auto stack grid-based inline-styled sections in modals */
    .modal-window div[style*="display: grid"],
    .modal-window div[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        max-height: calc(94vh - 100px) !important;
        overflow-y: auto !important;
    }

    .sales-command-workspace,
    .purchase-command-workspace,
    .expense-voucher-workspace,
    .sales-swipe-create {
        padding-bottom: 50px !important;
        height: 100vh !important;
    }
    .sales-command-header, 
    .purchase-command-header,
    .expense-voucher-workspace header {
        height: 52px !important;
        padding: 0 12px !important;
    }
    .sales-command-footer,
    .purchase-command-footer,
    .expense-command-footer {
        height: 50px !important;
        padding: 0 12px !important;
    }
    .sales-body-layout,
    .purchase-body-layout {
        height: calc(100% - 52px) !important;
    }
    .sales-summary-rail,
    .purchase-summary-rail {
        width: 270px !important;
        min-width: 270px !important;
        max-width: 270px !important;
        padding: 10px !important;
    }
}

/* ========================================================================== 
   AUTO-ADJUSTING & FLUID PRODUCT/ITEM TABLES (NO HORIZONTAL SCROLL)
   ========================================================================== */
.sales-command-workspace table, 
.purchase-command-workspace table, 
#returnItemsTable {
    min-width: 100% !important;
    width: 100% !important;
    table-layout: auto !important;
}

.sales-command-workspace th, .sales-command-workspace td,
.purchase-command-workspace th, .purchase-command-workspace td,
#returnItemsTable th, #returnItemsTable td {
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    vertical-align: middle !important;
}

/* Auto-size input fields inside tables so they shrink to fit cells */
.sales-command-workspace table input, 
.purchase-command-workspace table input,
#returnItemsTable input {
    width: 100% !important;
    min-width: 40px !important;
    max-width: 75px !important;
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

.sales-command-workspace table select, 
.purchase-command-workspace table select,
#returnItemsTable select {
    width: 100% !important;
    min-width: 60px !important;
    max-width: 100px !important;
    padding: 2px 4px !important;
    font-size: 0.72rem !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

/* Remove horizontal scrollbar wrappers on items table parent */
.sales-table-wrap,
.purchase-table-wrap,
.invoice-table-wrapper {
    overflow-x: hidden !important;
}

.modal-window.modal-purchase-create .purchase-products-row-card .purchase-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
}

.modal-window.modal-purchase-create .purchase-products-row-card .purchase-items-table {
    min-width: 1360px;
    table-layout: fixed;
}

.modal-window.modal-purchase-create .purchase-items-table th,
.modal-window.modal-purchase-create .purchase-items-table td {
    box-sizing: border-box;
    vertical-align: middle;
    overflow: hidden;
}

.modal-window.modal-purchase-create .purchase-items-table th {
    white-space: normal;
    line-height: 1.15;
}

.modal-window.modal-purchase-create .purchase-items-table td small,
.modal-window.modal-purchase-create .purchase-items-table td strong,
.modal-window.modal-purchase-create .purchase-items-table td span {
    min-width: 0;
}

.modal-window.modal-purchase-create .purchase-items-table .form-control-minimal {
    max-width: 100%;
    box-sizing: border-box;
}

.modal-window.modal-purchase-create .purchase-items-table .purchase-col-index { width: 40px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-item { width: 320px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-hsn { width: 86px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-batch { width: 95px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-expiry { width: 132px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-qty { width: 72px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-rate,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-rate-incl { width: 112px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-discount,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-tax { width: 82px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-expense { width: 126px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-final { width: 118px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-mrp,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-sale { width: 98px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-amount { width: 128px; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-action { width: 78px; }

.modal-window.modal-purchase-create .purchase-items-table .row-expense-share,
.modal-window.modal-purchase-create .purchase-items-table .row-final-cost {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    white-space: normal;
    line-height: 1.1;
}

.modal-window.modal-purchase-create .purchase-items-table .expense-piece-value {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 600;
}

.modal-window.modal-purchase-create .purchase-items-table .landed-piece-value {
    display: block;
    color: #0057d8;
    font-size: 0.72rem;
    font-weight: 800;
}

} /* End intentionally disabled legacy purchase workspace styles. */

.modal-window.modal-purchase-create .purchase-products-row-card .purchase-table-wrap {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
}

.modal-window.modal-purchase-create .purchase-products-row-card .purchase-items-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}

.modal-window.modal-purchase-create .purchase-items-table th,
.modal-window.modal-purchase-create .purchase-items-table td {
    box-sizing: border-box !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}

.modal-window.modal-purchase-create .purchase-items-table th {
    white-space: normal !important;
    line-height: 1.15 !important;
}

.modal-window.modal-purchase-create .purchase-items-table .form-control-minimal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 3px 4px !important;
    font-size: 0.68rem !important;
    box-sizing: border-box !important;
}

.modal-window.modal-purchase-create .purchase-items-table .purchase-col-index { width: 2.3% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-item { width: 18% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-hsn { width: 5% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-batch { width: 5% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-expiry { width: 7% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-qty { width: 4% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-rate,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-rate-incl { width: 6.8% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-discount,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-tax { width: 4% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-expense { width: 6.4% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-final { width: 6% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-mrp,
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-sale { width: 5.8% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-amount { width: 6.8% !important; }
.modal-window.modal-purchase-create .purchase-items-table .purchase-col-action { width: 3.8% !important; }

.modal-window.modal-purchase-create .purchase-items-table th,
.modal-window.modal-purchase-create .purchase-items-table td {
    padding: 5px 4px !important;
    font-size: 0.68rem !important;
}

.modal-window.modal-purchase-create .purchase-items-table td:first-child {
    font-size: 0.7rem !important;
}

.modal-window.modal-purchase-create .purchase-items-table td:nth-child(2) strong,
.modal-window.modal-purchase-create .purchase-items-table td:nth-child(2) small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: block !important;
}

.modal-window.modal-purchase-create .purchase-items-table .row-serial-fields {
    display: none !important;
}

.modal-window.modal-purchase-create .purchase-items-table .row-expense-share,
.modal-window.modal-purchase-create .purchase-items-table .row-final-cost {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.1 !important;
}

.modal-window.modal-purchase-create .purchase-items-table .expense-piece-value {
    display: block !important;
    color: #64748b !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
}

.modal-window.modal-purchase-create .purchase-items-table .landed-piece-value {
    display: block !important;
    color: #0057d8 !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
}

#sBillCustomerContainer [id$="-btnQuickAdd"],
#sBillCustomerContainer [id$="-btnFullAdd"] {
    display: none !important;
}

.modal-window.modal-sales-create .sales-products-row-card .sales-table-wrap,
.modal-window.modal-purchase-create .sales-products-row-card .sales-table-wrap {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
}

.modal-window.modal-sales-create .sales-products-row-card .sales-items-table,
.modal-window.modal-purchase-create .sales-products-row-card .sales-items-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
}

.modal-window.modal-sales-create .sales-items-table th,
.modal-window.modal-sales-create .sales-items-table td,
.modal-window.modal-purchase-create .sales-items-table th,
.modal-window.modal-purchase-create .sales-items-table td {
    box-sizing: border-box !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    padding: 5px 4px !important;
    font-size: 0.68rem !important;
}

.modal-window.modal-sales-create .sales-items-table th,
.modal-window.modal-purchase-create .sales-items-table th {
    white-space: normal !important;
    line-height: 1.15 !important;
}

.modal-window.modal-sales-create .sales-items-table .form-control-minimal,
.modal-window.modal-purchase-create .sales-items-table .form-control-minimal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    padding: 3px 4px !important;
    font-size: 0.68rem !important;
    box-sizing: border-box !important;
}

.modal-window.modal-sales-create .sales-items-table .sales-col-index,
.modal-window.modal-purchase-create .sales-items-table .sales-col-index { width: 3% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-item,
.modal-window.modal-purchase-create .sales-items-table .sales-col-item { width: 24% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-hsn,
.modal-window.modal-purchase-create .sales-items-table .sales-col-hsn { width: 6% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-batch,
.modal-window.modal-purchase-create .sales-items-table .sales-col-batch { width: 6% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-expiry,
.modal-window.modal-purchase-create .sales-items-table .sales-col-expiry { width: 8% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-qty,
.modal-window.modal-purchase-create .sales-items-table .sales-col-qty { width: 5% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-rate,
.modal-window.modal-sales-create .sales-items-table .sales-col-rate-incl,
.modal-window.modal-purchase-create .sales-items-table .sales-col-rate,
.modal-window.modal-purchase-create .sales-items-table .sales-col-rate-incl { width: 8% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-discount,
.modal-window.modal-sales-create .sales-items-table .sales-col-tax,
.modal-window.modal-purchase-create .sales-items-table .sales-col-discount,
.modal-window.modal-purchase-create .sales-items-table .sales-col-tax { width: 5% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-mrp,
.modal-window.modal-purchase-create .sales-items-table .sales-col-mrp { width: 7% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-amount,
.modal-window.modal-purchase-create .sales-items-table .sales-col-amount { width: 9% !important; }
.modal-window.modal-sales-create .sales-items-table .sales-col-action,
.modal-window.modal-purchase-create .sales-items-table .sales-col-action { width: 4% !important; }

.modal-window.modal-sales-create .sales-items-table td:nth-child(2) strong,
.modal-window.modal-sales-create .sales-items-table td:nth-child(2) small,
.modal-window.modal-purchase-create .sales-items-table td:nth-child(2) strong,
.modal-window.modal-purchase-create .sales-items-table td:nth-child(2) small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: block !important;
}

.modal-window.modal-sales-create .sales-items-table .row-serial-fields,
.modal-window.modal-purchase-create .sales-items-table .row-serial-fields {
    display: none !important;
}

/* ========================================================================== 
   2026 SIDEBAR NAVIGATION — COMPACT, STRUCTURED, BRAND-CONSISTENT
   ========================================================================== */
.app-layout {
    grid-template-columns: 272px minmax(0, 1fr);
}

.app-layout.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

.app-sidebar {
    width: 272px;
    min-width: 272px;
    overflow: hidden;
    border-right: 1px solid #dfe7f1;
    background:
        radial-gradient(circle at 12% 2%, rgba(37, 99, 235, .08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #f7faff 100%);
    box-shadow: 8px 0 30px rgba(15, 42, 75, .045);
}

.sidebar-collapsed .app-sidebar {
    width: 76px;
    min-width: 76px;
}

.sidebar-header {
    height: 82px;
    min-height: 82px;
    padding: 15px 16px;
    gap: 11px;
    border-bottom: 1px solid rgba(203, 213, 225, .72);
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px);
}

.brand-logo-container {
    width: 45px;
    height: 45px;
    padding: 4px;
    border: 1px solid #dbe6f3;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .09);
}

.brand-logo { object-fit: contain; border-radius: 9px; }
.brand-details { min-width: 0; flex: 1; }
.brand-details .brand-name { max-width: 154px; overflow: hidden; text-overflow: ellipsis; font-size: 1rem !important; letter-spacing: -.01em; }
.brand-details .brand-subtitle { max-width: 154px; overflow: hidden; text-overflow: ellipsis; font-size: .65rem !important; color: #8090a5 !important; }

.sidebar-toggle-btn {
    position: absolute;
    right: -1px;
    bottom: -14px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #d7e2ef;
    border-radius: 9px 0 0 9px;
    background: #fff;
    color: #64748b;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    cursor: pointer;
    z-index: 3;
}
.sidebar-toggle-btn:hover { color: #2563eb; background: #eff6ff; }
.sidebar-toggle-btn svg { width: 15px; height: 15px; }

.sidebar-menu {
    gap: 3px;
    padding: 18px 11px 12px;
    overscroll-behavior: contain;
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 25px;
    margin: 8px 8px 2px;
    color: #9aa8ba;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sidebar-section-label:first-child { margin-top: 0; }
.sidebar-section-label::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #e6edf6, transparent); }

.menu-item {
    height: 44px;
    padding: 0 11px;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #45566f;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.menu-item > svg:first-child,
.menu-item > i:first-child {
    width: 31px;
    height: 31px;
    padding: 7px;
    border-radius: 9px;
    color: #60728a;
    background: #f1f5f9;
    transition: inherit;
}

.menu-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; font-size: .79rem; font-weight: 600; }
.menu-item:hover { transform: translateX(2px); border-color: #d9e7f8; background: #f3f8ff; color: #1858b8; }
.menu-item:hover > svg:first-child,
.menu-item:hover > i:first-child { color: #2563eb; background: #e2edff; }

.menu-item.active {
    border-color: rgba(37, 99, 235, .18);
    background: linear-gradient(110deg, #eaf3ff 0%, #f5f9ff 100%);
    color: #1254b4;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .08);
}
.menu-item.active::before { left: -1px; top: 8px; bottom: 8px; width: 3px; background: linear-gradient(180deg, #1769ff, #7c3aed); }
.menu-item.active > svg:first-child,
.menu-item.active > i:first-child { color: #fff; background: linear-gradient(135deg, #1769ff, #5b5ee8); box-shadow: 0 5px 12px rgba(37, 99, 235, .22); }

.submenu-chevron { width: 15px !important; height: 15px !important; padding: 0 !important; background: transparent !important; }
.sidebar-submenu {
    position: relative;
    gap: 2px;
    margin: 3px 0 5px 20px;
    padding: 5px 5px 5px 14px;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: transparent;
}
.sidebar-submenu::before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 2px; width: 1px; background: #d8e4f1; }
.sidebar-submenu .submenu-item { height: 36px; padding: 0 9px; gap: 8px; border-radius: 8px; color: #64748b; }
.sidebar-submenu .submenu-item > svg:first-child,
.sidebar-submenu .submenu-item > i:first-child { width: 25px; height: 25px; padding: 5px; border-radius: 7px; background: transparent; }
.sidebar-submenu .submenu-item span { font-size: .72rem; font-weight: 600; }
.sidebar-submenu .submenu-item.active { border-color: #dce8f6; background: #fff; box-shadow: 0 3px 10px rgba(15, 42, 75, .06); }
.sidebar-submenu .submenu-item.active::before { display: none; }

.software-brand-signature {
    margin: 8px 11px 11px;
    padding: 8px 9px;
    border-color: #dce7f3;
    background: linear-gradient(135deg, #f4f8ff, #f8f5ff);
    box-shadow: 0 5px 16px rgba(30, 64, 175, .055);
}

.sidebar-collapsed .sidebar-header { padding: 15px; justify-content: center; }
.sidebar-collapsed .sidebar-toggle-btn { right: -1px; }
.sidebar-collapsed .sidebar-menu { padding: 18px 10px 12px; }
.sidebar-collapsed .sidebar-section-label { height: 12px; margin: 8px 10px 4px; }
.sidebar-collapsed .sidebar-section-label span { display: none; }
.sidebar-collapsed .sidebar-section-label::after { background: #e3eaf3; }
.sidebar-collapsed .menu-item { width: 46px; height: 46px; margin: 0 auto; padding: 0; justify-content: center; }
.sidebar-collapsed .menu-item:hover { transform: none; }
.sidebar-collapsed .menu-item > svg:first-child,
.sidebar-collapsed .menu-item > i:first-child { width: 33px; height: 33px; }

body.dark-theme .app-sidebar {
    background: radial-gradient(circle at 12% 2%, rgba(59, 130, 246, .13), transparent 24%), linear-gradient(180deg, #15171b, #101216) !important;
    border-color: #2b313a !important;
}
body.dark-theme .sidebar-header { background: rgba(24, 24, 27, .76); border-color: #2b313a !important; }
body.dark-theme .brand-logo-container,
body.dark-theme .sidebar-toggle-btn { background: #20242b; border-color: #343b46; }
body.dark-theme .sidebar-section-label { color: #687386; }
body.dark-theme .sidebar-section-label::after { background: linear-gradient(90deg, #303641, transparent); }
body.dark-theme .menu-item > svg:first-child,
body.dark-theme .menu-item > i:first-child { background: #252a32; color: #8c9aaf !important; }
body.dark-theme .menu-item:hover { background: #202b3b !important; border-color: #31445f; }
body.dark-theme .menu-item.active { background: linear-gradient(110deg, #172d50, #172238) !important; border-color: #284a78; }
body.dark-theme .menu-item.active > svg:first-child,
body.dark-theme .menu-item.active > i:first-child { color: #fff !important; background: linear-gradient(135deg, #1769ff, #635bdf); }
body.dark-theme .sidebar-submenu { background: transparent !important; }
body.dark-theme .sidebar-submenu::before { background: #303b4a; }

@media (max-width: 1366px) {
    .app-layout { grid-template-columns: 236px minmax(0, 1fr) !important; }
    .app-layout.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr) !important; }
    .app-sidebar { width: 236px !important; min-width: 236px !important; }
    .sidebar-collapsed .app-sidebar { width: 72px !important; min-width: 72px !important; }
    .sidebar-menu { padding-left: 9px; padding-right: 9px; }
    .menu-item { height: 41px; }
    .sidebar-section-label { height: 21px; margin-top: 5px; }
    .brand-details .brand-name,
    .brand-details .brand-subtitle { max-width: 125px; }
}

@media (max-width: 767px) {
    .app-layout,
    .app-layout.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; }
    .app-sidebar { width: min(286px, 88vw) !important; min-width: 0 !important; }
    
    /* Mobile dashboard stacking */
    .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dashboard-row-2, .dashboard-row-3, .dashboard-row-4, .dashboard-summary-strip {
        grid-template-columns: 1fr !important;
    }
    .dashboard-row-2 > div, .dashboard-row-3 > div {
        grid-column: span 1 !important;
    }
}

/* High-clarity selected navigation state. */
@keyframes sidebar-active-enter {
    from { opacity: .72; transform: translateX(-5px) scale(.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes sidebar-active-glow {
    0%, 100% { box-shadow: 0 5px 16px rgba(37, 99, 235, .12), inset 0 0 0 1px rgba(255, 255, 255, .44); }
    50% { box-shadow: 0 7px 22px rgba(37, 99, 235, .20), inset 0 0 0 1px rgba(255, 255, 255, .7); }
}

.sidebar-menu > .menu-item.active,
.sidebar-menu-group > .menu-item.active {
    isolation: isolate;
    overflow: hidden;
    color: #074da9;
    border-color: rgba(37, 99, 235, .34);
    background: linear-gradient(105deg, #dcecff 0%, #edf5ff 52%, #eeeaff 100%);
    animation: sidebar-active-enter .24s ease-out, sidebar-active-glow 3.2s ease-in-out infinite;
}
.sidebar-menu > .menu-item.active::after,
.sidebar-menu-group > .menu-item.active::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -32px;
    right: -26px;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, .16), transparent 68%);
    pointer-events: none;
}
.sidebar-menu > .menu-item.active span,
.sidebar-menu-group > .menu-item.active span { color: #074da9; font-weight: 800; letter-spacing: -.01em; }
.sidebar-menu-group:has(.submenu-item.active) > .menu-item .submenu-chevron { color: #1769ff !important; transform: rotate(0deg); }

.sidebar-submenu .submenu-item.active {
    color: #1557b0;
    border: 1px solid #bed5f1;
    background: linear-gradient(90deg, #ffffff, #edf5ff);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .12);
    animation: sidebar-active-enter .2s ease-out;
}
.sidebar-submenu .submenu-item.active::after {
    content: '';
    position: absolute;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1769ff;
    box-shadow: 0 0 0 4px rgba(23, 105, 255, .12);
}
.sidebar-submenu .submenu-item.active span { color: #1557b0; font-weight: 800; }

.sidebar-collapsed .menu-item.active {
    overflow: visible;
    border-color: rgba(37, 99, 235, .4);
    background: linear-gradient(145deg, #e4efff, #eee9ff);
    box-shadow: 0 7px 20px rgba(37, 99, 235, .2);
}
.sidebar-collapsed .menu-item.active::after { display: none; }

body.dark-theme .sidebar-menu > .menu-item.active,
body.dark-theme .sidebar-menu-group > .menu-item.active {
    color: #bfdbfe !important;
    border-color: #315f9b !important;
    background: linear-gradient(105deg, #17345c, #1e2945 58%, #28234b) !important;
    animation: sidebar-active-enter .24s ease-out;
    box-shadow: 0 7px 22px rgba(3, 12, 29, .38), inset 0 0 0 1px rgba(96, 165, 250, .08);
}
body.dark-theme .sidebar-menu > .menu-item.active span,
body.dark-theme .sidebar-menu-group > .menu-item.active span { color: #dbeafe; }
body.dark-theme .sidebar-submenu .submenu-item.active { background: linear-gradient(90deg, #1d2735, #172b48) !important; border-color: #31557f; }
body.dark-theme .sidebar-submenu .submenu-item.active span { color: #bfdbfe; }

@media (prefers-reduced-motion: reduce) {
    .menu-item.active { animation: none !important; }
}

/* Central settings: tenant-wide module availability control. */
.module-availability-setting {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid #cfe0f4;
    border-radius: 12px;
    background: linear-gradient(135deg, #f4f9ff, #f8f6ff);
    cursor: pointer;
}
.module-setting-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #1769ff, #6856dc); box-shadow: 0 6px 14px rgba(37, 99, 235, .2); }
.module-setting-icon svg { width: 19px; height: 19px; }
.module-setting-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.module-setting-copy strong { color: #17365f; font-size: .78rem; }
.module-setting-copy small { color: #718198; font-size: .63rem; line-height: 1.35; }
.module-setting-switch { position: relative; width: 42px; height: 23px; flex: 0 0 auto; }
.module-setting-switch input { position: absolute; opacity: 0; pointer-events: none; }
.module-setting-switch i { position: absolute; inset: 0; border-radius: 20px; background: #cbd5e1; transition: .2s ease; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .12); }
.module-setting-switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, .2); transition: .2s ease; }
.module-setting-switch input:checked + i { background: linear-gradient(135deg, #1769ff, #635bdf); }
.module-setting-switch input:checked + i::after { transform: translateX(19px); }
.module-availability-setting:has(input:focus-visible) { outline: 2px solid #1769ff; outline-offset: 2px; }
body.dark-theme .module-availability-setting { border-color: #34475f; background: linear-gradient(135deg, #172638, #241e39); }
body.dark-theme .module-setting-copy strong { color: #dbeafe; }
body.dark-theme .module-setting-copy small { color: #94a3b8; }

/* Tenant-wide business module controls. */
.tenant-modules-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.tenant-modules-heading h3 { margin: 0 0 4px; color: #17365f; }
.tenant-modules-heading p { margin: 0; color: #718198; font-size: .7rem; }
.tenant-modules-heading > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 9px; color: #1769ff; background: #edf5ff; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.tenant-modules-heading > span svg { width: 14px; height: 14px; }
.tenant-module-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.tenant-module-control { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 42px; align-items: center; gap: 9px; min-height: 58px; padding: 9px; border: 1px solid #dce5ef; border-radius: 11px; background: #f8fafc; cursor: pointer; transition: .18s ease; }
.tenant-module-control > input { position: absolute; opacity: 0; pointer-events: none; }
.tenant-module-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #7b8798; background: #e8edf3; transition: .18s ease; }
.tenant-module-icon svg { width: 18px; height: 18px; }
.tenant-module-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tenant-module-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #58687d; font-size: .69rem; }
.tenant-module-copy small { color: #9aa6b5; font-size: .58rem; }
.tenant-module-control.enabled { border-color: #a9c9ef; background: linear-gradient(135deg, #f1f7ff, #f7f4ff); box-shadow: 0 4px 12px rgba(37, 99, 235, .07); }
.tenant-module-control.enabled .tenant-module-icon { color: #fff; background: linear-gradient(135deg, #1769ff, #635bdf); box-shadow: 0 5px 12px rgba(37, 99, 235, .18); }
.tenant-module-control.enabled .tenant-module-copy strong { color: #1557b0; font-weight: 800; }
.tenant-module-control.enabled .tenant-module-copy small { color: #4f79ab; }
.tenant-module-control .module-setting-switch { pointer-events: none; }
.tenant-module-control > input:checked ~ .module-setting-switch i { background: linear-gradient(135deg, #1769ff, #635bdf); }
.tenant-module-control > input:checked ~ .module-setting-switch i::after { transform: translateX(19px); }
.tenant-module-control:has(input:focus-visible) { outline: 2px solid #1769ff; outline-offset: 2px; }
body.dark-theme .tenant-modules-heading h3 { color: #dbeafe; }
body.dark-theme .tenant-modules-heading p { color: #94a3b8; }
body.dark-theme .tenant-modules-heading > span { color: #93c5fd; background: #172d4d; }
body.dark-theme .tenant-module-control { border-color: #343c48; background: #1b1f25; }
body.dark-theme .tenant-module-control.enabled { border-color: #315f9b; background: linear-gradient(135deg, #172b48, #29233f); }
body.dark-theme .tenant-module-copy strong { color: #aab6c7; }
body.dark-theme .tenant-module-control.enabled .tenant-module-copy strong { color: #bfdbfe; }
@media (max-width: 1050px) { .tenant-module-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tenant-modules-heading { flex-direction: column; } .tenant-module-controls { grid-template-columns: 1fr; } }

/* Per-user module access editor. */
.user-access-form { display: flex; flex-direction: column; gap: 16px; padding: 8px; }
.user-access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.permission-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.permission-section-head > div { display: flex; flex-direction: column; gap: 2px; }
.permission-section-head strong { color: #17365f; font-size: .86rem; }
.permission-section-head small { color: #718198; font-size: .66rem; }
.permission-section-head > span { padding: 4px 8px; border-radius: 10px; background: #eaf3ff; color: #1769ff; font-size: .62rem; font-weight: 800; }
.user-module-permissions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.user-module-permission { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; cursor: pointer; transition: .18s ease; }
.user-module-permission input { position: absolute; opacity: 0; pointer-events: none; }
.user-module-permission > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #64748b; background: #f1f5f9; }
.user-module-permission > span svg { width: 16px; height: 16px; }
.user-module-permission > strong { min-width: 0; color: #506178; font-size: .69rem; }
.user-module-permission .permission-check { width: 17px; height: 17px; padding: 3px; border-radius: 50%; color: transparent; background: #e2e8f0; }
.user-module-permission:hover { transform: translateY(-1px); border-color: #b9d0ed; background: #f8fbff; }
.user-module-permission.selected { border-color: #8bb7ef; background: linear-gradient(135deg, #edf6ff, #f4f1ff); box-shadow: 0 4px 12px rgba(37, 99, 235, .08); }
.user-module-permission.selected > span { color: #fff; background: linear-gradient(135deg, #1769ff, #635bdf); }
.user-module-permission.selected > strong { color: #1557b0; font-weight: 800; }
.user-module-permission.selected .permission-check { color: #fff; background: #1769ff; }
.user-module-permission:has(input:focus-visible) { outline: 2px solid #1769ff; outline-offset: 2px; }
body.dark-theme .permission-section-head strong { color: #dbeafe; }
body.dark-theme .permission-section-head small { color: #94a3b8; }
body.dark-theme .user-module-permission { border-color: #343c48; background: #1c2026; }
body.dark-theme .user-module-permission.selected { border-color: #315f9b; background: linear-gradient(135deg, #172d4d, #292341); }
body.dark-theme .user-module-permission > strong { color: #aab6c7; }
body.dark-theme .user-module-permission.selected > strong { color: #bfdbfe; }
@media (max-width: 620px) { .user-access-grid, .user-module-permissions { grid-template-columns: 1fr; } }

/* Refined navigation feedback and active-group continuity. */
@keyframes sidebar-dot-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 4px rgba(23, 105, 255, .12), 0 0 10px rgba(23, 105, 255, .25); }
    50% { transform: translateY(-50%) scale(1.16); box-shadow: 0 0 0 7px rgba(23, 105, 255, 0), 0 0 14px rgba(23, 105, 255, .42); }
}
@keyframes sidebar-selected-sheen {
    from { transform: translateX(-135%) skewX(-18deg); }
    to { transform: translateX(360%) skewX(-18deg); }
}

.sidebar-menu-group {
    position: relative;
    border-radius: 13px;
    transition: background .22s ease, box-shadow .22s ease, padding .22s ease;
}
.sidebar-menu-group:has(.submenu-item.active) {
    padding: 3px;
    background: linear-gradient(145deg, rgba(232, 242, 255, .88), rgba(244, 240, 255, .72));
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .10), 0 5px 16px rgba(37, 99, 235, .055);
}
.sidebar-menu-group:has(.submenu-item.active) > .sidebar-submenu {
    margin-left: 17px;
    margin-bottom: 3px;
}
.sidebar-menu-group:has(.submenu-item.active) > .sidebar-submenu::before {
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #8cbcff, #d6c8ff);
}

.sidebar-menu > .menu-item.active::before,
.sidebar-menu-group > .menu-item.active::before {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10), 0 0 12px rgba(37, 99, 235, .28);
}
.sidebar-menu > .menu-item.active span::after,
.sidebar-menu-group > .menu-item.active span::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 7px;
    vertical-align: middle;
    border-radius: 50%;
    background: #1769ff;
    box-shadow: 0 0 0 3px rgba(23, 105, 255, .11);
}
.sidebar-menu > .menu-item.active::after,
.sidebar-menu-group > .menu-item.active::after {
    border-radius: 0;
    top: -25%;
    right: auto;
    bottom: -25%;
    left: 0;
    width: 24px;
    height: 150%;
    opacity: .42;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    animation: sidebar-selected-sheen .72s .08s ease-out both;
}
.sidebar-submenu .submenu-item.active::after {
    top: 50%;
    right: 10px;
    width: 7px;
    height: 7px;
    animation: sidebar-dot-pulse 2.2s ease-in-out infinite;
}

.menu-item:focus-visible {
    outline: 2px solid #1769ff;
    outline-offset: 2px;
    background: #eff6ff;
}
.menu-item:active { transform: translateX(2px) scale(.985); }
.sidebar-collapsed .menu-item:active { transform: scale(.94); }
.sidebar-collapsed .menu-item.active span::after { display: none; }
.sidebar-collapsed .sidebar-menu-group:has(.submenu-item.active) { padding: 0; background: transparent; box-shadow: none; }

body.dark-theme .sidebar-menu-group:has(.submenu-item.active) {
    background: linear-gradient(145deg, rgba(24, 49, 84, .75), rgba(39, 31, 72, .62));
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .13), 0 6px 18px rgba(0, 0, 0, .16);
}
body.dark-theme .sidebar-menu-group:has(.submenu-item.active) > .sidebar-submenu::before {
    background: linear-gradient(180deg, #3b82f6, #6d55b5);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-submenu .submenu-item.active::after,
    .sidebar-menu > .menu-item.active::after,
    .sidebar-menu-group > .menu-item.active::after { animation: none !important; }
}

/* First-run guided tour */
.onboarding-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(10px);
}
.onboarding-tour-overlay.active { display: flex; }
.onboarding-tour-card {
    position: relative;
    width: min(560px, 100%);
    overflow: hidden;
    border: 1px solid rgba(219, 234, 254, .9);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .32);
    animation: onboarding-tour-in .2s ease-out;
}
.onboarding-tour-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 9px;
    background: rgba(255, 255, 255, .86);
    color: #475569;
    cursor: pointer;
}
.onboarding-tour-close:hover { background: #f8fafc; color: #0f172a; }
.onboarding-tour-close svg { width: 17px; height: 17px; }
.onboarding-tour-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 58px 20px 22px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc 58%, #ecfeff);
    border-bottom: 1px solid #e2e8f0;
}
.onboarding-tour-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}
.onboarding-tour-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .12);
}
.onboarding-tour-brand strong,
.onboarding-tour-brand span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.onboarding-tour-brand strong { color: #0f172a; font-size: .95rem; }
.onboarding-tour-brand span { margin-top: 3px; color: #64748b; font-size: .72rem; }
.onboarding-tour-count {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: .68rem;
    font-weight: 800;
}
.onboarding-tour-body {
    padding: 26px 26px 18px;
    text-align: center;
}
.onboarding-tour-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1769ff, #0891b2);
    color: #fff;
    box-shadow: 0 16px 28px rgba(23, 105, 255, .22);
}
.onboarding-tour-icon svg { width: 30px; height: 30px; }
.onboarding-tour-eyebrow {
    margin: 0 0 7px;
    color: #0f766e;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}
.onboarding-tour-body h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.18;
}
.onboarding-tour-body p:not(.onboarding-tour-eyebrow) {
    max-width: 440px;
    margin: 12px auto 0;
    color: #475569;
    font-size: .92rem;
    line-height: 1.6;
}
.onboarding-tour-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 0 22px 18px;
}
.onboarding-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: width .18s ease, background .18s ease;
}
.onboarding-dot.active { width: 24px; background: #1769ff; }
.onboarding-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.onboarding-tour-actions > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.onboarding-tour-actions .btn {
    min-height: 38px;
    white-space: nowrap;
}
body.dark-theme .onboarding-tour-card {
    background: #172033;
    border-color: #334155;
}
body.dark-theme .onboarding-tour-hero {
    background: linear-gradient(135deg, #172554, #111827 58%, #0f3f46);
    border-color: #334155;
}
body.dark-theme .onboarding-tour-brand strong,
body.dark-theme .onboarding-tour-body h2 { color: #f8fafc; }
body.dark-theme .onboarding-tour-brand span,
body.dark-theme .onboarding-tour-body p:not(.onboarding-tour-eyebrow) { color: #cbd5e1; }
body.dark-theme .onboarding-tour-actions {
    background: #111827;
    border-color: #334155;
}

@keyframes onboarding-tour-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .onboarding-tour-overlay {
        align-items: flex-end;
        padding: 10px;
    }
    .onboarding-tour-card {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
        border-radius: 14px;
    }
    .onboarding-tour-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 54px 16px 16px;
    }
    .onboarding-tour-brand img {
        width: 42px;
        height: 42px;
    }
    .onboarding-tour-count {
        padding: 6px 9px;
        font-size: .65rem;
    }
    .onboarding-tour-body {
        padding: 22px 18px 16px;
    }
    .onboarding-tour-icon {
        width: 56px;
        height: 56px;
        border-radius: 15px;
    }
    .onboarding-tour-body h2 {
        font-size: 1.28rem;
    }
    .onboarding-tour-body p:not(.onboarding-tour-eyebrow) {
        font-size: .84rem;
        line-height: 1.55;
    }
    .onboarding-tour-actions,
    .onboarding-tour-actions > div {
        width: 100%;
        flex-direction: column;
    }
    .onboarding-tour-actions .btn {
        width: 100%;
        justify-content: center;
    }
    .onboarding-skip { order: 2; }
}

/* Company profile modal */
.company-profile-form{display:grid;gap:16px;padding:4px}.company-profile-hero{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid #dbeafe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f8fafc 58%,#ecfeff)}.company-profile-hero img{width:62px;height:62px;object-fit:contain;border-radius:13px;background:#fff;border:1px solid #dbeafe;box-shadow:0 8px 20px rgba(37,99,235,.12)}.company-profile-hero strong,.company-profile-hero span{display:block}.company-profile-hero strong{color:#0f172a;font-size:1rem}.company-profile-hero span{margin-top:3px;color:#64748b;font-size:.78rem;line-height:1.4}.company-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.company-profile-span{grid-column:1/-1}.company-profile-lock{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;align-items:start;padding:12px;border:1px solid #e2e8f0;border-radius:11px;background:#f8fafc;cursor:pointer}.company-profile-lock input{grid-row:1/3;margin-top:2px}.company-profile-lock span{font-weight:700;color:#1e293b}.company-profile-lock small{color:#64748b;font-size:.72rem}.company-profile-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:4px}.dark-theme .company-profile-hero{background:linear-gradient(135deg,#172554,#111827 58%,#0f3f46);border-color:#334155}.dark-theme .company-profile-hero strong,.dark-theme .company-profile-lock span{color:#f8fafc}.dark-theme .company-profile-hero span,.dark-theme .company-profile-lock small{color:#cbd5e1}.dark-theme .company-profile-lock{background:#111827;border-color:#334155}@media(max-width:640px){.company-profile-grid{grid-template-columns:1fr}.company-profile-actions{flex-direction:column}.company-profile-actions .btn{width:100%;justify-content:center}}
@media(max-width:900px){#saas-tab-company-profile .card[style*="margin-top:16px"]>div{grid-template-columns:1fr!important}}

/* WhatsApp Command Center - Minimalist Tech Theme */
#saas-tab-whatsapp-settings {
    --wa-accent: #0ea5e9;
    --wa-success: #10b981;
    --wa-warning: #f59e0b;
    --wa-danger: #ef4444;
}
.wa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(14, 165, 233, 0.08);
    color: #0284c7;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.wa-command-hero {
    position: relative;
    padding: 28px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wa-command-copy h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 10px 0 6px;
    color: var(--text-primary);
}
.wa-command-copy p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.wa-hero-pills {
    display: flex;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.wa-hero-pills span {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.wa-hero-pills span i {
    color: var(--wa-success);
    width: 14px;
    height: 14px;
}
.wa-hero-mark {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: #f0fdfa;
    color: #0d9488;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 16px rgba(13, 148, 136, 0.06);
}
.wa-hero-mark svg {
    width: 36px;
    height: 36px;
}
.wa-premium-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-premium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04) !important;
    border-color: #93c5fd !important;
}
.wa-glass-status-card {
    transition: all 0.2s;
}
.wa-glass-status-card:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}
.wa-ping-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: wa-pulse-ping 1.5s infinite;
}
@keyframes wa-pulse-ping {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}
.wa-switch {
    position: relative;
    width: 36px;
    height: 18px;
    border-radius: 99px;
    background: #cbd5e1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-switch:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-automation-list label:hover {
    border-color: #bfdbfe !important;
    background: #f0f7ff !important;
}
.wa-automation-list input:checked + .wa-switch {
    background: var(--wa-success);
}
.wa-automation-list input:checked + .wa-switch:after {
    transform: translateX(18px);
}
.wa-history-panel .tab-btn {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    border-radius: 0 !important;
}
.wa-history-panel .tab-btn.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    background: transparent !important;
}
.table-custom th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@keyframes wa-ping {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.5; }
}
@media (max-width: 992px) {
    .wa-three-column-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 768px) {
    .wa-three-column-grid {
        grid-template-columns: 1fr !important;
    }
    .wa-command-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .wa-hero-mark {
        display: none;
    }
}


/* Custom Sidebar compact scaling for 1366x768 and low-height viewports */
@media (max-height: 800px) {
    .sidebar-header {
        height: 64px !important;
        min-height: 64px !important;
        padding: 8px 12px !important;
    }
    .brand-logo-container {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }
    .sidebar-menu {
        padding: 8px 6px 6px !important;
        gap: 2px !important;
    }
    .menu-item {
        height: 34px !important;
        padding: 0 8px !important;
        gap: 6px !important;
        border-radius: 8px !important;
        font-size: 0.78rem !important;
    }
    .menu-item i, .menu-item svg {
        width: 16px !important;
        height: 16px !important;
    }
    .sidebar-section-label {
        height: 18px !important;
        margin: 4px 4px 1px !important;
        font-size: 0.52rem !important;
    }
    .sidebar-submenu {
        gap: 1px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
    .sidebar-submenu .submenu-item {
        padding: 5px 8px 5px 24px !important;
        font-size: 0.75rem !important;
    }
    .sidebar-toggle-btn {
        width: 24px !important;
        height: 24px !important;
        bottom: -10px !important;
    }
    .sidebar-toggle-btn svg {
        width: 12px !important;
        height: 12px !important;
    }
    /* Compact Splash Screen Loader */
    .app-splash-screen .splash-content {
        padding: 24px 20px 20px !important;
        border-radius: 20px !important;
    }
    .app-splash-screen .splash-logo-wrapper {
        width: 200px !important;
        height: 72px !important;
        margin-bottom: 16px !important;
        flex: 0 0 72px !important;
    }
    .app-splash-screen #splashLogo {
        width: 180px !important;
        height: 56px !important;
    }
    .app-splash-screen .splash-progress-container {
        width: 180px !important;
        height: 4px !important;
        margin-bottom: 10px !important;
    }
    .app-splash-screen .splash-progress-meta {
        width: 180px !important;
    }
}

/* ==========================================================================
   WHATSAPP MESSAGING CENTER REDESIGN CSS (2026 ENTERPRISE THEME)
   ========================================================================== */
.wa-center-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.wa-subtab-header {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 2px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.wa-subtab-header .tab-btn {
    border: 0;
    background: transparent;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    bottom: -2px;
}
.wa-subtab-header .tab-btn:hover {
    color: #1e1b4b;
}
.wa-subtab-header .tab-btn.active {
    color: var(--color-primary, #2563eb);
    border-bottom-2px-solid: var(--color-primary, #2563eb);
    border-bottom: 2px solid var(--color-primary, #2563eb);
}
.wa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.wa-stat-card-new {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wa-stat-card-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    border-color: #cbd5e1;
}
.wa-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
}
.wa-action-grid-new {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.wa-action-card-new {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.01);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}
.wa-action-card-new:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 12px 24px rgba(37,99,235,0.06);
}
.wa-action-card-new i {
    color: var(--color-primary, #2563eb);
    width: 20px;
    height: 20px;
}
.wa-action-card-new h4 {
    margin: 4px 0 0;
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
}
.wa-action-card-new p {
    margin: 0;
    font-size: 0.72rem;
    color: #64748b;
    line-height: 1.4;
}
.wa-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.wa-template-card-new {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.01);
}
.wa-template-preview-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    font-size: 0.75rem;
    color: #334155;
    white-space: pre-line;
    font-family: inherit;
    line-height: 1.4;
    min-height: 100px;
    max-height: 160px;
    overflow-y: auto;
    border-left: 3px solid #22c55e;
}
.wa-automation-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    gap: 16px;
    transition: border-color 0.2s;
}
.wa-automation-rule-row:hover {
    border-color: #cbd5e1;
}
.wa-workflow-builder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
}
.wa-workflow-step {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.wa-search-bar-center {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease-in-out;
}
.wa-search-bar-center:focus-within {
    border-color: #0d9488;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.12);
    background: #ffffff;
}
.wa-search-bar-center input {
    border: 0;
    background: transparent;
    font-size: 0.82rem;
    color: var(--text-primary);
    width: 100%;
    outline: none;
}
.wa-search-bar-center input::placeholder {
    color: #94a3b8;
}

/* Premium Table Redesign */
.wa-premium-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.wa-premium-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px;
    border-bottom: 2px solid #e2e8f0;
}
.wa-premium-table th:first-child {
    border-top-left-radius: 12px;
}
.wa-premium-table th:last-child {
    border-top-right-radius: 12px;
}
.wa-premium-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}
.wa-premium-table tr {
    transition: background 0.15s ease-in-out;
}
.wa-premium-table tr:hover td {
    background: #f8fafc;
}
.wa-premium-table tr:last-child td {
    border-bottom: 0;
}
.wa-premium-table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.wa-premium-table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
.wa-premium-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 9999px !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wa-wallet-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 992px) {
    .wa-wallet-panel-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .wa-stat-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .wa-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   POS REFERENCE LAYOUT DYNAMIC HEIGHT-BASED SCALING
   ========================================================================== */
@media (min-width: 768px) and (max-height: 800px) {
    .pos-reference-layout {
        height: calc(100vh - 90px) !important;
        gap: 8px !important;
        padding: 0 10px 8px !important;
    }
    .pos-reference-customer {
        padding: 6px 10px !important;
    }
    .pos-reference-customer .sales-ws-cust-right {
        gap: 4px 10px !important;
        padding-left: 10px !important;
    }
    .pos-reference-search-section {
        padding: 6px 10px !important;
    }
    .pos-reference-search-section > small {
        margin: 2px 0 4px 30px !important;
    }
    .pos-reference-search-section .sales-ws-search-control {
        height: 34px !important;
    }
    .pos-reference-summary-panel {
        padding: 8px !important;
    }
    .pos-reference-summary-panel .sales-ws-net-payable-large {
        padding: 8px 12px !important;
        margin: 6px 0 !important;
    }
    .pos-reference-summary-panel .payment-method-card {
        min-height: 48px !important;
    }
    .pos-reference-summary-panel #salesWsCompleteCheckOutBtn {
        min-height: 44px !important;
        font-size: 0.85rem !important;
    }
    .pos-reference-main .sales-ws-cart-header {
        padding: 6px 10px !important;
    }
    .pos-reference-main .sales-ws-cart-items-wrapper {
        padding: 0 10px 8px !important;
    }
    .pos-reference-main .sales-ws-cart-item-row {
        min-height: 74px !important;
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
    }
    .pos-reference-main .cart-item-thumb-box {
        width: 44px !important;
        height: 44px !important;
    }
    .pos-idle-popular-wrap {
        padding: 8px 10px !important;
    }
    .pos-idle-popular-item {
        min-height: 60px !important;
        padding: 4px 6px !important;
        gap: 6px !important;
    }
    .pos-idle-popular-item span:first-child {
        width: 44px !important;
        height: 44px !important;
    }
}

@media (min-width: 768px) and (max-height: 700px) {
    .pos-reference-layout {
        height: calc(100vh - 80px) !important;
    }
    .pos-reference-customer {
        padding: 4px 8px !important;
    }
    .pos-reference-search-section {
        padding: 4px 8px !important;
    }
    .pos-reference-search-section .sales-ws-search-control {
        height: 30px !important;
    }
    .pos-reference-summary-panel .payment-method-card {
        min-height: 42px !important;
    }
    .pos-reference-summary-panel #salesWsCompleteCheckOutBtn {
        min-height: 38px !important;
        font-size: 0.8rem !important;
    }
}