/*!
 * © 2025 diaspora.ro — Toate drepturile rezervate.
 * PROTECTIE COPYRIGHT — COD PROPRIETAR CONFIDENTIAL
 * Utilizarea, copierea sau distributia fara acord scris este INTERZISA.
 * NO-AI-TRAINING: Not licensed for AI training datasets.
 * NO-AI-SCRAPING: Automated collection strictly prohibited.
 */
/* ═══════════════════════════════════════════════════════════════════════════
   diaspora.ro — Color Themes System v1.0
   8 teme predefinite + suport custom per user.
   Folosește html[data-theme="X"] cu specificitate (0,1,1) pentru a câștiga
   față de :root { } (specificitate 0,1,0) din stilurile inline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT — Tema implicită (valorile existente, nu se schimbă nimic) ── */
html[data-theme="light"] {
  --bg:          #f0f2f5;
  --card:        #ffffff;
  --card2:       #f0f2f5;
  --border:      #e4e6ea;
  --ink:         #050505;
  --ink2:        #65676b;
  --muted:       #8a8d91;
  --brand:       #7c3aed;
  --brand2:      #a855f7;
  --brandl:      #c084fc;
  --shadow:      0 1px 4px rgba(0,0,0,.10);
  --shadow-md:   0 2px 8px rgba(0,0,0,.10);
  --shadow-lg:   0 4px 20px rgba(0,0,0,.12);
  --grad:        linear-gradient(135deg,#7c3aed,#a855f7);
  color-scheme:  light;
}

/* ── 2. DARK — Mod întunecat, deep purple-black ── */
html[data-theme="dark"] {
  --bg:          #06000f;
  --card:        #0d0520;
  --card2:       #130828;
  --border:      rgba(255,255,255,0.09);
  --ink:         #f0eaff;
  --ink2:        rgba(220,210,255,0.70);
  --muted:       rgba(180,170,220,0.50);
  --brand:       #a855f7;
  --brand2:      #c084fc;
  --brandl:      #d8b4fe;
  --shadow:      0 2px 12px rgba(0,0,0,.50);
  --shadow-md:   0 4px 20px rgba(0,0,0,.55);
  --shadow-lg:   0 8px 36px rgba(0,0,0,.60);
  --grad:        linear-gradient(135deg,#7c3aed,#a855f7);
  color-scheme:  dark;
}

/* Top-bar dark override */
html[data-theme="dark"] .top-bar {
  background: rgba(13,5,32,0.97) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .modal-sheet,
html[data-theme="dark"] .hub-epm-inner,
html[data-theme="dark"] .notif-inner,
html[data-theme="dark"] .cmp-modal-inner,
html[data-theme="dark"] .com-inner {
  background: var(--card) !important;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* ── 3. RAINBOW — Curcubeu pastel luminos ── */
html[data-theme="rainbow"] {
  --bg:          #fdf4ff;
  --card:        #ffffff;
  --card2:       #fce7f3;
  --border:      #f0abfc;
  --ink:         #3b0764;
  --ink2:        #6b21a8;
  --muted:       #a855f7;
  --brand:       #ec4899;
  --brand2:      #a855f7;
  --brandl:      #c084fc;
  --shadow:      0 1px 6px rgba(236,72,153,.18);
  --shadow-md:   0 3px 14px rgba(168,85,247,.20);
  --shadow-lg:   0 6px 28px rgba(124,58,237,.22);
  --grad:        linear-gradient(135deg,#f43f5e,#ec4899,#a855f7,#6366f1);
  color-scheme:  light;
}
html[data-theme="rainbow"] .top-bar {
  background: linear-gradient(90deg, rgba(253,244,255,.97), rgba(252,231,243,.97)) !important;
  border-bottom-color: #f0abfc !important;
}

/* ── 4. OCEAN — Albastru-teal cald ── */
html[data-theme="ocean"] {
  --bg:          #e0f2fe;
  --card:        #ffffff;
  --card2:       #bae6fd;
  --border:      #7dd3fc;
  --ink:         #0c4a6e;
  --ink2:        #075985;
  --muted:       #0ea5e9;
  --brand:       #0284c7;
  --brand2:      #0ea5e9;
  --brandl:      #38bdf8;
  --shadow:      0 1px 6px rgba(2,132,199,.16);
  --shadow-md:   0 3px 14px rgba(2,132,199,.18);
  --shadow-lg:   0 6px 28px rgba(12,74,110,.20);
  --grad:        linear-gradient(135deg,#0284c7,#0ea5e9,#22d3ee);
  color-scheme:  light;
}
html[data-theme="ocean"] .top-bar {
  background: rgba(224,242,254,.97) !important;
  border-bottom-color: #7dd3fc !important;
}

/* ── 5. SUNSET — Warm orange-roșu ── */
html[data-theme="sunset"] {
  --bg:          #fff7ed;
  --card:        #ffffff;
  --card2:       #ffedd5;
  --border:      #fed7aa;
  --ink:         #431407;
  --ink2:        #7c2d12;
  --muted:       #c2410c;
  --brand:       #ea580c;
  --brand2:      #f97316;
  --brandl:      #fb923c;
  --shadow:      0 1px 6px rgba(234,88,12,.16);
  --shadow-md:   0 3px 14px rgba(234,88,12,.18);
  --shadow-lg:   0 6px 28px rgba(67,20,7,.20);
  --grad:        linear-gradient(135deg,#dc2626,#ea580c,#f59e0b);
  color-scheme:  light;
}
html[data-theme="sunset"] .top-bar {
  background: rgba(255,247,237,.97) !important;
  border-bottom-color: #fed7aa !important;
}

/* ── 6. FOREST — Verde natural ── */
html[data-theme="forest"] {
  --bg:          #f0fdf4;
  --card:        #ffffff;
  --card2:       #dcfce7;
  --border:      #86efac;
  --ink:         #14532d;
  --ink2:        #166534;
  --muted:       #16a34a;
  --brand:       #16a34a;
  --brand2:      #22c55e;
  --brandl:      #4ade80;
  --shadow:      0 1px 6px rgba(22,163,74,.16);
  --shadow-md:   0 3px 14px rgba(22,163,74,.18);
  --shadow-lg:   0 6px 28px rgba(20,83,45,.20);
  --grad:        linear-gradient(135deg,#15803d,#22c55e,#84cc16);
  color-scheme:  light;
}
html[data-theme="forest"] .top-bar {
  background: rgba(240,253,244,.97) !important;
  border-bottom-color: #86efac !important;
}

/* ── 7. CANDY — Roz dulce pastel ── */
html[data-theme="candy"] {
  --bg:          #fdf2f8;
  --card:        #ffffff;
  --card2:       #fce7f3;
  --border:      #f9a8d4;
  --ink:         #831843;
  --ink2:        #9d174d;
  --muted:       #be185d;
  --brand:       #db2777;
  --brand2:      #ec4899;
  --brandl:      #f472b6;
  --shadow:      0 1px 6px rgba(219,39,119,.16);
  --shadow-md:   0 3px 14px rgba(219,39,119,.18);
  --shadow-lg:   0 6px 28px rgba(131,24,67,.20);
  --grad:        linear-gradient(135deg,#be185d,#ec4899,#f472b6);
  color-scheme:  light;
}
html[data-theme="candy"] .top-bar {
  background: rgba(253,242,248,.97) !important;
  border-bottom-color: #f9a8d4 !important;
}

/* ── 8. COSMIC — Deep space întunecat cu violet ── */
html[data-theme="cosmic"] {
  --bg:          #0a0118;
  --card:        #100d2e;
  --card2:       #16103a;
  --border:      rgba(139,92,246,0.22);
  --ink:         #e2d9f3;
  --ink2:        rgba(196,181,253,0.75);
  --muted:       rgba(167,139,250,0.55);
  --brand:       #7c3aed;
  --brand2:      #8b5cf6;
  --brandl:      #a78bfa;
  --shadow:      0 2px 14px rgba(124,58,237,.35);
  --shadow-md:   0 4px 22px rgba(124,58,237,.40);
  --shadow-lg:   0 8px 40px rgba(10,1,24,.70);
  --grad:        linear-gradient(135deg,#4f46e5,#7c3aed,#a855f7);
  color-scheme:  dark;
}
html[data-theme="cosmic"] .top-bar {
  background: rgba(10,1,24,0.97) !important;
  border-bottom-color: rgba(139,92,246,0.22) !important;
}
html[data-theme="cosmic"] body { background: var(--bg); color: var(--ink); }

/* ── CUSTOM — variabilele sunt setate inline via JS pe <html style="..."> ── */
html[data-theme="custom"] {
  color-scheme: light;
}

/* ── Tranziție lină la schimbarea temei (exclus imagini/video) ── */
html[data-theme] body,
html[data-theme] .top-bar,
html[data-theme] .menu-panel,
html[data-theme] .post-card,
html[data-theme] .card,
html[data-theme] .modal-sheet,
html[data-theme] .hub-epm-inner {
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease;
}

/* ── Panou de teme — FAB + Sheet ──────────────────────────────────────────── */

/* FAB — buton flotant jos-stânga, deasupra GPS-ului */
#ct-fab {
  position: fixed;
  bottom: 92px;
  left: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card, #fff);
  border: 2px solid var(--border, #e4e6ea);
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 8900;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-size: 22px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#ct-fab:active { transform: scale(0.92); }
#ct-fab:hover  { box-shadow: 0 5px 18px rgba(0,0,0,.22); }

/* Pe desktop (phone-frame) — repoziționare */
@media (min-width: 641px) {
  #ct-fab {
    left: calc(50% - 226px);
    bottom: 24px;
  }
}

/* Overlay fundal când panoul e deschis */
#ct-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 8950;
  pointer-events: none;
  transition: background 0.25s ease;
}
#ct-overlay.open {
  background: rgba(0,0,0,0.45);
  pointer-events: all;
}

/* Panoul principal — sheet din jos */
#ct-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8960;
  background: var(--card, #fff);
  border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  transform: translateY(110%);
  transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 90vh;
  overflow-y: auto;
}
#ct-panel.open { transform: translateY(0); }

@media (min-width: 641px) {
  #ct-panel {
    left: calc(50% - 240px);
    right: calc(50% - 240px);
    width: 480px;
    border-radius: 20px 20px 0 0;
  }
}

/* Handle drag */
.ct-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border, #e4e6ea);
  margin: 14px auto 0;
}

/* Header panou */
.ct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
}
.ct-title {
  font: 800 16px / 1.3 var(--font, system-ui, sans-serif);
  color: var(--ink, #050505);
}
.ct-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--card2, #f0f2f5);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink2, #65676b);
  -webkit-tap-highlight-color: transparent;
}

/* Grid teme predefinite */
.ct-section-label {
  font: 700 11px / 1 var(--font, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink2, #65676b);
  padding: 6px 18px 10px;
}
.ct-presets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}
.ct-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.ct-preset-swatch {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 3px solid transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.ct-preset-btn.active .ct-preset-swatch {
  border-color: var(--brand, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 2px 8px rgba(0,0,0,.12);
  transform: scale(1.08);
}
.ct-preset-btn:active .ct-preset-swatch { transform: scale(0.93); }
.ct-preset-check {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  font-size: 22px;
  color: #fff;
}
.ct-preset-btn.active .ct-preset-check { display: flex; }
.ct-preset-label {
  font: 600 11px / 1.2 var(--font, system-ui, sans-serif);
  color: var(--ink2, #65676b);
  text-align: center;
  white-space: nowrap;
}
.ct-preset-btn.active .ct-preset-label { color: var(--brand, #7c3aed); }

/* Separator */
.ct-divider {
  height: 1px;
  background: var(--border, #e4e6ea);
  margin: 4px 16px 14px;
}

/* Secțiunea de personalizare avansată */
.ct-custom-section { padding: 0 16px 4px; }
.ct-custom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #e4e6ea);
}
.ct-custom-row:last-of-type { border-bottom: none; }
.ct-custom-label {
  font: 600 14px var(--font, system-ui, sans-serif);
  color: var(--ink, #050505);
}
.ct-custom-sub {
  font: 400 12px var(--font, system-ui, sans-serif);
  color: var(--ink2, #65676b);
  margin-top: 2px;
}
.ct-color-pick {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--border, #e4e6ea);
  cursor: pointer;
  padding: 0;
  background: none;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.ct-color-pick input[type="color"] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 1;
}

/* Butoane aplică / reset */
.ct-actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px 20px;
}
.ct-apply-btn {
  flex: 2;
  height: 48px;
  border-radius: 14px;
  background: var(--grad, linear-gradient(135deg,#7c3aed,#a855f7));
  color: #fff;
  font: 800 15px var(--font, system-ui, sans-serif);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-apply-btn:active { opacity: 0.88; }
.ct-reset-btn {
  flex: 1;
  height: 48px;
  border-radius: 14px;
  background: var(--card2, #f0f2f5);
  color: var(--ink2, #65676b);
  font: 700 14px var(--font, system-ui, sans-serif);
  border: 1.5px solid var(--border, #e4e6ea);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ct-reset-btn:active { opacity: 0.80; }

/* Toast propriu al sistemului de teme */
#ct-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1e1b2e;
  color: #fff;
  padding: 10px 22px;
  border-radius: 24px;
  font: 600 13px var(--font, system-ui, sans-serif);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
#ct-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}