/* Enhanced CSS with billing system styles and icon updates */

:root {
/* Primitive Color Tokens */
--color-white: rgba(255, 255, 255, 1);
--color-black: rgba(0, 0, 0, 1);
--color-cream-50: rgba(252, 252, 249, 1);
--color-cream-100: rgba(255, 255, 253, 1);
--color-gray-200: rgba(245, 245, 245, 1);
--color-gray-300: rgba(167, 169, 169, 1);
--color-gray-400: rgba(119, 124, 124, 1);
--color-slate-500: rgba(98, 108, 113, 1);
--color-brown-600: rgba(94, 82, 64, 1);
--color-charcoal-700: rgba(31, 33, 33, 1);
--color-charcoal-800: rgba(38, 40, 40, 1);
--color-slate-900: rgba(19, 52, 59, 1);
--color-teal-300: rgba(50, 184, 198, 1);
--color-teal-400: rgba(45, 166, 178, 1);
--color-teal-500: rgba(33, 128, 141, 1);
--color-teal-600: rgba(29, 116, 128, 1);
--color-teal-700: rgba(26, 104, 115, 1);
--color-teal-800: rgba(41, 150, 161, 1);
--color-red-400: rgba(255, 84, 89, 1);
--color-red-500: rgba(192, 21, 47, 1);
--color-orange-400: rgba(230, 129, 97, 1);
--color-orange-500: rgba(168, 75, 47, 1);

/* RGB versions for opacity control */
--color-brown-600-rgb: 94, 82, 64;
--color-teal-500-rgb: 33, 128, 141;
--color-slate-900-rgb: 19, 52, 59;
--color-slate-500-rgb: 98, 108, 113;
--color-red-500-rgb: 192, 21, 47;
--color-red-400-rgb: 255, 84, 89;
--color-orange-500-rgb: 168, 75, 47;
--color-orange-400-rgb: 230, 129, 97;

/* Background color tokens (Light Mode) */
--color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
--color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
--color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
--color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
--color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
--color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
--color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
--color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

/* Semantic Color Tokens (Light Mode) */
--color-background: var(--color-cream-50);
--color-surface: var(--color-cream-100);
--color-text: var(--color-slate-900);
--color-text-secondary: var(--color-slate-500);
--color-primary: var(--color-teal-500);
--color-primary-hover: var(--color-teal-600);
--color-primary-active: var(--color-teal-700);
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
--color-btn-primary-text: var(--color-cream-50);
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
--color-error: var(--color-red-500);
--color-success: var(--color-teal-500);
--color-warning: var(--color-orange-500);
--color-info: var(--color-slate-500);
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

/* Common style patterns */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: 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='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: 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='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

/* RGB versions for opacity control */
--color-success-rgb: 33, 128, 141;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;

/* Typography */
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 24px;
--font-size-4xl: 30px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 550;
--font-weight-bold: 600;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--letter-spacing-tight: -0.01em;

/* Spacing */
--space-0: 0;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;

/* Border Radius */
--radius-sm: 6px;
--radius-base: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-full: 9999px;

/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

/* Layout */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
/* RGB versions for opacity control (Dark Mode) */
--color-gray-400-rgb: 119, 124, 124;
--color-teal-300-rgb: 50, 184, 198;
--color-gray-300-rgb: 167, 169, 169;
--color-gray-200-rgb: 245, 245, 245;

/* Background color tokens (Dark Mode) */
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */

/* Semantic Color Tokens (Dark Mode) */
--color-background: var(--color-charcoal-700);
--color-surface: var(--color-charcoal-800);
--color-text: var(--color-gray-200);
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
--color-primary: var(--color-teal-300);
--color-primary-hover: var(--color-teal-400);
--color-primary-active: var(--color-teal-800);
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
--color-error: var(--color-red-400);
--color-success: var(--color-teal-300);
--color-warning: var(--color-orange-400);
--color-info: var(--color-gray-300);
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
--color-btn-primary-text: var(--color-slate-900);
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

/* RGB versions for dark mode */
--color-success-rgb: var(--color-teal-300-rgb);
--color-error-rgb: var(--color-red-400-rgb);
--color-warning-rgb: var(--color-orange-400-rgb);
--color-info-rgb: var(--color-gray-300-rgb);
}
}

