/* DantiVeille - Custom styles */

/* ============================================================
   CSS VARIABLES - theme sombre (defaut)
   ============================================================ */
:root {
  --bg-base:        #030712;
  --bg-card:        rgba(17,24,39,0.5);
  --bg-card-solid:  #111827;
  --bg-input:       #111827;
  --bg-header:      rgba(3,7,18,0.8);
  --bg-footer:      #030712;
  --bg-tag:         rgba(31,41,55,0.5);
  --bg-hover:       rgba(255,255,255,0.05);
  --bg-switcher:    #111827;
  --text-primary:   #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted:     #6b7280;
  --text-faint:     #374151;
  --border-card:    rgba(31,41,55,0.5);
  --border-card-hover: rgba(55,65,81,0.5);
  --border-input:   rgba(55,65,81,0.5);
  --border-tag:     rgba(55,65,81,0.5);
  --border-switcher:#1f2937;
  --hero-card-from: #1f2937;
  --hero-card-to:   #111827;
  --scrollbar:      #374151;
  --scrollbar-hover:#4b5563;
}

/* ============================================================
   CSS VARIABLES - theme clair
   ============================================================ */
[data-theme="light"] {
  --bg-base:        #f9fafb;
  --bg-card:        rgba(255,255,255,0.95);
  --bg-card-solid:  #ffffff;
  --bg-input:       #ffffff;
  --bg-header:      rgba(249,250,251,0.9);
  --bg-footer:      #f3f4f6;
  --bg-tag:         rgba(243,244,246,0.9);
  --bg-hover:       rgba(0,0,0,0.04);
  --bg-switcher:    #e5e7eb;
  --text-primary:   #111827;
  --text-secondary: #4b5563;
  --text-muted:     #6b7280;
  --text-faint:     #9ca3af;
  --border-card:    rgba(209,213,219,0.8);
  --border-card-hover: rgba(156,163,175,0.8);
  --border-input:   rgba(209,213,219,0.9);
  --border-tag:     rgba(209,213,219,0.8);
  --border-switcher:#d1d5db;
  --hero-card-from: #f3f4f6;
  --hero-card-to:   #e5e7eb;
  --scrollbar:      #d1d5db;
  --scrollbar-hover:#9ca3af;
}

/* ============================================================
   APPLICATION DES VARIABLES
   ============================================================ */

body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

header {
  background-color: var(--bg-header) !important;
  border-color: var(--border-card) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

footer {
  background-color: var(--bg-footer) !important;
  border-color: var(--border-card) !important;
}

/* Cards */
.article-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease, background-color 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.article-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-card-hover) !important;
}
.article-card h3 { color: var(--text-primary) !important; }
.article-card p  { color: var(--text-secondary) !important; }
.article-card .text-gray-600,
.article-card .text-gray-700 { color: var(--text-muted) !important; }
.article-card .bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--hero-card-from), var(--hero-card-to)) !important;
}

/* Input recherche */
#search-input {
  background-color: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.25s ease, border-color 0.15s ease, color 0.25s ease;
}
#search-input::placeholder { color: var(--text-faint) !important; }

/* Stats */
#stats { color: var(--text-secondary) !important; }
#stats .text-white { color: var(--text-primary) !important; }

/* Pagination */
#prev-btn, #next-btn {
  background-color: var(--bg-card-solid) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-card) !important;
}
#prev-btn:hover:not(:disabled), #next-btn:hover:not(:disabled) {
  background-color: var(--bg-hover) !important;
}
#page-info { color: var(--text-secondary) !important; }

/* ============================================================
   NAV BUTTONS
   ============================================================ */

.nav-btn, .tab-btn, .section-tab {
  color: var(--text-secondary);
  background: transparent;
}
.nav-btn:hover, .tab-btn:hover, .section-tab:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}

/* ============================================================
   TECH SECTION - indigo
   ============================================================ */

.nav-btn.active, .tab-btn.active {
  color: #a5b4fc;
  background-color: rgba(99, 102, 241, 0.15);
}
[data-theme="light"] .nav-btn.active,
[data-theme="light"] .tab-btn.active {
  color: #4338ca;
  background-color: rgba(99, 102, 241, 0.12);
}

.section-tab.active {
  color: #a5b4fc;
  background-color: rgba(99, 102, 241, 0.2);
}
[data-theme="light"] .section-tab.active {
  color: #4338ca;
  background-color: rgba(99, 102, 241, 0.15);
}

.article-card:hover {
  box-shadow: 0 12px 40px -12px rgba(99, 102, 241, 0.15);
}
[data-theme="light"] .article-card:hover {
  box-shadow: 0 8px 30px -8px rgba(99, 102, 241, 0.18);
}

.tag-pill {
  cursor: pointer;
  transition: all 0.15s ease;
  background-color: var(--bg-tag);
  border-color: var(--border-tag);
  color: var(--text-secondary);
}
.tag-pill:hover {
  background-color: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}
