/* ================================================
   theme.css — مشترك لكل صفحات المتجر والأدمن
   frontend/css/theme.css
   ================================================ */

/* ===== Light Theme (Default) ===== */
:root {
  --primary:      #1BB7AD;
  --primary-dark: #16998F;
  --dark:         #F6F7F8;
  --darker:       #FFFFFF;
  --card-bg:      #FFFFFF;
  --card-bg2:     #EEF0F3;
  --sidebar-bg:   #FFFFFF;
  --text:         #1F2A37;
  --text-muted:   #6B7280;
  --border:       rgba(27,183,173,0.18);
}

/* ===== Dark Theme — html[data-theme="dark"] أعلى specificity من :root ===== */
html[data-theme="dark"] {
  --dark:         #0D1B2A;
  --darker:       #112236;
  --card-bg:      #1A2B3C;
  --card-bg2:     #243447;
  --sidebar-bg:   #112236;
  --text:         #E2EAF4;
  --text-muted:   #8B9DB0;
  --border:       rgba(27,183,173,0.25);
}

/* ===== Smooth transition ===== */
body, .sidebar, .sidebar-mobile, .navbar, .card-box, .table-card,
.stat-card, .modal-content, .form-control, .form-select,
.topbar, .bottom-nav, .contact-card, .info-section {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

/* ===== Dark mode body ===== */
html[data-theme="dark"] body {
  background: var(--dark);
  color: var(--text);
}

/* ===== Input fields ===== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(27,183,173,0.15) !important;
}
html[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted) !important;
}

/* ===== Modal ===== */
html[data-theme="dark"] .modal-content {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ===== Table ===== */
html[data-theme="dark"] .table {
  color: var(--text);
}
html[data-theme="dark"] .table thead th {
  background: rgba(27,183,173,0.08) !important;
}
html[data-theme="dark"] .table tbody tr:hover {
  background: rgba(27,183,173,0.05) !important;
}
html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text);
}

/* ===== Scrollbar ===== */
html[data-theme="dark"] ::-webkit-scrollbar { width: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--darker); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(27,183,173,0.4);
  border-radius: 3px;
}

/* ===== Theme Toggle Button ===== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: rgba(27,183,173,0.08);
  border: 1px solid rgba(27,183,173,0.2);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Tajawal', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background 0.2s, color 0.2s !important;
}
.theme-toggle-btn:hover {
  background: rgba(27,183,173,0.18);
  color: var(--primary);
  border-color: var(--primary);
}
.theme-toggle-btn .t-icon { font-size: 1.1rem; flex-shrink: 0; }
.theme-toggle-btn .t-label { flex: 1; }

/* ===== Page Header in dark mode ===== */
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .search-hero {
  background: linear-gradient(135deg, var(--darker) 0%, rgba(27,183,173,0.08) 100%) !important;
}