/* =====================================================
   DARK MODE STYLES - NaviPos Online
   ===================================================== */

:root {
    /* Light Mode Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f9fafb;
    --color-bg-tertiary: #f3f4f6;
    --color-text-primary: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;

    /* Card & Panel Colors */
    --color-card-bg: #ffffff;
    --color-card-border: #e5e7eb;
    --color-card-shadow: rgba(0, 0, 0, 0.05);

    /* Sidebar Colors */
    --color-sidebar-bg: #ffffff;
    --color-sidebar-text: #374151;
    --color-sidebar-hover: #f3f4f6;
    --color-sidebar-active: #f0f9ff;

    /* Header Colors */
    --color-header-bg: #ffffff;
    --color-header-text: #1f2937;

    /* Input Colors */
    --color-input-bg: #ffffff;
    --color-input-text: #374151;
    --color-input-border: #d1d5db;
    --color-input-focus: #0891b2;
}

/* Dark Mode */
html[data-theme="dark"],
body.dark-mode {
    --color-bg-primary: #111827;
    --color-bg-secondary: #1f2937;
    --color-bg-tertiary: #374151;
    --color-text-primary: #f3f4f6;
    --color-text-secondary: #d1d5db;
    --color-text-tertiary: #9ca3af;
    --color-border: #374151;
    --color-border-light: #1f2937;

    /* Card & Panel Colors */
    --color-card-bg: #1f2937;
    --color-card-border: #374151;
    --color-card-shadow: rgba(0, 0, 0, 0.3);

    /* Sidebar Colors */
    --color-sidebar-bg: #111827;
    --color-sidebar-text: #d1d5db;
    --color-sidebar-hover: #374151;
    --color-sidebar-active: #064e5a;
    --color-sidebar-section-bg: #1f2937;
    --color-sidebar-section-text: #f3f4f6;

    /* Header Colors */
    --color-header-bg: #1f2937;
    --color-header-text: #f3f4f6;

    /* Input Colors */
    --color-input-bg: #374151;
    --color-input-text: #f3f4f6;
    --color-input-border: #4b5563;
    --color-input-focus: #06b6d4;
}

/* =====================================================
   BACKGROUND & TEXT COLORS
   ===================================================== */

html[data-theme="dark"],
body.dark-mode {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

html[data-theme="dark"] body,
body.dark-mode {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* =====================================================
   CARD & CONTAINER STYLES
   ===================================================== */

html[data-theme="dark"] .card,
body.dark-mode .card {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    box-shadow: 0 1px 3px var(--color-card-shadow);
}

html[data-theme="dark"] .card-header,
body.dark-mode .card-header {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
}

html[data-theme="dark"] .card-title,
body.dark-mode .card-title {
    color: var(--color-text-primary);
}

html[data-theme="dark"] .card-body,
body.dark-mode .card-body {
    background-color: var(--color-card-bg);
}

/* =====================================================
   SIDEBAR STYLES
   ===================================================== */

html[data-theme="dark"] .sidebar,
body.dark-mode .sidebar {
    background-color: var(--color-sidebar-bg);
    border-right-color: var(--color-border);
}

html[data-theme="dark"] .sidebar-nav-item,
body.dark-mode .sidebar-nav-item {
    color: var(--color-sidebar-text);
}

html[data-theme="dark"] .sidebar-nav-item:hover,
body.dark-mode .sidebar-nav-item:hover {
    background-color: var(--color-sidebar-hover);
}

html[data-theme="dark"] .sidebar-nav-item.active,
body.dark-mode .sidebar-nav-item.active {
    background-color: var(--color-sidebar-active);
    color: #06b6d4;
}

html[data-theme="dark"] .sidebar-user,
body.dark-mode .sidebar-user {
    background-color: var(--color-sidebar-section-bg);
    border-bottom-color: #374151;
}

html[data-theme="dark"] .sidebar-user-avatar,
body.dark-mode .sidebar-user-avatar {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

html[data-theme="dark"] .sidebar-user-info h3,
body.dark-mode .sidebar-user-info h3 {
    color: var(--color-sidebar-section-text);
}

html[data-theme="dark"] .sidebar-user-info p,
body.dark-mode .sidebar-user-info p {
    color: var(--color-sidebar-text);
}

html[data-theme="dark"] .sidebar-user-logout,
body.dark-mode .sidebar-user-logout {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--color-sidebar-text);
}

html[data-theme="dark"] .sidebar-user-logout:hover,
body.dark-mode .sidebar-user-logout:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

/* =====================================================
   HEADER & NAVBAR
   ===================================================== */

html[data-theme="dark"] .top-navbar,
body.dark-mode .top-navbar {
    background-color: var(--color-header-bg);
    border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .navbar-btn,
body.dark-mode .navbar-btn {
    color: var(--color-text-primary);
}

html[data-theme="dark"] .navbar-btn:hover,
body.dark-mode .navbar-btn:hover {
    background-color: var(--color-bg-tertiary);
}

/* =====================================================
   FORM ELEMENTS
   ===================================================== */

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
body.dark-mode .form-control,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
    border-color: var(--color-input-border);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--color-input-focus);
    background-color: var(--color-input-bg);
    color: var(--color-input-text);
}

html[data-theme="dark"] label,
body.dark-mode label {
    color: var(--color-text-primary);
}

/* =====================================================
   TABLES
   ===================================================== */

html[data-theme="dark"] table,
body.dark-mode table {
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
}

html[data-theme="dark"] thead,
body.dark-mode thead {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

html[data-theme="dark"] tbody tr,
body.dark-mode tbody tr {
    border-bottom-color: var(--color-border);
}

html[data-theme="dark"] tbody tr:hover,
body.dark-mode tbody tr:hover {
    background-color: var(--color-bg-tertiary);
}

/* =====================================================
   BUTTONS
   ===================================================== */

html[data-theme="dark"] .btn-outline,
body.dark-mode .btn-outline {
    color: var(--color-text-primary);
    border-color: var(--color-border);
    background-color: transparent;
}

html[data-theme="dark"] .btn-outline:hover,
body.dark-mode .btn-outline:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-border);
}

