/* ZhayPOS foundations. Loaded after the legacy feature styles. */
:root, body.light-mode, body.dark-mode {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  --font-serif: var(--font-sans);
  --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px;
  --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 40px; --spacing-3xl: 64px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 16px;
  --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 15px;
  --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px;
  --color-primary: #6550c4; --color-primary-dark: #513ca9; --color-primary-light: #b4a4f3;
  --shadow-card: 0 1px 3px #14182408; --shadow-dialog: 0 16px 64px #0003;
  --hover-lift: none; --scale-hover: none; --transition-bounce: 180ms ease;
}
body.light-mode { --color-bg: #f5f6f8; --color-bg-secondary: #fff; --color-bg-tertiary: #eef0f4; --color-text: #20232b; --color-text-secondary: #555e6e; --color-text-tertiary: #626b79; --color-border: #dce0e7; }
body.dark-mode { --color-bg: #13151b; --color-bg-secondary: #1c1f27; --color-bg-tertiary: #282c36; --color-text: #f0f1f5; --color-text-secondary: #bac1ce; --color-text-tertiary: #a5aebf; --color-border: #373d49; --color-primary: #b4a4f3; --color-primary-dark: #6550c4; }
body { font-family: var(--font-sans); line-height: 1.5; }
button, input, select, textarea { font: inherit; }
*:focus-visible { outline: 3px solid var(--color-primary) !important; outline-offset: 3px; }
button { touch-action: manipulation; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
button, a, input, select, textarea { transition-duration: 150ms !important; }
h1,h2,h3,h4 { font-family: var(--font-sans) !important; letter-spacing: -.025em; }
.section-header h2 { font-size: clamp(24px, 2vw, 30px); font-weight: 600; }
.section-header { flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.app-header { background: var(--color-bg-secondary); box-shadow: none; border-bottom: 1px solid var(--color-border); padding: 12px 24px; }
.header-logo { font-size: 21px; letter-spacing: -.04em; }
.main-content { grid-template-columns: 216px minmax(0,1fr); }
.sidebar { padding: 24px 12px; }
.nav-menu { gap: 4px; }
.nav-item { min-height: 44px; padding: 12px 16px; gap: 12px; border-radius: 8px; font-size: 14px; }
.nav-item.active { background: var(--color-bg-active); border-color: transparent; box-shadow: inset 3px 0 var(--color-primary); }
.content-area { padding: 32px; padding-bottom: 96px; }
.section { max-width: 1680px; margin-inline: auto; animation: none; }
.stat-card,.chart-container,.analytics-card,.cart-panel,.active-shift-card,.shift-card,.table-wrapper,.receipt-card { border: 1px solid var(--color-border); background: var(--color-bg-secondary); border-radius: 12px; box-shadow: var(--shadow-card); transform: none !important; }
.stats-grid { gap: 16px; }
.stat-card { padding: 20px; }
.stat-card h3,.stat-label, .data-table th { text-transform: none; letter-spacing: 0; }
.stat-card h3 { font-size: 14px; font-weight: 500; }
.stat-value { font-size: clamp(22px,2.3vw,30px); font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.stat-icon { background: var(--color-bg-tertiary) !important; color: var(--color-primary) !important; border-radius: 8px; width: 40px; height: 40px; }
.ui-icon { width: 20px; height: 20px; display: inline-block; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.primary-button,.auth-button,.lp-btn-primary,.chatbot-send-btn { background: #6550c4 !important; color: #fff !important; border: 1px solid transparent; box-shadow: none !important; border-radius: 8px; min-height: 44px; font-weight: 600; transform: none !important; }
.primary-button:hover,.lp-btn-primary:hover { background: #513ca9 !important; }
.secondary-button,.danger-button,.btn,.lp-btn-ghost { min-height: 44px; border-radius: 8px; box-shadow: none; transform: none !important; }
.form-input,.form-select,.auth-input,textarea,input,select { border-radius: 8px; min-height: 44px; max-width: 100%; }
.table-wrapper { overflow-x: auto; }
.data-table,.analytics-table { width: 100%; font-size: 14px; }
.data-table th,.analytics-table th { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-bg-tertiary); }
.data-table td,.data-table th,.analytics-table td,.analytics-table th { padding: 12px 16px; }
.data-table td:not(:first-child),.summary-value,.summary-amount,.stat-value,.cart-item-price { font-variant-numeric: tabular-nums; }
.data-table td { height: 64px; }
.data-table td:first-child { overflow-wrap: anywhere; }
.dashboard-charts,.analytics-grid { gap: 24px; }
.analytics-card { min-width: 0; overflow-x: auto; }
.chart-container h3,.analytics-card h3,.cart-title { font-size: 17px; font-weight: 600; }
.sales-container { grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 24px; align-items: start; }
.sales-left,.sales-right { min-width: 0; }
.cart-panel { padding: 20px; }
.cart-items:empty::before { content: 'Your cart is empty. Select a product to begin.'; display: block; padding: 32px 8px; color: var(--color-text-secondary); text-align: center; }
.cart-item { gap: 8px; flex-wrap: wrap; }
.cart-item-name { overflow-wrap: anywhere; }
.qty-btn,.remove-item-btn,.modal-close { min-width: 40px; min-height: 40px; }
.cart-actions { gap: 8px; }
.modal { padding: 16px; }
.modal-content { max-width: min(640px,100%); max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 16px; background: var(--color-bg-secondary); box-shadow: var(--shadow-dialog); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.modal-header h2,.modal-header h3 { font-size: 20px; }
.modal-form,.modal-body { padding: 24px; }
.modal-buttons { gap: 12px; }
.empty-state { padding: 40px 24px; color: var(--color-text-secondary); }
.toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.chatbot-toggle-btn { bottom: 20px; right: 20px; width: 48px; height: 48px; border-radius: 12px; background: #6550c4 !important; color: white; box-shadow: var(--shadow-dialog); animation: none !important; }
.chatbot-panel { width: min(440px,100%); height: min(660px,calc(100dvh - 40px)); display: flex; flex-direction: column; padding: 0; }
.chatbot-header { background: var(--color-bg-secondary); color: var(--color-text); flex-shrink: 0; }
.chatbot-subtitle { color: var(--color-text-secondary); font-size: 13px; }
.chatbot-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; overscroll-behavior: contain; }
.message-content { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; max-width: 100%; }
.message-user .message-content { background: #6550c4; color: white; }
.chatbot-input-area { flex-shrink: 0; padding: 16px; border-top: 1px solid var(--color-border); padding-bottom: max(16px,env(safe-area-inset-bottom)); }
.chatbot-input { min-width: 0; resize: vertical; max-height: 120px; }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.chat-suggestions button { font-size: 13px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); background: var(--color-bg-secondary); }
.auth-card,.auth-container { font-family: var(--font-sans); }
.auth-card { border-radius: 16px; box-shadow: var(--shadow-dialog); }
.auth-header h1 { font-size: 30px; }
.auth-label { text-transform: none; letter-spacing: 0; }
.lp-root { font-family: var(--font-sans); }
.lp-blob,.lp-hero-mockup { display: none; }
.lp-hero { padding: 96px 24px 80px; background: var(--color-bg); }
.lp-hero-title { font-size: clamp(36px,5vw,64px); line-height: 1.08; font-weight: 600; }
.lp-gradient-text { background: none; -webkit-text-fill-color: var(--color-primary); color: var(--color-primary); }
.lp-hero-badge,.lp-section-badge { background: transparent; border: 0; color: var(--color-primary); font-size: 13px; letter-spacing: .02em; }
.lp-hero-desc { font-size: 18px; line-height: 1.65; max-width: 600px; }
.lp-feature-card { border-radius: 12px; box-shadow: none !important; transform: none !important; }
.lp-feature-icon { color: var(--color-primary) !important; background: var(--color-bg-tertiary) !important; border-radius: 8px; }
.lp-section-title { font-size: clamp(26px,3vw,36px); }
.lp-cta { background: var(--color-bg-secondary); }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 3000; background: var(--color-bg-secondary); padding: 12px; color: var(--color-text); }
.skip-link:focus { top: 12px; }
@media(max-width: 1100px) { .content-area { padding: 24px; padding-bottom: 88px; } .sales-container { grid-template-columns: minmax(0,1fr) 300px; gap: 16px; } }
@media(max-width: 1024px) { .main-content { grid-template-columns: minmax(0,1fr); } }
@media(max-width: 767px) {
 .content-area { padding: 16px; padding-bottom: 88px; } .app-header { padding: 12px 16px; }
 .sales-container { display: flex; flex-direction: column; } .sales-left,.sales-right { width: 100%; }
 .sales-right { position: static; } .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .stat-card { padding: 16px; gap: 8px; } .stat-icon { display: none; }
 .dashboard-charts,.analytics-grid { grid-template-columns: minmax(0,1fr); }
 .section-header > * { max-width: 100%; } .history-filters { flex-wrap: wrap; }
 .data-table,.analytics-table { min-width: 540px; } .table-wrapper { max-width: 100%; }
 .modal-content { width: 100%; } .modal-form,.modal-body { padding: 16px; }
 .form-row { flex-wrap: wrap; } .modal-buttons { display: flex; }
 #chatbot-modal { padding: 0; } .chatbot-panel { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
 .lp-hero { padding: 64px 16px; } .lp-hero-desc { font-size: 16px; }
 input,select,textarea { font-size: 16px; } .export-buttons-grid { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .sidebar,.app-header,.chatbot-toggle-btn,.skip-link { display: none !important; } }
.mobile-sale-switcher { display: none; }
@media(max-width:767px) {
 .mobile-sale-switcher { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--color-bg-tertiary); border-radius: 8px; }
 .mobile-sale-switcher button { flex: 1; min-height: 44px; background: transparent; color: var(--color-text-secondary); border: 0; border-radius: 6px; }
 .mobile-sale-switcher button[aria-pressed="true"] { background: var(--color-bg-secondary); color: var(--color-text); box-shadow: var(--shadow-card); }
 #sales[data-mobile-view="catalog"] .sales-right, #sales[data-mobile-view="cart"] .sales-left { display: none; }
 .sales-container,.sales-left,.sales-right { height: auto !important; min-height: 0 !important; max-height: none !important; }
 .sales-products-table { min-width: 0; }
 .sales-products-table thead { display: none; }
 .sales-products-table tbody { display: grid; }
 .sales-products-table tr { display: grid; grid-template-columns: 1fr auto; padding: 12px; border-bottom: 1px solid var(--color-border); gap: 8px; }
 .sales-products-table td { display: flex; align-items: center; padding: 0; height: auto; border: 0; }
 .sales-products-table td:first-child { grid-column: 1 / -1; }
 .sales-products-table td:last-child { grid-column: 1 / -1; }
 .sales-products-table td:last-child button { width: 100%; min-height: 44px; }
 .sales-products-table td:nth-last-child(2)::before { content: 'Stock: '; color: var(--color-text-secondary); margin-right: 4px; }
}

/* Compact operational overview and readable default system theme. */
.dashboard-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; max-width: none; margin-bottom: 24px; }
.stat-card { grid-template-columns: 40px minmax(0,1fr); gap: 12px; cursor: default; }
.stat-card:hover { box-shadow: var(--shadow-card); border-color: var(--color-border); }
.header-logo { background: none; -webkit-text-fill-color: var(--color-text); color: var(--color-text); }
.auth-form .form-group > label { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--color-text-secondary); }
.lp-cta-card { background: var(--color-bg-secondary); border-radius: 16px; }
.lp-cta-glow { display: none; }
.transaction-date-table-wrapper { overflow-x: auto; }
.transaction-date-table { width: 100%; font-variant-numeric: tabular-nums; }
.shift-card [onclick] { cursor: pointer; }
@media(prefers-color-scheme: dark) {
 body:not(.light-mode) { --color-bg: #13151b; --color-bg-secondary: #1c1f27; --color-bg-tertiary: #282c36; --color-text: #f0f1f5; --color-text-secondary: #bac1ce; --color-text-tertiary: #a5aebf; --color-border: #373d49; --color-primary: #b4a4f3; }
}
@media(max-width: 1200px) { .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width: 767px) { .stat-card { grid-template-columns: minmax(0,1fr); } .dashboard-grid { gap: 12px; } .dashboard-charts { grid-template-columns: minmax(0,1fr); } }
@media(max-width: 359px) { .dashboard-grid { grid-template-columns: minmax(0,1fr); } }
@media(max-width: 480px) {
 .header-left,.header-right { gap: 8px; min-width: 0; }
 .app-header { gap: 8px; padding: 12px; }
 .header-logo { font-size: 18px; white-space: nowrap; }
 .user-menu-btn { padding: 4px; min-width: 40px; }
 .user-name { display: none; }
 .user-avatar { width: 32px; height: 32px; }
 .theme-toggle,.mobile-menu-toggle { flex-shrink: 0; width: 40px; height: 40px; }
 .header-right { margin-left: auto; }
}
.modal-close { color: var(--color-text-secondary); }
.chatbot-send-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
.chart-viewport { position: relative; height: 260px; min-width: 0; }
.chart-viewport canvas { width: 100% !important; height: 100% !important; max-height: none !important; }
.chart-data { margin-top: 16px; max-width: 100%; overflow-x: auto; }
.chart-data summary { cursor: pointer; color: var(--color-text-secondary); font-size: 13px; padding: 8px 0; }
.chart-data .data-table { min-width: 0; }
@media(max-width:480px) { .chart-viewport { height: 220px; } }
.modal-close svg,.chatbot-send-btn svg,.chatbot-toggle-btn svg { fill: currentColor; }
.form-group > label { text-transform: none; letter-spacing: 0; font-size: 14px; }
.chatbot-message.message-assistant .message-content { background: var(--color-bg-tertiary); border: 0; }
.chatbot-toggle-btn { transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
body:has(.modal:not(.hidden)) .chatbot-toggle-btn { visibility: hidden; }
.add-to-cart-btn { background: #6550c4 !important; color: #fff !important; box-shadow: none !important; transform: none !important; border-radius: 8px; }
.cart-item { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.cart-item-name { grid-column: 1 / -1; }
.cart-item-qty { justify-content: flex-start; }
.cart-item-price { white-space: nowrap; }
.remove-item-btn { grid-column: 2; justify-self: end; color: var(--color-danger); }
.cart-panel { width: 100%; max-width: none; }
@media(max-width:767px) { .sales-right { padding: 0 !important; } }