/* Dark Mode CSS Variables - Shared across all pages */
:root { 
    --f7-primary: #667eea;
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --text-primary: #000000;
    --text-secondary: #888888;
    --border-color: #f0f0f0;
    --card-shadow: rgba(0,0,0,0.06);
    --navbar-gradient-start: #667eea;
    --navbar-gradient-end: #764ba2;
}

/* Dark Mode Variables */
body.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --border-color: #2a2a3e;
    --card-shadow: rgba(0,0,0,0.3);
    --navbar-gradient-start: #4a5568;
    --navbar-gradient-end: #2d3748;
}

/* Apply theme transitions */
body {
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode navbar */
body.dark-mode .navbar,
body.dark-mode .navbar-inner {
    background: linear-gradient(135deg, var(--navbar-gradient-start) 0%, var(--navbar-gradient-end) 100%) !important;
}

/* Dark mode page */
body.dark-mode .page,
body.dark-mode .page-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode cards */
body.dark-mode .card,
body.dark-mode .list,
body.dark-mode .block,
body.dark-mode .settings-group,
body.dark-mode .stat-card,
body.dark-mode .order-card,
body.dark-mode .table-card,
body.dark-mode .menu-card {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 8px var(--card-shadow) !important;
}

/* Dark mode list items */
body.dark-mode .list-item,
body.dark-mode .settings-item,
body.dark-mode .order-item {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .list-item:active,
body.dark-mode .settings-item:active {
    background: #1f2937 !important;
}

/* Dark mode text */
body.dark-mode .settings-label,
body.dark-mode .card-title,
body.dark-mode .stat-label,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: var(--text-primary) !important;
}

body.dark-mode .settings-value,
body.dark-mode .stat-value,
body.dark-mode .text-muted,
body.dark-mode .settings-group-title {
    color: var(--text-secondary) !important;
}

/* Dark mode icons */
body.dark-mode .settings-icon,
body.dark-mode .stat-icon {
    background: var(--bg-primary) !important;
}

/* Dark mode inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode tables */
body.dark-mode table {
    color: var(--text-primary) !important;
}

body.dark-mode table thead {
    background: var(--bg-primary) !important;
}

body.dark-mode table tbody tr {
    border-color: var(--border-color) !important;
}

body.dark-mode table tbody tr:hover {
    background: #1f2937 !important;
}

/* Dark mode modals */
body.dark-mode .modal,
body.dark-mode .popup {
    background: var(--bg-secondary) !important;
}

body.dark-mode .modal-header,
body.dark-mode .popup-header {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode Chart.js tooltips */
body.dark-mode .chartjs-tooltip {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode Swiper */
body.dark-mode .swiper-slide {
    background: var(--bg-secondary) !important;
}

/* Dark mode report cards */
body.dark-mode .report-card {
    opacity: 0.95;
}

/* Dark mode stat cards and values */
body.dark-mode .stat-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .stat-label,
body.dark-mode .stats-date {
    color: var(--text-secondary) !important;
}

body.dark-mode .stat-value {
    filter: brightness(1.2);
}

/* Dark mode tile elements */
body.dark-mode .tile-title {
    color: var(--text-primary) !important;
}

body.dark-mode .tile-subtitle {
    color: var(--text-secondary) !important;
}

/* Dark mode navbar buttons */
body.dark-mode .nav-btn {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .nav-btn:hover {
    background: var(--border-color) !important;
}

body.dark-mode .nav-brand {
    color: var(--text-primary) !important;
}

/* Dark mode order history specific */
body.dark-mode .order-card {
    background: var(--bg-secondary) !important;
    box-shadow: 0 2px 8px var(--card-shadow) !important;
}

body.dark-mode .order-header {
    background: var(--bg-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .order-id,
body.dark-mode .order-item-name {
    color: var(--text-primary) !important;
}

body.dark-mode .order-table,
body.dark-mode .order-time,
body.dark-mode .order-item-qty,
body.dark-mode .empty-state {
    color: var(--text-secondary) !important;
}

body.dark-mode .order-footer {
    border-top-color: var(--border-color) !important;
}

body.dark-mode .filter-btn {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .filter-btn.active {
    background: #f59e0b !important;
    color: white !important;
}

body.dark-mode .search-input {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode orders page specific */
body.dark-mode .menu-panel,
body.dark-mode .cart-panel,
body.dark-mode .categories-bar {
    background: var(--bg-secondary) !important;
}

body.dark-mode .search-bar,
body.dark-mode .cart-items {
    background: var(--bg-primary) !important;
}

body.dark-mode .menu-item-card,
body.dark-mode .cart-item,
body.dark-mode .category-chip {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .menu-item-name,
body.dark-mode .cart-item-name,
body.dark-mode .cart-item-price,
body.dark-mode .category-chip {
    color: var(--text-primary) !important;
}

body.dark-mode .cart-item-note,
body.dark-mode .cart-empty {
    color: var(--text-secondary) !important;
}

/* Dark mode cart summary and actions */
body.dark-mode .cart-summary {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

body.dark-mode .summary-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .summary-value,
body.dark-mode .summary-total .summary-label,
body.dark-mode .summary-total .summary-value {
    color: var(--text-primary) !important;
}

body.dark-mode .summary-total {
    border-top-color: var(--border-color) !important;
}

body.dark-mode .item-action-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .item-action-btn:hover {
    background: var(--bg-primary) !important;
}

body.dark-mode .btn-clear {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .cart-item-actions {
    border-top-color: var(--border-color) !important;
}

/* Dark mode select/dropdown fix */
body.dark-mode select,
body.dark-mode .table-selector {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode select option,
body.dark-mode .table-selector option {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark mode menu management specific */
body.dark-mode .menu-item {
    background: var(--bg-secondary) !important;
    box-shadow: 0 2px 8px var(--card-shadow) !important;
}

body.dark-mode .menu-item-icon {
    background: var(--bg-primary) !important;
}

body.dark-mode .menu-item-name {
    color: var(--text-primary) !important;
}

body.dark-mode .menu-item-category {
    color: var(--text-secondary) !important;
}

body.dark-mode .menu-item.unavailable {
    background: var(--bg-primary) !important;
}

body.dark-mode .category-tab {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .category-tab.active {
    background: #8b5cf6 !important;
    color: white !important;
}

body.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
}

body.dark-mode .modal-title,
body.dark-mode .form-label {
    color: var(--text-primary) !important;
}

body.dark-mode .form-input,
body.dark-mode .form-select {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .modal-btn.cancel {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

/* Dark mode reports page specific */
body.dark-mode .period-btn {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .period-btn.active {
    background: #667eea !important;
    color: white !important;
}

body.dark-mode .stat-card,
body.dark-mode .chart-container,
body.dark-mode .top-items,
body.dark-mode .detailed-reports {
    background: var(--bg-secondary) !important;
    box-shadow: 0 2px 8px var(--card-shadow) !important;
}

body.dark-mode .stat-label,
body.dark-mode .top-item-count,
body.dark-mode .modal-body {
    color: var(--text-secondary) !important;
}

body.dark-mode .chart-title,
body.dark-mode .section-title,
body.dark-mode .top-item-name,
body.dark-mode .modal-title {
    color: var(--text-primary) !important;
}

body.dark-mode .top-item,
body.dark-mode .section-title {
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .modal-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .modal-body h3 {
    color: var(--text-primary) !important;
}
/* Dark mode inventory page specific */
body.dark-mode .stat-chip {
    background: var(--bg-secondary) !important;
    box-shadow: var(--card-shadow) !important;
}

body.dark-mode .stat-chip-value {
    color: var(--text-primary) !important;
}

body.dark-mode .stat-chip-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .search-input {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .inventory-item {
    background: var(--bg-secondary) !important;
    box-shadow: var(--card-shadow) !important;
}

body.dark-mode .item-name {
    color: var(--text-primary) !important;
}

body.dark-mode .item-category {
    color: var(--text-secondary) !important;
}

body.dark-mode .stock-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
}

body.dark-mode .modal-title {
    color: var(--text-primary) !important;
}

body.dark-mode .form-label {
    color: var(--text-primary) !important;
}

body.dark-mode .form-input {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dark mode staff page specific */
body.dark-mode .staff-card {
    background: var(--bg-secondary) !important;
    box-shadow: var(--card-shadow) !important;
}

body.dark-mode .staff-name {
    color: var(--text-primary) !important;
}

body.dark-mode .staff-role {
    color: var(--text-secondary) !important;
}

body.dark-mode .staff-details {
    border-top-color: var(--border-color) !important;
}

body.dark-mode .detail-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .detail-value {
    color: var(--text-primary) !important;
}

body.dark-mode .staff-actions {
    border-top-color: var(--border-color) !important;
}

body.dark-mode .form-select {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}