/**
 * Ultimate POS - Clean Material Theme v11
 * 
 * DESIGN: Clean, minimal, professional, Google Material
 * NO: Shadows, gradients, multi-colors, hover animations
 */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f1f3f4;
    --bg-hover: #e8eaed;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --text-muted: #80868b;
    --border-color: #dadce0;
    --border-light: #e8eaed;
    --accent: #1a73e8;
    --accent-light: #e8f0fe;
    --accent-hover: #1557b0;
    --success: #34a853;
    --warning: #fbbc04;
    --danger: #ea4335;
    --info: #4285f4;
}

html.dark-mode, body.dark-mode, .dark-mode {
    --bg-primary: #202124;
    --bg-secondary: #292a2d;
    --bg-tertiary: #35363a;
    --bg-hover: #3c4043;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted: #80868b;
    --border-color: #3c4043;
    --border-light: #35363a;
    --accent: #8ab4f8;
    --accent-light: #303134;
    --accent-hover: #aecbfa;
}

body {
    font-family: 'Google Sans', 'Roboto', -apple-system, sans-serif !important;
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Login */
.login-page { background: var(--bg-secondary) !important; }
.login-box-body { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; padding: 40px !important; box-shadow: none !important; }
.login-box-body label { color: var(--text-secondary) !important; font-weight: 500 !important; }
.login-box-body .form-control { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; color: var(--text-primary) !important; box-shadow: none !important; }
.login-box-body .form-control:focus { border-color: var(--accent) !important; box-shadow: none !important; }
.login-box-body .btn-primary { background: var(--accent) !important; border: none !important; border-radius: 4px !important; box-shadow: none !important; }

/* Dark mode base */
.dark-mode { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.dark-mode body, .dark-mode .wrapper, .dark-mode .content-wrapper, .dark-mode main, .dark-mode #scrollable-container, .dark-mode .tw-bg-gray-100 { background: var(--bg-secondary) !important; }

/* Sidebar */
.side-bar { background: var(--bg-primary) !important; border-right: 1px solid var(--border-color) !important; box-shadow: none !important; }
.sidebar-menu > li > a { color: var(--text-secondary) !important; padding: 12px 16px !important; }
.sidebar-menu > li > a:hover { background: var(--bg-hover) !important; }
.sidebar-menu > li.active > a { background: var(--accent-light) !important; color: var(--accent) !important; border-left: 3px solid var(--accent) !important; }
.dark-mode .side-bar { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }
.dark-mode .sidebar-menu > li > a { color: var(--text-secondary) !important; }
.dark-mode .sidebar-menu > li.active > a { background: var(--accent-light) !important; color: var(--accent) !important; }

/* Cards */
.box, .card, .panel, .tw-bg-white, [class*="tw-bg-white"] { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: none !important; }
.box-header, .card-header { background: transparent !important; border-bottom: 1px solid var(--border-color) !important; }
.box-title, .card-title { color: var(--text-primary) !important; font-weight: 500 !important; }
.dark-mode .box, .dark-mode .card, .dark-mode .tw-bg-white, .dark-mode [class*="tw-bg-white"] { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* Stat cards - NO colored borders, NO hover effects */
.tw-grid > div { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: none !important; }
.tw-grid > div:hover { transform: none !important; box-shadow: none !important; }
.tw-text-gray-900 { color: var(--text-primary) !important; }
.tw-text-gray-500 { color: var(--text-secondary) !important; }

/* Icons - single color */
.tw-bg-sky-100, .tw-bg-green-100, .tw-bg-yellow-100, .tw-bg-red-100 { background: var(--accent-light) !important; box-shadow: none !important; }
.tw-bg-sky-100 svg, .tw-bg-green-100 svg, .tw-bg-yellow-100 svg, .tw-bg-red-100 svg { color: var(--accent) !important; stroke: var(--accent) !important; }

/* Section titles */
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: var(--text-primary) !important; }
.dark-mode .tw-text-primary-800, .dark-mode [class*="tw-text-primary"] { color: var(--accent) !important; }

/* Tables */
.table, table { background: var(--bg-primary) !important; }
.table thead th { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; font-weight: 500 !important; font-size: 12px !important; text-transform: uppercase !important; border-bottom: 1px solid var(--border-color) !important; }
.table tbody td { color: var(--text-primary) !important; border-bottom: 1px solid var(--border-light) !important; background: var(--bg-primary) !important; }
.table tbody tr:nth-of-type(odd) td { background: var(--bg-secondary) !important; }
.table tbody tr:hover td { background: var(--bg-hover) !important; }
.dark-mode .table thead th { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }
.dark-mode .table tbody td { background: var(--bg-primary) !important; border-color: var(--border-light) !important; }
.dark-mode .table tbody tr:nth-of-type(odd) td { background: var(--bg-secondary) !important; }

/* Forms */
.form-control, input, textarea, select { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; color: var(--text-primary) !important; box-shadow: none !important; }
.form-control:focus { border-color: var(--accent) !important; box-shadow: none !important; }
.dark-mode .form-control, .dark-mode input, .dark-mode textarea, .dark-mode select { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
label { color: var(--text-secondary) !important; font-weight: 500 !important; }
.dark-mode label { color: var(--text-secondary) !important; }

/* Select2 */
.select2-container--default .select2-selection--single { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; box-shadow: none !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary) !important; }
.select2-dropdown { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; }
.dark-mode .select2-container--default .select2-selection--single { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }
.dark-mode .select2-dropdown { background: var(--bg-primary) !important; }

/* Buttons - flat */
.btn { border-radius: 4px !important; font-weight: 500 !important; box-shadow: none !important; }
.btn:hover { transform: none !important; box-shadow: none !important; }
.btn-primary { background: var(--accent) !important; border: none !important; }
.btn-primary:hover { background: var(--accent-hover) !important; }
.btn-success { background: var(--success) !important; border: none !important; }
.btn-danger { background: var(--danger) !important; border: none !important; }
.btn-warning { background: var(--warning) !important; color: #202124 !important; border: none !important; }
.btn-info { background: var(--info) !important; border: none !important; }
.btn-default { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; }

/* POS Header */
.pos-header { background: var(--bg-primary) !important; border-bottom: 1px solid var(--border-color) !important; border-radius: 0 !important; box-shadow: none !important; }
.pos-header button, .pos-header a { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: 4px !important; box-shadow: none !important; }
.pos-header button:hover { background: var(--bg-hover) !important; transform: none !important; }
.pos-header .tw-text-gray-600, .pos-header i, .pos-header span, .pos-header strong, .pos-header p { color: var(--text-secondary) !important; }
.pos-header .curr_datetime { background: var(--accent) !important; color: white !important; border-radius: 4px !important; }
.dark-mode .pos-header { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }
.dark-mode .pos-header button { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }

/* POS Form */
.pos-form, #pos_form { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: none !important; }
.dark-mode .pos-form, .dark-mode #pos_form { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* POS Table */
#pos_table thead th { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; font-weight: 500 !important; font-size: 12px !important; text-transform: uppercase !important; border: none !important; }
#pos_table tbody td { background: var(--bg-primary) !important; color: var(--text-primary) !important; border-bottom: 1px solid var(--border-light) !important; }
.dark-mode #pos_table thead th { background: var(--bg-tertiary) !important; }
.dark-mode #pos_table tbody td { background: var(--bg-primary) !important; border-color: var(--border-light) !important; }

/* POS Totals */
.pos_form_totals { background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; }
.pos_form_totals b, .pos_form_totals span { color: var(--text-primary) !important; }
.dark-mode .pos_form_totals { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }

/* POS Actions */
.pos-form-actions { background: var(--bg-primary) !important; border-top: 1px solid var(--border-color) !important; box-shadow: none !important; }
.pos-form-actions button:hover { transform: none !important; box-shadow: none !important; }
.pos-form-actions .btn-default { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border-color) !important; }
.dark-mode .pos-form-actions { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* POS Products - no hover animation */
.product_box { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: none !important; }
.product_box:hover { border-color: var(--accent) !important; transform: none !important; box-shadow: none !important; }
.product_box .text { color: var(--text-primary) !important; font-weight: 500 !important; }
.product_box small { color: var(--text-secondary) !important; }
.dark-mode .product_box { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* Category button */
[class*="tw-bg-primary-700"] { background: var(--accent) !important; box-shadow: none !important; }

/* Modals */
.modal-content { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; }
.modal-header, .modal-footer { border-color: var(--border-color) !important; }
.modal-title { color: var(--text-primary) !important; }
.dark-mode .modal-content { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* Dropdowns */
.dropdown-menu { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; }
.dropdown-menu > li > a { color: var(--text-secondary) !important; }
.dropdown-menu > li > a:hover { background: var(--bg-hover) !important; }
.dark-mode .dropdown-menu { background: var(--bg-primary) !important; border-color: var(--border-color) !important; }

/* Alerts */
.alert { border-radius: 4px !important; border: none !important; box-shadow: none !important; }
.alert-success { background: #e6f4ea !important; color: #1e8e3e !important; }
.alert-danger { background: #fce8e6 !important; color: #d93025 !important; }
.dark-mode .alert-success { background: #1b3626 !important; color: #81c995 !important; }
.dark-mode .alert-danger { background: #3d2323 !important; color: #f28b82 !important; }

/* Theme toggle */
#theme-toggle, .theme-toggle-btn { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--bg-secondary) !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; }
#theme-toggle svg { width: 20px !important; height: 20px !important; color: var(--text-secondary) !important; stroke: var(--text-secondary) !important; }
.theme-sun-icon { display: block; }
.theme-moon-icon { display: none; }
.dark-mode .theme-sun-icon { display: none !important; }
.dark-mode .theme-moon-icon { display: block !important; }
.dark-mode #theme-toggle { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }

/* Charts */
.dark-mode .apexcharts-text { fill: var(--text-secondary) !important; }
.dark-mode .apexcharts-gridline { stroke: var(--border-color) !important; }

/* Pagination */
.pagination > li > a { background: var(--bg-primary) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; border-radius: 4px !important; }
.pagination > li.active > a { background: var(--accent) !important; border-color: var(--accent) !important; color: white !important; }
.dark-mode .pagination > li > a { background: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }

@media print { .no-print, #theme-toggle, .side-bar { display: none !important; } }