/* Theme overrides */
[data-color-scheme="light"] {
--color-background: var(--color-cream-50);
--color-surface: var(--color-cream-100);
--color-text: var(--color-slate-900);
--color-text-secondary: var(--color-slate-500);
--color-primary: var(--color-teal-500);
--color-primary-hover: var(--color-teal-600);
--color-primary-active: var(--color-teal-700);
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
--color-btn-primary-text: var(--color-cream-50);
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
--color-error: var(--color-red-500);
--color-success: var(--color-teal-500);
--color-warning: var(--color-orange-500);
--color-info: var(--color-slate-500);
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
--color-success-rgb: 33, 128, 141;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
}

[data-color-scheme="dark"] {
--color-background: var(--color-charcoal-700);
--color-surface: var(--color-charcoal-800);
--color-text: var(--color-gray-200);
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
--color-primary: var(--color-teal-300);
--color-primary-hover: var(--color-teal-400);
--color-primary-active: var(--color-teal-800);
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
--color-error: var(--color-red-400);
--color-success: var(--color-teal-300);
--color-warning: var(--color-orange-400);
--color-info: var(--color-gray-300);
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
--color-btn-primary-text: var(--color-slate-900);
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
--color-success-rgb: var(--color-teal-300-rgb);
--color-error-rgb: var(--color-red-400-rgb);
--color-warning-rgb: var(--color-orange-400-rgb);
--color-info-rgb: var(--color-gray-300-rgb);
}

/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-background);
overflow-x: hidden;
padding-bottom: 80px;
transition: background-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard);
}

/* Header */
.header {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-surface);
border-bottom: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-16) var(--space-20);
max-width: var(--container-xl);
margin: 0 auto;
}

.app-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin: 0;
}

.header-actions {
display: flex;
gap: var(--space-8);
align-items: center;
}

/* Enhanced Voice Button */
#voiceBtn {
padding: var(--space-12) var(--space-20) !important;
font-size: var(--font-size-lg) !important;
border-radius: var(--radius-full) !important;
position: relative;
min-width: 120px;
font-weight: var(--font-weight-semibold);
transition: all var(--duration-normal) var(--ease-standard);
}

#voiceBtn:hover {
transform: scale(1.05);
}

#voiceBtn.voice-recording {
background-color: var(--color-error) !important;
border-color: var(--color-error) !important;
animation: voicePulse 1.5s ease-in-out infinite;
box-shadow: 0 0 20px rgba(var(--color-error-rgb), 0.4);
}

@keyframes voicePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}

/* Quick Access Floating Menu */
.quick-access-menu {
position: fixed;
bottom: 100px;
right: 20px;
z-index: 200;
}

.quick-access-trigger {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-lg);
color: white;
transition: all var(--duration-normal) var(--ease-standard);
user-select: none;
}

.quick-access-trigger:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(var(--color-primary-rgb, var(--color-teal-500-rgb)), 0.4);
}

.quick-access-trigger svg {
width: 24px;
height: 24px;
}

.quick-access-items {
position: absolute;
bottom: 70px;
right: 0;
display: flex;
flex-direction: column;
gap: var(--space-12);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all var(--duration-normal) var(--ease-standard);
}

.quick-access-menu.active .quick-access-items {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.quick-access-menu.active .quick-access-trigger {
transform: rotate(45deg);
background: linear-gradient(135deg, var(--color-error), var(--color-red-400));
}

.quick-access-btn {
width: 50px;
height: 50px;
background-color: var(--color-surface);
border: 2px solid var(--color-primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-md);
color: var(--color-primary);
transition: all var(--duration-fast) var(--ease-standard);
text-decoration: none;
}

.quick-access-btn:hover {
background-color: var(--color-primary);
color: white;
transform: scale(1.1);
}

.quick-access-btn svg {
width: 20px;
height: 20px;
}

/* Main Content */
.main-content {
max-width: var(--container-xl);
margin: 0 auto;
padding: var(--space-20);
min-height: calc(100vh - 140px);
}

/* Tab System */
.tab-content {
display: none;
animation: fadeIn var(--duration-normal) var(--ease-standard);
}

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

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

.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-24);
flex-wrap: wrap;
gap: var(--space-16);
}

.tab-header h2 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0;
}

.tab-actions {
display: flex;
gap: var(--space-8);
align-items: center;
flex-wrap: wrap;
}

/* Dashboard Styles */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-20);
margin-bottom: var(--space-32);
}

.stat-card {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

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

.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-12);
}

.stat-header h3 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-tight);
margin: 0;
}

.stat-icon {
opacity: 0.7;
}

.stat-icon svg {
width: 20px;
height: 20px;
}

.stat-value {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-8);
line-height: var(--line-height-tight);
}