[data-theme="light"] .tag-pill:hover {
  background-color: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}
.tag-pill.active {
  background-color: rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.5);
}
[data-theme="light"] .tag-pill.active {
  background-color: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.35);
}

.search-input-themed:focus {
  border-color: rgba(99, 102, 241, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.25);
}

/* "Lire l'article" en mode jour tech */
[data-theme="light"] .text-brand-400 { color: #4338ca !important; }

/* ============================================================
   CULTURE SECTION - amber
   ============================================================ */

[data-section="culture"] .nav-btn.active,
[data-section="culture"] .tab-btn.active {
  color: #fcd34d;
  background-color: rgba(217, 119, 6, 0.2);
}
[data-theme="light"] [data-section="culture"] .nav-btn.active,
html[data-theme="light"][data-section="culture"] .nav-btn.active,
html[data-theme="light"][data-section="culture"] .tab-btn.active {
  color: #b45309;
  background-color: rgba(217, 119, 6, 0.12);
}

[data-section="culture"] .section-tab.active {
  color: #fcd34d;
  background-color: rgba(217, 119, 6, 0.2);
}
html[data-theme="light"][data-section="culture"] .section-tab.active {
  color: #b45309;
  background-color: rgba(217, 119, 6, 0.15);
}

[data-section="culture"] .article-card:hover {
  box-shadow: 0 12px 40px -12px rgba(217, 119, 6, 0.2);
}

[data-section="culture"] .tag-pill:hover {
  background-color: rgba(217, 119, 6, 0.15);
  color: #fde68a;
}
html[data-theme="light"][data-section="culture"] .tag-pill:hover {
  background-color: rgba(217, 119, 6, 0.1);
  color: #b45309;
}
[data-section="culture"] .tag-pill.active {
  background-color: rgba(217, 119, 6, 0.3);
  color: #fde68a;
  border-color: rgba(217, 119, 6, 0.5);
}
html[data-theme="light"][data-section="culture"] .tag-pill.active {
  background-color: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.35);
}

[data-section="culture"] .search-input-themed:focus {
  border-color: rgba(217, 119, 6, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.25);
}

[data-theme="light"] .text-amber-400 { color: #b45309 !important; }

/* ============================================================
   SHARED
   ============================================================ */

.cat-badge {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.4s ease forwards; }

mark {
  background-color: rgba(99, 102, 241, 0.25);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}
[data-theme="light"] mark { background-color: rgba(99, 102, 241, 0.18); }
[data-section="culture"] mark { background-color: rgba(217, 119, 6, 0.25); }
html[data-theme="light"][data-section="culture"] mark { background-color: rgba(217, 119, 6, 0.18); }

#theme-toggle { transition: color 0.2s ease, background-color 0.2s ease; }

/* ============================================================
   MOBILE / RESPONSIVE
   ============================================================ */

/* Hide scrollbar (mobile scroll rails) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Mobile category bar bg */
#mobile-cat-bar {
  background-color: var(--bg-header);
  border-color: var(--border-card) !important;
}

/* Nav category pill on mobile cat bar */
#mobile-cat-bar-inner .nav-btn {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  font-size: 0.8125rem;
  border-radius: 9999px;
  border: 1px solid var(--border-tag);
  white-space: nowrap;
}

/* Tags bar scroll on mobile */
#tags-bar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#tags-bar::-webkit-scrollbar { display: none; }
#tags-bar .tag-pill {
  flex-shrink: 0;
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.8125rem;
  border-radius: 9999px;
  border: 1px solid var(--border-tag);
  white-space: nowrap;
}

/* Section tabs */
.section-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Article cards — smaller padding on mobile */
@media (max-width: 639px) {
  .article-card { padding: 0 !important; }
  .article-card .card-inner { padding: 1rem; }
  .article-card .card-img { height: 9rem; }
  .article-card h3 { font-size: 0.9rem; line-height: 1.4; }
  .article-card p  { -webkit-line-clamp: 2 !important; }
}

/* Stats — compact row on all sizes */
#stats {
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}
@media (max-width: 479px) {
  #stats { gap: 0.5rem 1rem; font-size: 0.75rem; }
  #stats .stat-number { font-size: 1.25rem; }
}

/* Fetch button spinning state */
#fetch-icon.spinning { display: none; }

/* xs breakpoint helper (480px) */
@media (min-width: 480px) {
  .hidden.xs\:inline { display: inline; }
}

/* Light mode — header & mobile cat bar */
[data-theme="light"] header {
  background-color: var(--bg-header) !important;
}
[data-theme="light"] #mobile-cat-bar {
  background-color: var(--bg-header);
}
[data-theme="light"] .sticky > div:first-child > div:last-of-type {
  /* gradient fade on right of mobile cats */
  background: linear-gradient(to left, var(--bg-base), transparent);
}

/* Footer light */
[data-theme="light"] footer {
  background-color: var(--bg-footer) !important;
}