/**
 * user-themes.css — نری‌گوله: تم‌های صفحه عمومی کاربران
 *
 * Themes are applied as body classes on public/u.php only.
 * Classes: body.theme-1  body.theme-2  body.theme-3
 *
 * Rules:
 * - RTL-safe, no layout override
 * - Uses CSS custom properties scoped per theme
 * - Does NOT affect admin or site-wide CSS
 * - New themes can be added as body.theme-N without restructuring
 */

/* ═══════════════════════════════════════════════════════
   THEME 1 — آبی کلاسیک (پیش‌فرض)
   Clean, professional, trustworthy blue
   ═══════════════════════════════════════════════════════ */
body.theme-1 {
  --t-bg:            #f1f5f9;
  --t-surface:       #ffffff;
  --t-primary:       #1e40af;
  --t-primary-hover: #1e3a8a;
  --t-accent:        #06b6d4;
  --t-text:          #1f2937;
  --t-muted:         #6b7280;
  --t-border:        #e5e7eb;
  --t-avatar-a:      #1e40af;
  --t-avatar-b:      #06b6d4;
  --t-header-bg:     #1e40af;
  --t-header-text:   #ffffff;
  --t-header-link:   #bfdbfe;
  --t-badge-bg:      #dbeafe;
  --t-badge-text:    #1e40af;
  --t-btn-bg:        #1e40af;
  --t-btn-text:      #ffffff;
  --t-stat-color:    #1e40af;
  --t-input-border:  #d1d5db;
  --t-input-focus:   #3b82f6;
  background-color: var(--t-bg);
  color: var(--t-text);
}

/* ═══════════════════════════════════════════════════════
   THEME 2 — نارنجی گرم (کودک‌پسند)
   Warm, energetic, playful — inspired by kids education UI
   ═══════════════════════════════════════════════════════ */
body.theme-2 {
  --t-bg:            #fff7ed;
  --t-surface:       #ffffff;
  --t-primary:       #ea580c;
  --t-primary-hover: #c2410c;
  --t-accent:        #fbbf24;
  --t-text:          #1c1917;
  --t-muted:         #78716c;
  --t-border:        #fde8d0;
  --t-avatar-a:      #f97316;
  --t-avatar-b:      #fbbf24;
  --t-header-bg:     #ea580c;
  --t-header-text:   #ffffff;
  --t-header-link:   #fed7aa;
  --t-badge-bg:      #ffedd5;
  --t-badge-text:    #c2410c;
  --t-btn-bg:        #ea580c;
  --t-btn-text:      #ffffff;
  --t-stat-color:    #ea580c;
  --t-input-border:  #fdba74;
  --t-input-focus:   #ea580c;
  background-color: var(--t-bg);
  color: var(--t-text);
}

/* ═══════════════════════════════════════════════════════
   THEME 3 — سبز طبیعت
   Calm, fresh, nature-inspired — great for creative profiles
   ═══════════════════════════════════════════════════════ */
body.theme-3 {
  --t-bg:            #f0fdf4;
  --t-surface:       #ffffff;
  --t-primary:       #16a34a;
  --t-primary-hover: #15803d;
  --t-accent:        #65a30d;
  --t-text:          #14532d;
  --t-muted:         #6b7280;
  --t-border:        #bbf7d0;
  --t-avatar-a:      #16a34a;
  --t-avatar-b:      #65a30d;
  --t-header-bg:     #16a34a;
  --t-header-text:   #ffffff;
  --t-header-link:   #bbf7d0;
  --t-badge-bg:      #dcfce7;
  --t-badge-text:    #15803d;
  --t-btn-bg:        #16a34a;
  --t-btn-text:      #ffffff;
  --t-stat-color:    #16a34a;
  --t-input-border:  #86efac;
  --t-input-focus:   #16a34a;
  background-color: var(--t-bg);
  color: var(--t-text);
}

/* ═══════════════════════════════════════════════════════
   SHARED THEME-AWARE COMPONENT OVERRIDES
   Applies to all body.theme-* (public/u.php page elements)
   ═══════════════════════════════════════════════════════ */

/* Site header */
body[class*="theme-"] .site-header {
  background: var(--t-header-bg) !important;
  color: var(--t-header-text) !important;
}
body[class*="theme-"] .site-header a {
  color: var(--t-header-link) !important;
}
body[class*="theme-"] .site-header a:hover {
  color: var(--t-header-text) !important;
}
body[class*="theme-"] .site-logo {
  color: var(--t-accent) !important;
}

/* Avatar */
body[class*="theme-"] .avatar {
  background: linear-gradient(135deg, var(--t-avatar-a), var(--t-avatar-b)) !important;
}

/* Profile card */
body[class*="theme-"] .profile-card {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
}

/* Stats */
body[class*="theme-"] .stat-num {
  color: var(--t-stat-color) !important;
}