.stat-change {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

.stat-change.positive {
color: var(--color-success);
}

.stat-change.warning {
color: var(--color-warning);
}

.dashboard-section {
margin-bottom: var(--space-32);
}

.dashboard-section h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-16);
}

.action-buttons {
display: flex;
gap: var(--space-12);
flex-wrap: wrap;
}

.recent-activities {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-base);
padding: var(--space-16);
}

/* Inventory Stats */
.inventory-stats {
display: flex;
gap: var(--space-24);
margin-bottom: var(--space-20);
flex-wrap: wrap;
}

.inventory-stat {
text-align: center;
}

.inventory-stat h4 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}

.inventory-stat span {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}

/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-6);
padding: var(--space-8) var(--space-16);
border: 1px solid transparent;
border-radius: var(--radius-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
white-space: nowrap;
user-select: none;
background: none;
}

.btn svg {
width: 16px;
height: 16px;
}

.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}

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

.btn-primary:hover:not(:disabled) {
background-color: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}

.btn-primary:active:not(:disabled) {
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
}

.btn-secondary {
background-color: var(--color-secondary);
color: var(--color-text);
border-color: rgba(var(--color-brown-600-rgb), 0.2);
}

.btn-secondary:hover:not(:disabled) {
background-color: var(--color-secondary-hover);
}

.btn-secondary:active:not(:disabled) {
background-color: var(--color-secondary-active);
}

.btn-success {
background-color: var(--color-success);
color: var(--color-btn-primary-text);
border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
background-color: var(--color-success);
opacity: 0.9;
}

.btn-outline {
background-color: transparent;
color: var(--color-text);
border-color: var(--color-border);
}

.btn-outline:hover:not(:disabled) {
background-color: var(--color-secondary);
}

.btn-danger {
background-color: var(--color-error);
color: var(--color-white);
border-color: var(--color-error);
}

.btn-danger:hover:not(:disabled) {
background-color: var(--color-error);
opacity: 0.9;
}

/* Forms */
.filters-section {
display: flex;
gap: var(--space-12);
margin-bottom: var(--space-20);
flex-wrap: wrap;
}

.search-input,
.filter-select,
.form-control {
padding: var(--space-8) var(--space-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
font-size: var(--font-size-sm);
color: var(--color-text);
background-color: var(--color-surface);
transition: border-color var(--duration-fast) var(--ease-standard);
min-width: 200px;
}

.search-input:focus,
.filter-select:focus,
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
}

.filter-select {
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-8) center;
background-size: 16px;
padding-right: var(--space-32);
cursor: pointer;
}

[data-color-scheme="dark"] .filter-select {
background-image: var(--select-caret-dark);
}

/* Tables */
.table-container {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}

.data-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}

.data-table th,
.data-table td {
text-align: left;
padding: var(--space-12) var(--space-16);
border-bottom: 1px solid var(--color-card-border-inner);
}

.data-table th {
background-color: rgba(var(--color-brown-600-rgb), 0.05);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-tight);
}

.data-table tbody tr:hover {
background-color: rgba(var(--color-primary-rgb, var(--color-teal-500-rgb)), 0.03);
}

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

.data-table .actions {
display: flex;
gap: var(--space-4);
}

.data-table .btn {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-xs);
}

/* Cart Styles */
.cart-content {
padding: var(--space-20);
}

.cart-customer-select {
margin-bottom: var(--space-16);
}

.cart-customer-select label {
display: block;
margin-bottom: var(--space-4);
font-weight: var(--font-weight-medium);
}

.cart-product-add {
margin-bottom: var(--space-24);
}

.cart-items h4 {
margin-bottom: var(--space-12);
}

.cart-total {
border-top: 2px solid var(--color-card-border);
padding-top: var(--space-16);
margin-top: var(--space-16);
}

/* AI Chat Styles */
.ai-chat-content {
display: flex;
flex-direction: column;
height: 500px;
}

.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: var(--space-16);
border-bottom: 1px solid var(--color-card-border);
}

.ai-message,
.user-message {
display: flex;
gap: var(--space-12);
margin-bottom: var(--space-16);
}

.user-message {
flex-direction: row-reverse;
}

.message-avatar {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}

.user-message .message-avatar {
background-color: var(--color-secondary);
color: var(--color-text);
}

.message-avatar svg {
width: 20px;
height: 20px;
}

.message-content {
background-color: var(--color-bg-1);
border-radius: var(--radius-base);
padding: var(--space-12);
max-width: 70%;
}

.user-message .message-content {
background-color: var(--color-primary);
color: var(--color-btn-primary-text);
}

