/* ==========================================================================
   DARK MODE STYLES FOR USER PANEL
   ========================================================================== */

/* Panel Container & Background */
body.dark-mode .panel-container {
  background: #0f172a;
  color: #f1f5f9;
}

body.dark-mode .panel-wrapper {
  background: #0f172a;
}

/* Sidebar */
body.dark-mode .panel-sidebar {
  background: linear-gradient(135deg, #1e293b, #334155);
  border-right: 1px solid #334155;
}

body.dark-mode .sidebar-header {
  background: rgba(15, 23, 42, 0.5);
  border-bottom: 1px solid #334155;
}

body.dark-mode .sidebar-logo-text {
  color: #f1f5f9;
}

body.dark-mode .nav-menu-item {
  color: #cbd5e1;
  background: transparent;
}

body.dark-mode .nav-menu-item:hover {
  background: rgba(226, 232, 240, 0.1);
  color: #f1f5f9;
}

body.dark-mode .nav-menu-item.active {
  background: rgba(233, 30, 99, 0.15);
  color: #E91E63;
  border-left: 3px solid #E91E63;
}

body.dark-mode .nav-menu-icon {
  color: #cbd5e1;
}

body.dark-mode .nav-menu-item.active .nav-menu-icon {
  color: #E91E63;
}

/* Main Content */
body.dark-mode .panel-main {
  background: #0f172a;
}

body.dark-mode .panel-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

body.dark-mode .panel-title {
  color: #f1f5f9;
}

body.dark-mode .breadcrumb {
  color: #94a3b8;
}

body.dark-mode .breadcrumb a {
  color: #cbd5e1;
}

body.dark-mode .breadcrumb a:hover {
  color: #E91E63;
}

/* Cards */
body.dark-mode .stats-card,
body.dark-mode .card,
body.dark-mode .panel-card {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stats-card:hover,
body.dark-mode .card:hover {
  border-color: #475569;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .card-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
  color: #f1f5f9;
}

body.dark-mode .card-title {
  color: #f1f5f9;
}

body.dark-mode .card-body {
  background: #1e293b;
  color: #cbd5e1;
}

/* Stats Cards */
body.dark-mode .stats-value {
  color: #f1f5f9;
}

body.dark-mode .stats-label {
  color: #94a3b8;
}

body.dark-mode .stats-icon {
  background: rgba(233, 30, 99, 0.15);
  color: #E91E63;
}

body.dark-mode .stats-change {
  color: #94a3b8;
}

body.dark-mode .stats-change.positive {
  color: #10b981;
}

body.dark-mode .stats-change.negative {
  color: #ef4444;
}

/* Tables */
body.dark-mode .data-table {
  background: #1e293b;
  border: 1px solid #334155;
}

body.dark-mode .data-table thead {
  background: #334155;
}

body.dark-mode .data-table th {
  color: #f1f5f9;
  border-bottom: 2px solid #475569;
}

body.dark-mode .data-table td {
  color: #cbd5e1;
  border-bottom: 1px solid #334155;
}

body.dark-mode .data-table tbody tr:hover {
  background: rgba(226, 232, 240, 0.05);
}

body.dark-mode .data-table tr:nth-child(even) {
  background: rgba(51, 65, 85, 0.3);
}

/* Forms */
body.dark-mode .form-group label,
body.dark-mode .form-label {
  color: #cbd5e1;
}

body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
  background: #334155;
  border: 1px solid #475569;
  color: #f1f5f9;
}

body.dark-mode .form-control:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background: #1e293b;
  border-color: #E91E63;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b;
}

body.dark-mode .form-hint,
body.dark-mode .form-text {
  color: #94a3b8;
}

/* Buttons */
body.dark-mode .btn-secondary {
  background: #334155;
  color: #f1f5f9;
  border: 1px solid #475569;
}

body.dark-mode .btn-secondary:hover {
  background: #475569;
  border-color: #64748b;
}

body.dark-mode .btn-outline {
  background: transparent;
  border: 1px solid #475569;
  color: #cbd5e1;
}

body.dark-mode .btn-outline:hover {
  background: rgba(226, 232, 240, 0.1);
  border-color: #E91E63;
  color: #E91E63;
}

/* Badges & Status */
body.dark-mode .badge {
  border: 1px solid transparent;
}