/* =====================================================
   DROPDOWNS & MODALS
   ===================================================== */

html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal,
body.dark-mode .dropdown-menu,
body.dark-mode .modal {
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
}

html[data-theme="dark"] .modal-header,
body.dark-mode .modal-header {
    background-color: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .sidebar-widget,
body.dark-mode .sidebar-widget {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
}

html[data-theme="dark"] .sidebar-widget-header,
body.dark-mode .sidebar-widget-header {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .sidebar-widget-nav-item,
body.dark-mode .sidebar-widget-nav-item {
    color: var(--color-sidebar-text);
}

html[data-theme="dark"] .sidebar-widget-nav-item:hover,
body.dark-mode .sidebar-widget-nav-item:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

html[data-theme="dark"] .sidebar-widget-nav-item.active,
body.dark-mode .sidebar-widget-nav-item.active {
    color: #0891b2;
    border-left-color: #0891b2;
}

/* Payment Method & Server Performance Widgets */
html[data-theme="dark"] .payment-method-name,
html[data-theme="dark"] .server-name,
body.dark-mode .payment-method-name,
body.dark-mode .server-name {
    color: var(--text-primary);
}

html[data-theme="dark"] .payment-method-count,
html[data-theme="dark"] .server-orders,
body.dark-mode .payment-method-count,
body.dark-mode .server-orders {
    color: var(--text-secondary);
}

html[data-theme="dark"] .payment-method-amount,
html[data-theme="dark"] .server-amount,
body.dark-mode .payment-method-amount,
body.dark-mode .server-amount {
    color: #22c55e;
}

html[data-theme="dark"] .payment-method-bar,
html[data-theme="dark"] .server-bar,
body.dark-mode .payment-method-bar,
body.dark-mode .server-bar {
    background: var(--border-primary);
}

/* =====================================================
   DASHBOARD & ANALYTICS
   ===================================================== */

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .chart-container,
body.dark-mode .stat-card,
body.dark-mode .chart-container {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
}

html[data-theme="dark"] .chart-container,
body.dark-mode .chart-container {
    color: var(--color-text-primary);
}

/* =====================================================
   BADGES & ALERTS
   ===================================================== */

html[data-theme="dark"] .badge,
body.dark-mode .badge {
    background-color: #0891b2;
    color: white;
}

html[data-theme="dark"] .alert,
body.dark-mode .alert {
    border-color: var(--color-border);
}

html[data-theme="dark"] .alert-info,
body.dark-mode .alert-info {
    background-color: #064e5a;
    border-color: #0891b2;
    color: #a5f3fc;
}

html[data-theme="dark"] .alert-warning,
body.dark-mode .alert-warning {
    background-color: #78350f;
    border-color: #b45309;
    color: #fcd34d;
}

html[data-theme="dark"] .alert-danger,
body.dark-mode .alert-danger {
    background-color: #7f1d1d;
    border-color: #dc2626;
    color: #fca5a5;
}

html[data-theme="dark"] .alert-success,
body.dark-mode .alert-success {
    background-color: #064e3b;
    border-color: #10b981;
    color: #6ee7b7;
}

/* =====================================================
   SCROLLBARS
   ===================================================== */

html[data-theme="dark"] ::-webkit-scrollbar,
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* =====================================================
   PLACEHOLDERS
   ===================================================== */

html[data-theme="dark"] ::placeholder,
body.dark-mode ::placeholder {
    color: var(--color-text-tertiary);
    opacity: 0.7;
}

/* =====================================================
   TRANSITIONS
   ===================================================== */

html[data-theme="dark"],
html[data-theme="dark"] *,
body.dark-mode,
body.dark-mode * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =====================================================
   FILTERS & DATE PICKERS
   ===================================================== */

html[data-theme="dark"] .date-filter-form,
html[data-theme="dark"] .form-select,
body.dark-mode .date-filter-form,
body.dark-mode .form-select {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

html[data-theme="dark"] .filter-group label,
body.dark-mode .filter-group label {
    color: var(--color-text-secondary);
}

/* =====================================================
   PAGE HEADER
   ===================================================== */

html[data-theme="dark"] .page-header,
body.dark-mode .page-header {
    color: var(--color-text-primary);
}

html[data-theme="dark"] .page-title,
body.dark-mode .page-title {
    color: var(--color-text-primary);
}

html[data-theme="dark"] .page-breadcrumb,
body.dark-mode .page-breadcrumb {
    color: var(--color-text-secondary);
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {

    html[data-theme="dark"],
    body.dark-mode {
        --color-bg-primary: #ffffff;
        --color-text-primary: #000000;
        color: #000000;
        background-color: white;
    }
}