.message-content p {
margin: 0 0 var(--space-8) 0;
}

.message-content p:last-child {
margin-bottom: 0;
}

.message-content ul {
margin: var(--space-8) 0;
padding-left: var(--space-20);
}

.message-content li {
margin-bottom: var(--space-4);
}

.ai-chat-input {
padding: var(--space-16);
}

.ai-loading {
display: flex;
align-items: center;
gap: var(--space-8);
color: var(--color-text-secondary);
font-style: italic;
}

.ai-loading .loading-dots {
display: inline-flex;
gap: var(--space-2);
}

.ai-loading .loading-dots span {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--color-primary);
animation: loadingDots 1.4s ease-in-out infinite both;
}

.ai-loading .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-loading .loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDots {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}

/* Bottom Navigation */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--color-surface);
border-top: 1px solid var(--color-card-border);
padding: var(--space-8) var(--space-16);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 100;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-base);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
min-width: 60px;
text-decoration: none;
color: var(--color-text-secondary);
}

.nav-item:hover {
background-color: var(--color-secondary);
color: var(--color-text);
}

.nav-item.active {
background-color: rgba(var(--color-teal-500-rgb), 0.15);
color: var(--color-primary);
}

.nav-icon {
margin-bottom: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
}

.nav-icon svg {
width: 20px;
height: 20px;
}

.nav-label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
text-align: center;
}

/* Modals */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-16);
}

.modal-overlay.hidden {
display: none;
}

.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 2000;
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
width: 500px;
}

.modal.large {
width: 800px;
max-width: 95vw;
}

.modal-content {
padding: 0;
}

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

.modal-header h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0;
}

.modal-close {
background: none;
border: none;
font-size: var(--font-size-2xl);
cursor: pointer;
color: var(--color-text-secondary);
padding: var(--space-4);
border-radius: var(--radius-sm);
transition: all var(--duration-fast) var(--ease-standard);
}

.modal-close:hover {
background-color: var(--color-secondary);
color: var(--color-text);
}

.modal form {
padding: var(--space-20);
}

.modal-actions {
display: flex;
gap: var(--space-8);
justify-content: flex-end;
margin-top: var(--space-16);
}

.form-group {
margin-bottom: var(--space-16);
}

.form-group label {
display: block;
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--space-8) var(--space-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
font-size: var(--font-size-sm);
color: var(--color-text);
background-color: var(--color-surface);
transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--focus-ring);
}

.form-group select {
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-8) center;
background-size: 16px;
padding-right: var(--space-32);
cursor: pointer;
}

[data-color-scheme="dark"] .form-group select {
background-image: var(--select-caret-dark);
}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}

/* Chart Container - Fixed Zoom Issue */
.chart-container {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
margin-bottom: var(--space-20);
box-shadow: var(--shadow-sm);
position: relative;
height: 400px; /* Fixed height to prevent zoom */
}

.chart-container canvas {
max-width: 100% !important;
max-height: 350px !important; /* Prevent oversizing */
width: auto !important;
height: auto !important;
}

.chart-insights {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
box-shadow: var(--shadow-sm);
}

/* Bill Content Styles */
.bill-content {
padding: var(--space-20);
background-color: var(--color-surface);
font-family: 'Courier New', monospace;
}

.bill-header {
text-align: center;
margin-bottom: var(--space-24);
border-bottom: 2px solid var(--color-primary);
padding-bottom: var(--space-16);
}

.bill-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary);
margin-bottom: var(--space-8);
}

.bill-store-info {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.4;
}

.bill-meta {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-24);
padding: var(--space-16);
background-color: var(--color-bg-1);
border-radius: var(--radius-base);
}

.bill-meta-section h4 {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-text);
margin-bottom: var(--space-8);
}

.bill-meta-section p {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: var(--space-2) 0;
}

.bill-items {
margin-bottom: var(--space-24);
}

.bill-items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-16);
}

.bill-items-table th,
.bill-items-table td {
text-align: left;
padding: var(--space-8) var(--space-12);
border-bottom: 1px solid var(--color-card-border);
}

.bill-items-table th {
background-color: var(--color-bg-2);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}

.bill-items-table td:last-child,
.bill-items-table th:last-child {
text-align: right;
}

.bill-total {
text-align: right;
padding: var(--space-16);
background-color: var(--color-bg-3);
border-radius: var(--radius-base);
margin-bottom: var(--space-24);
}

.bill-total-line {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
}