body.dark-mode .badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .badge-info {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .status-badge {
  border: 1px solid transparent;
}

body.dark-mode .status-active,
body.dark-mode .status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .status-failed,
body.dark-mode .status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Order Items */
body.dark-mode .order-item {
  background: #1e293b;
  border: 1px solid #334155;
}

body.dark-mode .order-item:hover {
  border-color: #E91E63;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.1);
}

body.dark-mode .order-header {
  background: #334155;
  border-bottom: 1px solid #475569;
}

body.dark-mode .order-id {
  color: #f1f5f9;
}

body.dark-mode .order-date {
  color: #94a3b8;
}

body.dark-mode .order-body {
  background: #1e293b;
}

body.dark-mode .order-service-name {
  color: #f1f5f9;
}

body.dark-mode .order-service-details {
  color: #94a3b8;
}

body.dark-mode .order-footer {
  background: #1e293b;
  border-top: 1px solid #334155;
}

body.dark-mode .order-price {
  color: #E91E63;
}

/* User Profile */
body.dark-mode .user-profile-card {
  background: #1e293b;
  border: 1px solid #334155;
}

body.dark-mode .user-avatar-wrapper {
  background: #334155;
  border: 3px solid #E91E63;
}

body.dark-mode .user-name {
  color: #f1f5f9;
}

body.dark-mode .user-email {
  color: #94a3b8;
}

body.dark-mode .user-stats-item {
  background: #334155;
  border: 1px solid #475569;
}

body.dark-mode .user-stat-value {
  color: #f1f5f9;
}

body.dark-mode .user-stat-label {
  color: #94a3b8;
}

/* Balance Card */
body.dark-mode .balance-card {
  background: linear-gradient(135deg, #E91E63, #C2185B);
  border: 1px solid rgba(233, 30, 99, 0.3);
}

body.dark-mode .balance-label {
  color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .balance-value {
  color: #ffffff;
}

/* Pagination */
body.dark-mode .pagination {
  border-top: 1px solid #334155;
}

body.dark-mode .pagination-btn {
  background: #334155;
  border: 1px solid #475569;
  color: #cbd5e1;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
  background: #475569;
  border-color: #E91E63;
  color: #E91E63;
}

body.dark-mode .pagination-btn.active {
  background: #E91E63;
  border-color: #E91E63;
  color: white;
}

body.dark-mode .pagination-btn:disabled {
  background: #1e293b;
  border-color: #334155;
  color: #475569;
  opacity: 0.5;
}

/* Empty State */
body.dark-mode .empty-state {
  background: #1e293b;
  border: 2px dashed #334155;
}

body.dark-mode .empty-state-icon {
  color: #475569;
}

body.dark-mode .empty-state-title {
  color: #cbd5e1;
}

body.dark-mode .empty-state-text {
  color: #94a3b8;
}

/* Alerts */
body.dark-mode .alert {
  border: 1px solid transparent;
}

body.dark-mode .alert-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

body.dark-mode .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .alert-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

/* Tabs */
body.dark-mode .tabs-nav {
  background: #1e293b;
  border-bottom: 2px solid #334155;
}

body.dark-mode .tab-item {
  color: #94a3b8;
  border-bottom: 2px solid transparent;
}

body.dark-mode .tab-item:hover {
  color: #cbd5e1;
  background: rgba(226, 232, 240, 0.05);
}

body.dark-mode .tab-item.active {
  color: #E91E63;
  border-bottom-color: #E91E63;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
  background: #1e293b;
  border: 1px solid #334155;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .dropdown-item {
  color: #cbd5e1;
}

body.dark-mode .dropdown-item:hover {
  background: rgba(226, 232, 240, 0.1);
  color: #f1f5f9;
}

body.dark-mode .dropdown-divider {
  border-top: 1px solid #334155;
}

/* Modals */
body.dark-mode .modal-content {
  background: #1e293b;
  border: 1px solid #334155;
}

body.dark-mode .modal-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

body.dark-mode .modal-title {
  color: #f1f5f9;
}

body.dark-mode .modal-body {
  background: #1e293b;
  color: #cbd5e1;
}

body.dark-mode .modal-footer {
  background: #1e293b;
  border-top: 1px solid #334155;
}

/* Loading */
body.dark-mode .loading-spinner {
  border-color: #334155;
  border-top-color: #E91E63;
}

body.dark-mode .loading-text {
  color: #94a3b8;
}

/* Tooltips */
body.dark-mode .tooltip {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1e293b;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  body.dark-mode .panel-sidebar {
    background: #1e293b;
    border-right: none;
  }

  body.dark-mode .mobile-panel-header {
    background: #1e293b;
    border-bottom: 1px solid #334155;
  }
}