/* Dashboard Dark Mode Styles */

/* Dark Mode Toggle Button */
/* Light mode: dark button with white moon icon */
#darkModeToggle {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#darkModeToggle:hover {
    background: #1a202c !important;
    transform: scale(1.05);
}

/* Dark mode: light button with dark sun icon */
body.dark-mode #darkModeToggle {
    background: #e2e8f0;
    border-color: #cbd5e0;
    color: #2d3748;
}

body.dark-mode #darkModeToggle:hover {
    background: #f7fafc;
}

body.dark-mode #darkModeToggle i.fa-moon {
    display: none;
}

body.dark-mode #darkModeToggle i.fa-sun {
    display: inline-block;
}

#darkModeToggle i.fa-sun {
    display: none;
}

/* Dark Mode Styles for Main Content Area */
body.dark-mode .main-content {
    background: #1a1d23;
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .content-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .content-header h1 {
    color: rgba(255, 255, 255, 0.95);
}

/* Page Content */
body.dark-mode .page-content {
    background: #1a1d23;
}

/* Stats Cards */
body.dark-mode .stat-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-label {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .stat-value {
    color: rgba(255, 255, 255, 0.95);
}

/* Content Sections */
body.dark-mode .content-section {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .content-section h2 {
    color: rgba(255, 255, 255, 0.95);
}

/* Tables */
body.dark-mode .table-container {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .data-table {
    background: #23262d;
}

body.dark-mode .data-table thead {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .data-table th {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .data-table td {
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Buttons */
body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode select,
body.dark-mode textarea {
    background: #1f2329;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    background: #23262d;
    border-color: var(--primary-color);
}

/* Search and Filter Inputs */
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode .filter-input {
    background: #1f2329;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* Modals */
body.dark-mode .modal-content {
    background: #23262d;
}

body.dark-mode .modal-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .modal-body {
    color: rgba(255, 255, 255, 0.85);
}

/* Status Badges */
body.dark-mode .status-badge {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .status-badge.pending {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

body.dark-mode .status-badge.confirmed {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

body.dark-mode .status-badge.completed {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

body.dark-mode .status-badge.cancelled {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
}

/* Cards */
body.dark-mode .card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .card-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Filters Bar */
body.dark-mode .filters-bar {
    background: #1f2329;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Calendar */
body.dark-mode .calendar-desktop,
body.dark-mode .calendar-mobile {
    background: #23262d;
}

body.dark-mode .fc-theme-standard td,
body.dark-mode .fc-theme-standard th {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .fc-daygrid-day {
    background: #1f2329;
}

body.dark-mode .fc-col-header-cell {
    background: #1a1d23;
    color: rgba(255, 255, 255, 0.8);
}

/* Tours Grid */
body.dark-mode .tours-grid,
body.dark-mode .products-grid {
    background: transparent;
}

body.dark-mode .tour-card,
body.dark-mode .product-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .tour-card h3,
body.dark-mode .product-card h3 {
    color: rgba(255, 255, 255, 0.95);
}

/* Empty States */
body.dark-mode .chat-empty {
    color: rgba(255, 255, 255, 0.5);
}

/* Text Colors */
body.dark-mode .text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .text-secondary {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Section Headers */
body.dark-mode .section-header h2 {
    color: rgba(255, 255, 255, 0.95);
}

/* Pagination */
body.dark-mode .pagination button {
    background: #23262d;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .pagination button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .pagination button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Smooth transition for dark mode */
body.dark-mode-transition * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ===== ADMIN PANEL DARK MODE STYLES ===== */

/* Admin Profile Card */
body.dark-mode .admin-profile-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .profile-avatar {
    background: rgba(64, 224, 208, 0.2);
    color: var(--primary-color);
}

body.dark-mode .profile-info h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .profile-info p {
    color: rgba(255, 255, 255, 0.6);
}

/* System Status Cards */
body.dark-mode .system-status-grid {
    background: transparent;
}

body.dark-mode .system-status-item {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .status-icon {
    opacity: 0.9;
}

body.dark-mode .status-info h4 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .status-info p {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .status-value {
    color: rgba(255, 255, 255, 0.95);
}

/* Quick Actions Cards */
body.dark-mode .quick-actions-grid {
    background: transparent;
}

body.dark-mode .action-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .action-card:hover {
    background: #2a2d35;
    border-color: var(--primary-color);
}

body.dark-mode .action-card i {
    color: rgba(255, 255, 255, 0.8);
}

/* Recent Activity */
body.dark-mode .activity-feed {
    background: #23262d;
}

body.dark-mode .activity-log {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .activity-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
}

body.dark-mode .activity-item p {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .activity-item small {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .activity-details p {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .activity-details small {
    color: rgba(255, 255, 255, 0.5);
}

/* ===== ACCOUNTS / ROLE MANAGEMENT DARK MODE STYLES ===== */

/* Role Cards */
body.dark-mode .role-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .role-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .role-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .role-header h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .role-info p {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .role-permissions {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .permission-badge {
    background: rgba(64, 224, 208, 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(64, 224, 208, 0.3);
}

/* User Account Cards */
body.dark-mode .user-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .user-info h4 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .user-info p {
    color: rgba(255, 255, 255, 0.6);
}

/* ===== SETTINGS PANEL DARK MODE STYLES ===== */

/* Settings Profile Card */
body.dark-mode .settings-profile-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .profile-avatar-large {
    background: rgba(64, 224, 208, 0.2);
    color: var(--primary-color);
}

body.dark-mode .profile-form-section h4 {
    color: rgba(255, 255, 255, 0.95);
}

/* Settings Cards (Security, Preferences, etc) */
body.dark-mode .settings-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .settings-card h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .settings-description {
    color: rgba(255, 255, 255, 0.6);
}

/* Profile Section */
body.dark-mode .profile-form {
    background: #23262d;
}

body.dark-mode .form-group label {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Chat Settings Section */
body.dark-mode .chat-settings-section {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .chat-settings-section h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .chat-setting-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .chat-setting-label span {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .chat-setting-label small {
    color: rgba(255, 255, 255, 0.5);
}

/* Preferences */
body.dark-mode .preference-item {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 8px;
}

body.dark-mode .preference-info h4 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .preference-info p {
    color: rgba(255, 255, 255, 0.6);
}

/* Toggle Switch */
body.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: var(--primary-color);
}

body.dark-mode .toggle-switch .toggle-slider {
    background: rgba(255, 255, 255, 0.2);
}

/* Session Info */
body.dark-mode .session-info {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .session-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .session-label {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .session-value {
    color: rgba(255, 255, 255, 0.95);
}

/* ===== ENHANCED CALENDAR DARK MODE STYLES ===== */

/* FullCalendar Header */
body.dark-mode .fc-header-toolbar {
    background: #1f2329;
    padding: 15px;
    border-radius: 8px 8px 0 0;
}

body.dark-mode .fc-toolbar-title {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .fc-button {
    background: #23262d;
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .fc-button:hover {
    background: #2a2d35;
    border-color: var(--primary-color);
}

body.dark-mode .fc-button-primary:not(:disabled):active,
body.dark-mode .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Calendar Grid */
body.dark-mode .fc-scrollgrid {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .fc-daygrid-day-number {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-mode .fc-day-today {
    background: rgba(64, 224, 208, 0.1) !important;
}

body.dark-mode .fc-daygrid-day.fc-day-other {
    opacity: 0.3;
}

/* Calendar Events */
body.dark-mode .fc-event {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .fc-event-title {
    color: rgba(255, 255, 255, 0.95);
}

/* Mobile Calendar List */
body.dark-mode .calendar-mobile-list {
    background: #23262d;
}

body.dark-mode .calendar-mobile-item {
    background: #1f2329;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .calendar-mobile-item h4 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .calendar-mobile-item p {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .calendar-mobile-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .calendar-mobile-header h3 {
    color: rgba(255, 255, 255, 0.95);
}

/* ===== PRODUCTS PANEL DARK MODE STYLES ===== */

/* Product Tabs */
body.dark-mode .product-tabs {
    background: transparent;
}

body.dark-mode .product-tab {
    background: #23262d;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .product-tab:hover {
    background: #2a2d35;
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .product-tab.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Product Cards */
body.dark-mode .product-card {
    background: #23262d;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .product-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .product-card-header {
    background: #1f2329;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .product-card-header h3 {
    color: rgba(255, 255, 255, 0.95);
}

body.dark-mode .product-type-badge {
    opacity: 0.9;
}

body.dark-mode .product-card-body {
    background: #23262d;
}

body.dark-mode .product-card-body p {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .product-features li {
    color: rgba(255, 255, 255, 0.7);
}

body.dark-mode .product-card-footer {
    background: #1f2329;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .product-price {
    color: var(--primary-color);
}

body.dark-mode .product-stock {
    color: rgba(255, 255, 255, 0.6);
}

/* Product Grid */
body.dark-mode .products-grid {
    background: transparent;
}

/* Product Icon */
body.dark-mode .product-icon {
    opacity: 0.9;
}