.bill-total-line.total {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
border-top: 2px solid var(--color-primary);
padding-top: var(--space-8);
margin-top: var(--space-8);
}

.bill-footer {
text-align: center;
padding-top: var(--space-16);
border-top: 1px solid var(--color-card-border);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}

/* Settings Grid */
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-24);
}

.setting-section {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
box-shadow: var(--shadow-sm);
}

.setting-section h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin-bottom: var(--space-16);
}

.setting-actions {
display: flex;
flex-direction: column;
gap: var(--space-8);
}

/* Toast Notifications */
.toast-container {
position: fixed;
top: 80px;
right: var(--space-16);
z-index: 3000;
display: flex;
flex-direction: column;
gap: var(--space-8);
}

.toast {
background-color: var(--color-surface);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-base);
padding: var(--space-12) var(--space-16);
box-shadow: var(--shadow-lg);
min-width: 300px;
animation: slideIn 0.3s ease-out;
position: relative;
}

.toast.success {
border-left: 4px solid var(--color-success);
}

.toast.error {
border-left: 4px solid var(--color-error);
}

.toast.warning {
border-left: 4px solid var(--color-warning);
}

.toast.info {
border-left: 4px solid var(--color-info);
}

.toast-message {
color: var(--color-text);
margin: 0;
}

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

/* Voice Recognition Status */
.voice-recording {
animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

/* Responsive Design */
@media (max-width: 768px) {
.header-content {
padding: 0 var(--space-12);
}

.app-title {
font-size: var(--font-size-2xl);
}

.main-content {
padding: var(--space-16) var(--space-12);
}

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

.tab-actions {
justify-content: stretch;
}

.tab-actions > * {
flex: 1;
min-width: 0;
}

.dashboard-grid {
grid-template-columns: 1fr;
}

.action-buttons {
flex-direction: column;
}

.action-buttons .btn {
width: 100%;
}

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

.setting-actions {
flex-direction: column;
}

.table-container {
overflow-x: auto;
}

.data-table {
min-width: 600px;
}

.modal {
margin: var(--space-8);
max-width: none;
width: auto;
}

.modal-actions {
flex-direction: column-reverse;
}

.modal-actions .btn {
width: 100%;
}

.toast-container {
right: var(--space-8);
left: var(--space-8);
}

.toast {
min-width: auto;
}

.nav-label {
font-size: 10px;
}

.nav-icon svg {
width: 18px;
height: 18px;
}

.form-row {
grid-template-columns: 1fr;
}

.quick-access-menu {
bottom: 80px;
right: 10px;
}

.quick-access-trigger {
width: 50px;
height: 50px;
}

.quick-access-trigger svg {
width: 20px;
height: 20px;
}

.quick-access-btn {
width: 40px;
height: 40px;
}

.quick-access-btn svg {
width: 16px;
height: 16px;
}

.chart-container {
height: 300px;
}

.chart-container canvas {
max-height: 250px !important;
}

.ai-chat-content {
height: 400px;
}
}

@media (max-width: 480px) {
.bottom-nav {
padding: var(--space-4) var(--space-2);
}

.nav-item {
min-width: 50px;
padding: var(--space-6) var(--space-2);
}

.nav-label {
display: none;
}

body {
padding-bottom: 60px;
}

#voiceBtn {
min-width: 100px;
padding: var(--space-8) var(--space-16) !important;
}

.chart-container {
height: 250px;
padding: var(--space-12);
}

.chart-container canvas {
max-height: 200px !important;
}

.ai-chat-content {
height: 350px;
}
}

/* Loading States */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid var(--color-border);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

.btn.loading {
position: relative;
color: transparent;
}

.btn.loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spin 1s ease-in-out infinite;
}

/* Empty States */
.empty-state {
text-align: center;
padding: var(--space-32);
color: var(--color-text-secondary);
}

.empty-state-icon {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-16);
opacity: 0.5;
}

.empty-state-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-8);
color: var(--color-text);
}

.empty-state-description {
margin-bottom: var(--space-16);
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
.bottom-nav {
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.nav-item.active {
background-color: rgba(var(--color-teal-300-rgb), 0.15);
}
}

[data-color-scheme="dark"] .bottom-nav {
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-color-scheme="dark"] .nav-item.active {
background-color: rgba(var(--color-teal-300-rgb), 0.15);
}

/* Print styles for bills */
@media print {
body * {
visibility: hidden;
}

.bill-content,
.bill-content * {
visibility: visible;
}

.bill-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: white !important;
color: black !important;
}

.modal-actions {
display: none;
}
}