/* Social / action buttons */
body[class*="theme-"] .social-btn {
  border-color: var(--t-primary) !important;
  color: var(--t-primary) !important;
}
body[class*="theme-"] .social-btn:hover {
  background: var(--t-primary) !important;
  color: var(--t-btn-text) !important;
}
body[class*="theme-"] .social-ig {
  border-color: #e1306c !important;
  color: #e1306c !important;
}
body[class*="theme-"] .social-ig:hover {
  background: #e1306c !important;
  color: #fff !important;
}
body[class*="theme-"] .social-tg {
  border-color: #229ed9 !important;
  color: #229ed9 !important;
}
body[class*="theme-"] .social-tg:hover {
  background: #229ed9 !important;
  color: #fff !important;
}
body[class*="theme-"] .social-wa {
  border-color: #25d366 !important;
  color: #25d366 !important;
}
body[class*="theme-"] .social-wa:hover {
  background: #25d366 !important;
  color: #fff !important;
}

/* Contact / message card */
body[class*="theme-"] .contact-card {
  background: var(--t-surface) !important;
  border-color: var(--t-border) !important;
}
body[class*="theme-"] .contact-card h2 {
  color: var(--t-primary) !important;
}

/* Form inputs in contact card */
body[class*="theme-"] .contact-card input,
body[class*="theme-"] .contact-card textarea {
  border-color: var(--t-input-border) !important;
  color: var(--t-text) !important;
}
body[class*="theme-"] .contact-card input:focus,
body[class*="theme-"] .contact-card textarea:focus {
  border-color: var(--t-input-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-input-focus) 15%, transparent) !important;
}

/* Primary button */
body[class*="theme-"] .btn-theme-primary {
  background: var(--t-btn-bg) !important;
  color: var(--t-btn-text) !important;
  border: none !important;
}
body[class*="theme-"] .btn-theme-primary:hover {
  filter: brightness(0.9);
}

/* Badge / label */
body[class*="theme-"] .theme-badge {
  background: var(--t-badge-bg) !important;
  color: var(--t-badge-text) !important;
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD: Theme Selector Preview Cards
   Used in user/dashboard.php — not on public page
   ═══════════════════════════════════════════════════════ */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  margin-top: .75rem;
}

.theme-card {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  background: #fff;
}
.theme-card:hover {
  border-color: #1e40af;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.theme-card.active {
  border-color: #1e40af;
  box-shadow: 0 0 0 3px rgba(30,64,175,.2);
}

.theme-preview {
  height: 90px;
  position: relative;
  overflow: hidden;
}
/* Theme 1 preview */
.theme-preview.prev-1 {
  background: #f1f5f9;
}
.theme-preview.prev-1 .tp-header { background: #1e40af; }
.theme-preview.prev-1 .tp-card   { background: #fff; border: 1px solid #e5e7eb; }
.theme-preview.prev-1 .tp-avatar { background: linear-gradient(135deg,#1e40af,#06b6d4); }
.theme-preview.prev-1 .tp-line   { background: #1e40af; }

/* Theme 2 preview */
.theme-preview.prev-2 {
  background: #fff7ed;
}
.theme-preview.prev-2 .tp-header { background: #ea580c; }
.theme-preview.prev-2 .tp-card   { background: #fff; border: 1px solid #fde8d0; }
.theme-preview.prev-2 .tp-avatar { background: linear-gradient(135deg,#f97316,#fbbf24); }
.theme-preview.prev-2 .tp-line   { background: #ea580c; }

/* Theme 3 preview */
.theme-preview.prev-3 {
  background: #f0fdf4;
}
.theme-preview.prev-3 .tp-header { background: #16a34a; }
.theme-preview.prev-3 .tp-card   { background: #fff; border: 1px solid #bbf7d0; }
.theme-preview.prev-3 .tp-avatar { background: linear-gradient(135deg,#16a34a,#65a30d); }
.theme-preview.prev-3 .tp-line   { background: #16a34a; }

/* Shared mini-UI elements in preview */
.tp-header {
  height: 16px;
  width: 100%;
}
.tp-body {
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
}
.tp-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tp-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.tp-line {
  height: 4px;
  border-radius: 2px;
  opacity: .6;
}
.tp-line.short { width: 55%; }

.theme-card-label {
  padding: .55rem .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.theme-card-label span {
  font-size: .82rem;
  font-weight: 600;
  color: #374151;
}
.theme-card-label .active-badge {
  font-size: .7rem;
  background: #dbeafe;
  color: #1e40af;
  padding: .15rem .45rem;
  border-radius: 100px;
  display: none;
}
.theme-card.active .active-badge {
  display: inline-block;
}
.theme-card-actions {
  display: flex;
  gap: .4rem;
  padding: 0 .75rem .65rem;
}
.theme-card-actions button {
  flex: 1;
  padding: .35rem;
  border: none;
  border-radius: 6px;
  font-size: .75rem;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
}
.btn-preview-theme {
  background: #f1f5f9;
  color: #374151;
}
.btn-preview-theme:hover {
  background: #e2e8f0;
}
.btn-apply-theme {
  background: #1e40af;
  color: #fff;
}
.btn-apply-theme:hover {
  background: #1e3a8a;
}
.theme-card.active .btn-apply-theme {
  background: #16a34a;
  cursor: default;
}