/* ===== CPA Bank — Plausible CSS Final (Dark Mode Optimisé + Homepage + Login) ===== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

* { font-family: 'Montserrat', sans-serif !important; }

:root {
  --cpa-blue: #00529f;
  --cpa-blue-dark: #003f7a;
  --cpa-blue-light: #e8f1fb;
  --cpa-yellow: #ffd420;
}

/* ============================================
   NAVBAR — sticky, fond bleu CPA
   ============================================ */
nav.relative.z-20 {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: var(--cpa-blue) !important;
  border-bottom: 3px solid var(--cpa-yellow) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

nav.relative.z-20 a,
nav.relative.z-20 span,
nav.relative.z-20 svg {
  color: white !important;
  fill: white !important;
}

/* LOGO : remplacer les images Plausible par cpa-logo.png */
nav a[href="/sites"] img,
a[href="/"] img {
  content: url('/custom/cpa-logo.png') !important;
  height: 2.5rem !important;
  width: auto !important;
}

/* CACHER Repo et Docs */
nav li.hidden.mr-6.sm\\:block { display: none !important; }
nav a[href="https://plausible.io/docs"],
nav a[href*="github.com/plausible"] { display: none !important; }

/* Menu dropdown (Settings / Log out) */
div[data-dropdown] {
  background-color: #00529F !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

div[data-dropdown] a {
  color: #1e293b !important;
  font-size: 14px !important;
}

div[data-dropdown] a:hover {
  background-color: var(--cpa-blue-light) !important;
  color: var(--cpa-blue) !important;
}

div[data-dropdown-trigger] {
  color: white !important;
  border-radius: 6px !important;
}

div[data-dropdown-trigger]:hover {
  background-color: rgba(255,255,255,0.2) !important;
}

div[data-dropdown-trigger] span,
div[data-dropdown-trigger] svg {
  color: white !important;
  fill: white !important;
}

/* ============================================
   FOOTER — caché et mini footer
   ============================================ */
div.mt-24.bg-gray-800 { display: none !important; }

body::after {
  content: "Pour toute assistance : SidAli.IKHLEF@CPA-BANK.DZ" !important;
  display: fixed !important;
  bottom: 0 !important;
  text-align: center !important;
  padding: 16px !important;
  margin-top: 16px !important;
  font-size: 13px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: #64748b !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

/* ============================================
   FOND GÉNÉRAL
   ============================================ */
body {
  background-color: #f0f4f8 !important;
}

/* DARK MODE — fond général + cartes + texte */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #0a101f !important;
    color: #ffffff !important;
  }

  /* Cartes / Entry pages / tableaux */
  div[class*="card"],
  div[class*="bg-white"],
  div[class*="p-6"] {
    background-color: #1a1f2b !important;
    color: #ffffff !important;
    border-color: #2a2f3b !important;
  }

  /* Texte bleu → blanc dans les cartes */
  [class*="text-indigo"],
  [class*="text-blue"] {
    color: #ffffff !important;
  }

  /* Badges / labels accent */
  [class*="badge-blue"] {
    color: var(--cpa-yellow) !important;
    background-color: rgba(0,82,159,0.2) !important;
  }

  /* Footer mini dark mode */
  body::after {
    color: #94a3b8 !important;
    border-top-color: #334155 !important;
    background: #0f172a !important;
  }

  /* Graph fill dark */
  svg [fill*="indigo"],
  svg [fill*="violet"],
  svg [fill*="purple"] {
    fill: rgba(0,82,159,0.3) !important;
  }

  /* Scrollbar dark */
  ::-webkit-scrollbar-track { background: #1e293b !important; }
}

/* ============================================
   CORRECTION barres / graphiques
   ============================================ */
[class*="bar-"] { background-color: var(--cpa-blue) !important; }

svg path[stroke*="indigo"],
svg path[stroke*="violet"],
svg path[stroke*="purple"],
svg polyline {
  stroke: var(--cpa-blue) !important;
}

/* ============================================
   LIENS GLOBAUX
   ============================================ */
a { color: var(--cpa-blue) !important; }
a:hover { color: var(--cpa-blue-dark) !important; }

/* Exceptions nav / dropdown */
nav.relative.z-20 a { color: white !important; }
nav.relative.z-20 a:hover { color: var(--cpa-yellow) !important; background-color: transparent !important; }
div[data-dropdown] a { color: #1e293b !important; }

/* ============================================
   BOUTONS
   ============================================ */
.button,
a.button,
button.button {
  background-color: var(--cpa-blue) !important;
  border-color: var(--cpa-blue) !important;
  color: white !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
}

.button:hover,
a.button:hover,
button.button:hover {
  background-color: var(--cpa-blue-dark) !important;
}

/* ============================================
   FOCUS / RING
   ============================================ */
*:focus {
  outline-color: var(--cpa-blue) !important;
  ring-color: var(--cpa-blue) !important;
}
.focus\\:ring-indigo-500:focus,
.focus\\:border-indigo-500:focus {
  border-color: var(--cpa-blue) !important;
  box-shadow: 0 0 0 3px rgba(0,82,159,0.2) !important;
}

/* ============================================
   SELECTION TEXTE
   ============================================ */
::selection {
  background: var(--cpa-yellow) !important;
  color: #000 !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: #f1f5f9 !important; }
::-webkit-scrollbar-thumb {
  background: var(--cpa-blue) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--cpa-blue-dark) !important;
}

/* ============================================
   PAGE HOMEPAGE (welcome) — NETTOYAGE COMPLET
   ============================================ */
/* Cacher TOUT le contenu original de la homepage */
body > div.w-full.my-8.text-center + div,
body > div.w-full.my-8.text-center + div + p,
body > div.w-full.my-8.text-center + p {
    display: none !important;
}

/* Cacher le paragraphe de présentation Plausible */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p.mt-4,
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p:first-of-type {
    display: none !important;
}

/* Cacher toute la liste des liens (login, register, docs, twitter) */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white ul.mt-6 {
    display: none !important;
}

/* Modifier la carte principale pour n'afficher que le titre + bouton */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white {
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    padding: 0 !important;
    max-width: 500px !important;
}

/* Garder le titre "Welcome to Plausible Analytics" mais le modifier */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p.text-gray-900.text-xl.font-black {
    font-size: 2rem !important;
    font-weight: 800 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* Remplacer le texte du titre */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p.text-gray-900.text-xl.font-black {
    font-size: 0 !important;
}
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p.text-gray-900.text-xl.font-black::before {
    content: "Welcome to CPA Analytics Tool" !important;
    font-size: 2rem !important;
    display: block !important;
    color: #00529f !important;
}

/* Version dark mode du titre */
@media (prefers-color-scheme: dark) {
    body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white p.text-gray-900.text-xl.font-black::before {
        color: white !important;
    }
}

/* Créer un NOUVEAU bouton "Go to Login" */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white {
    position: relative !important;
}

body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white::after {
    content: "Go to Login" !important;
    display: inline-block !important;
    margin-top: 2rem !important;
    background-color: #00529f !important;
    color: white !important;
    padding: 12px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    text-decoration: none !important;
    border: none !important;
}

body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white:hover::after {
    background-color: #003f7a !important;
}

/* Rendre le pseudo-élément cliquable avec un lien */
body > div.w-full.md\:max-w-xl.md\:mx-auto.bg-white {
    cursor: pointer !important;
}

/* Centrer verticalement le contenu homepage */
body:has(> div.w-full.md\:max-w-xl.md\:mx-auto.bg-white) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 80vh !important;
}

/* ============================================
   PAGE LOGIN — logo CPA bleu
   ============================================ */
body > div.w-full.my-8.text-center a img {
    content: url('/custom/cpa-bleu.png') !important;
    height: 2.5rem !important;
    width: auto !important;
}

p.text-center.text-gray-500.text-xs.py-8 { display: none !important; }
p.text-gray-500.text-xs.my-2 { display: none !important; }