@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary: 204 100% 18%;
    --primary-foreground: 0 0% 100%;
    --secondary: 82 66% 44%;
    --secondary-foreground: 0 0% 100%;
    --accent: 82 66% 50%;
    --accent-foreground: 0 0% 100%;
    --background: 0 0% 100%;
    --foreground: 204 100% 18%;
    --card: 0 0% 100%;
    --card-foreground: 204 100% 18%;
    --popover: 0 0% 100%;
    --popover-foreground: 204 100% 18%;
    --muted: 210 20% 96%;
    --muted-foreground: 204 30% 40%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 210 20% 90%;
    --input: 210 20% 90%;
    --ring: 204 100% 18%;
    --radius: .5rem;
    --brand-green: 82 66% 44%;
    --brand-blue: 204 100% 18%;
    --brand-white: 0 0% 100%;
    --campus-amiens: 3 72% 51%;
    --campus-beauvais: 167 100% 33%;
    --campus-rennes: 190 100% 40%;
    --campus-rouen: 311 43% 45%;
    --campus-orange: 40 100% 48%;
    --brand-green-light: 82 66% 74%;
    --brand-blue-light: 204 100% 48%;
    --campus-amiens-light: 3 72% 81%;
    --campus-beauvais-light: 167 100% 63%;
    --campus-rennes-light: 190 100% 70%;
    --campus-rouen-light: 311 43% 75%;
    --campus-orange-light: 40 100% 78%;
    --gradient-hero: linear-gradient(135deg, hsl(204 100% 18%) 0%, hsl(204 100% 28%) 100%);
    --gradient-green: linear-gradient(135deg, hsl(82 66% 44%) 0%, hsl(82 66% 38%) 100%);
    --gradient-blue-green: linear-gradient(135deg, hsl(204 100% 18%) 0%, hsl(82 66% 44%) 100%);
    --gradient-overlay: linear-gradient(180deg, transparent 0%, hsl(204 100% 18% / .9) 100%);
    --shadow-sm: 0 1px 2px 0 hsl(204 100% 18% / .05);
    --shadow-md: 0 4px 6px -1px hsl(204 100% 18% / .1);
    --shadow-lg: 0 10px 15px -3px hsl(204 100% 18% / .1);
    --shadow-xl: 0 20px 25px -5px hsl(204 100% 18% / .1);
    --shadow-glow-green: 0 0 40px hsl(82 66% 44% / .3);
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 204 100% 18%;
    --sidebar-primary: 204 100% 18%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 82 66% 95%;
    --sidebar-accent-foreground: 204 100% 18%;
}

.dark {
    /* Navy-tinted dark — professional, warm-cool balance */
    --primary: 204 70% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 82 55% 48%;
    --secondary-foreground: 0 0% 100%;
    --accent: 220 14% 18%;
    --accent-foreground: 220 10% 90%;
    --background: 224 20% 10%;
    --foreground: 220 10% 90%;
    --card: 224 18% 13%;
    --card-foreground: 220 10% 90%;
    --popover: 224 18% 14%;
    --popover-foreground: 220 10% 90%;
    --muted: 224 14% 17%;
    --muted-foreground: 220 10% 55%;
    --destructive: 0 65% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 224 12% 22%;
    --input: 224 12% 20%;
    --ring: 204 70% 50%;
    --sidebar-background: 224 20% 11%;
    --sidebar-foreground: 220 10% 90%;
    --sidebar-primary: 82 55% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 224 14% 19%;
    --sidebar-accent-foreground: 220 10% 90%;
    --sidebar-border: 224 12% 22%;
    --brand-green: 82 55% 48%;
    --brand-blue: 204 70% 50%;
}

body {
    background-color: hsl(var(--background));
    font-family: Nunito, Verdana, sans-serif;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    line-height: inherit;
}

/* ── Sticky footer ─────────────────────────────────────────────────────
   Garantit que le footer reste hors viewport quand la page est courte.
   Approche : le <main> fait au moins 100vh, ce qui pousse le footer en
   dessous de la ligne de pli quoi qu'il arrive.
   On utilise !important pour gagner sur Tailwind `flex-1` (= flex: 1 1 0%
   avec basis 0 qui empêche le sticky footer en mode CDN). */
body > div.min-h-screen {
    min-height: 100vh;
    display: flex !important;
    flex-direction: column !important;
}
body > div.min-h-screen > main,
body > div.min-h-screen > main.flex-1 {
    flex: 1 0 auto !important;
    min-height: 100vh;
}
body > div.min-h-screen > footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* Compensation hauteur header (bandeau vert + nav ≈ 138px desktop, 76px mobile) */
@media (min-width: 1024px) {
    body > div.min-h-screen > main { min-height: calc(100vh - 138px); }
}
@media (max-width: 1023px) {
    body > div.min-h-screen > main { min-height: calc(100vh - 76px); }
}

/* Compensation admin bar WP (32px desktop, 46px mobile) */
.admin-bar > div.min-h-screen > main {
    min-height: calc(100vh - 138px - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar > div.min-h-screen > main {
        min-height: calc(100vh - 76px - 46px);
    }
}

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.015em;
}
h5, h6 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    line-height: 1.1;
}

/* Opt-out for specific contexts where uppercase is NOT wanted */
.iliass-no-uppercase h1,
.iliass-no-uppercase h2,
.iliass-no-uppercase h3,
.iliass-no-uppercase h4,
.iliass-page-content h1,
.iliass-page-content h2,
.iliass-page-content h3,
.iliass-page-content h4,
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 {
    text-transform: none;
    letter-spacing: normal;
}

.container-wide {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .container-wide {
        padding-left: 4rem; /* Increased padding for desktop to match design spacing */
        padding-right: 4rem;
    }
}

.container-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-narrow {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-narrow {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.image-placeholder {
    background-color: hsl(var(--muted));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Animations */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slide-up 0.8s ease-out forwards;
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.animate-slide-in-right {
    animation: slide-in-right 0.8s ease-out forwards;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
.animate-arrow-bounce {
    animation: arrow-bounce 2s infinite;
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
}

/* Utility overrides */
.bg-brand-green\/5 {
    background-color: hsla(82, 66%, 44%, 0.05);
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */

/* Formulaires & inputs */
.dark input,
.dark textarea,
.dark select {
    background-color: hsl(var(--input)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* Éléments avec bg-white hardcodé */
.dark .bg-white,
.dark [style*="background-color: white"],
.dark [style*="background-color:#fff"],
.dark [style*="background: white"],
.dark [style*="background:#fff"] {
    background-color: hsl(var(--card)) !important;
}

/* Textes hardcodés en noir */
.dark .text-black,
.dark [style*="color: black"],
.dark [style*="color:#000"],
.dark [style*="color: #000"] {
    color: hsl(var(--foreground)) !important;
}

/* BuddyPress overrides */
.dark #buddypress,
.dark #buddypress .activity-list .activity-item,
.dark #buddypress .generic-button a,
.dark #buddypress .comment-reply-link,
.dark #buddypress input[type="text"],
.dark #buddypress input[type="email"],
.dark #buddypress input[type="password"],
.dark #buddypress textarea {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* Navbar & header */
.dark nav,
.dark header {
    border-color: hsl(var(--border));
}

/* Cards et bordures */
.dark .rounded-lg.border,
.dark .rounded-xl.border,
.dark .rounded-md.border {
    border-color: hsl(var(--border));
}

/* Scrollbar */
.dark ::-webkit-scrollbar-track { background: hsl(var(--background)); }
.dark ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }

/* ── Dark mode : BuddyPress post form ───────────────────────────────────── */
.dark #whats-new-form,
.dark #buddypress #whats-new-form,
.dark #buddypress #whats-new-content,
.dark #buddypress #whats-new-options,
.dark #buddypress #whats-new-post-in-box,
.dark #buddypress .activity-update-form,
.dark #buddypress .activity-update-form textarea,
.dark #buddypress #whats-new,
.dark .dark #whats-new-textarea {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* ── Dark mode : wrapper du formulaire de post ──────────────────────────── */
.dark .rounded-lg.border.bg-card,
.dark .rounded-xl.border.bg-card,
.dark .rounded-lg.bg-card {
    background-color: hsl(var(--card)) !important;
    border-color: hsl(var(--border)) !important;
}

/* ── Dark mode : bg-muted/30 (fond textarea "Quoi de neuf") ─────────────── */
.dark .bg-muted\/30 {
    background-color: hsl(var(--muted) / 0.5) !important;
}

/* ── Dark mode : search bar dans la navbar ──────────────────────────────── */
.dark input[type="search"],
.dark input[type="text"] {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}

/* ── Dark mode : dropdowns / popovers ───────────────────────────────────── */
.dark .bg-popover {
    background-color: hsl(var(--popover)) !important;
}

/* ── Dark mode : texte de la navbar (items menu) ────────────────────────── */
.dark header a,
.dark header button,
.dark header span,
.dark header nav {
    color: hsl(var(--foreground));
}

/* ── Dark mode : overrides fiables (contournement Tailwind CDN cache) ───── */

/* Navbar secondaire (header sticky) */
.dark header.sticky,
.dark header {
    background-color: hsl(var(--background)) !important;
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Toutes les cards / panels */
.dark .bg-card,
.dark [class*="bg-card"] {
    background-color: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
}

/* Fond global */
.dark body,
.dark .bg-background,
.dark [class*="bg-background"] {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Muted */
.dark .bg-muted,
.dark [class*="bg-muted"] {
    background-color: hsl(var(--muted)) !important;
}

/* Bordures */
.dark .border,
.dark [class*="border-border"],
.dark .border-border {
    border-color: hsl(var(--border)) !important;
}

/* Textes muted */
.dark .text-muted-foreground,
.dark [class*="text-muted"] {
    color: hsl(var(--muted-foreground)) !important;
}

/* Texte foreground */
.dark .text-foreground,
.dark [class*="text-foreground"] {
    color: hsl(var(--foreground)) !important;
}

/* Inputs */
.dark input,
.dark textarea,
.dark select {
    background-color: hsl(var(--input)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 1;
}

/* Popover / dropdown */
.dark .bg-popover {
    background-color: hsl(var(--popover)) !important;
    color: hsl(var(--popover-foreground)) !important;
}

/* Liens dans le texte */
.dark a:not(.bg-primary):not(.bg-secondary):not([class*="bg-"]) {
    color: hsl(var(--primary));
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Force override for hardcoded Tailwind color classes
   Handles legacy templates that use bg-white, text-gray-*, etc.
   ═══════════════════════════════════════════════════════════════ */

/* Backgrounds */
.dark .bg-white { background-color: hsl(var(--card)) !important; }
.dark .bg-gray-50, .dark .bg-gray-100,
.dark .bg-slate-50, .dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
.dark .bg-gray-50\/50 { background-color: hsl(var(--muted) / 0.3) !important; }
.dark .bg-gray-200, .dark .bg-slate-200 { background-color: hsl(var(--muted)) !important; }

/* Text colors */
.dark .text-gray-400, .dark .text-gray-500,
.dark .text-slate-400, .dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
.dark .text-gray-600, .dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
.dark .text-gray-800, .dark .text-gray-900,
.dark .text-slate-800, .dark .text-slate-900 { color: hsl(var(--foreground)) !important; }
.dark .text-black { color: hsl(var(--foreground)) !important; }

/* Borders */
.dark .border-gray-100, .dark .border-gray-200, .dark .border-gray-300,
.dark .border-slate-100, .dark .border-slate-200 { border-color: hsl(var(--border)) !important; }

/* Semantic color badges — map to design system */
.dark .bg-blue-50, .dark .bg-blue-100 { background-color: hsl(var(--primary) / 0.15) !important; }
.dark .text-blue-600, .dark .text-blue-700, .dark .text-blue-800, .dark .text-blue-900 { color: hsl(var(--primary)) !important; }
.dark .border-blue-200 { border-color: hsl(var(--primary) / 0.3) !important; }

.dark .bg-green-50, .dark .bg-green-100 { background-color: hsl(var(--secondary) / 0.15) !important; }
.dark .text-green-600, .dark .text-green-700, .dark .text-green-800 { color: hsl(var(--secondary)) !important; }

.dark .bg-red-50, .dark .bg-red-100 { background-color: hsl(var(--destructive) / 0.15) !important; }
.dark .text-red-500, .dark .text-red-600, .dark .text-red-800 { color: hsl(var(--destructive)) !important; }
.dark .border-red-200 { border-color: hsl(var(--destructive) / 0.3) !important; }

.dark .bg-yellow-50, .dark .bg-yellow-100 { background-color: hsl(45 80% 50% / 0.15) !important; }
.dark .text-yellow-800 { color: hsl(45 80% 70%) !important; }

/* Divide colors */
.dark .divide-gray-100 > * + *, .dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }

/* Ring colors */
.dark .ring-gray-100, .dark .ring-gray-200 { --tw-ring-color: hsl(var(--border)) !important; }

/* Shadows — softer in dark mode */
.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; }
.dark .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.4) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.5) !important; }

/* ── Input fields ─────────────────────────────────────────── */
.dark input, .dark select, .dark textarea {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark input::placeholder, .dark textarea::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25) !important;
}

/* ── Buttons — outline / ghost variants ──────────────────── */
.dark .border-input,
.dark [class*="border-input"] {
    border-color: hsl(var(--border)) !important;
}
/* Outline buttons: ensure visible border + readable text */
.dark button[class*="border"][class*="bg-background"],
.dark a[class*="border"][class*="bg-background"] {
    border-color: hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
}
.dark button[class*="border"][class*="bg-background"]:hover,
.dark a[class*="border"][class*="bg-background"]:hover {
    background-color: hsl(var(--accent)) !important;
    border-color: hsl(var(--muted-foreground) / 0.4) !important;
}

/* ── Cards — ensure visible borders ─────────────────────── */
.dark .border-border,
.dark [class*="border-border"] {
    border-color: hsl(var(--border)) !important;
}
.dark .border-border\/50,
.dark .border-border\/60 {
    border-color: hsl(var(--border) / 0.7) !important;
}

/* ── Badges / tags ───────────────────────────────────────── */
.dark .bg-primary\/10, .dark .bg-primary\/5 { background-color: hsl(var(--primary) / 0.15) !important; }
.dark .bg-secondary\/10, .dark .bg-secondary\/5 { background-color: hsl(var(--secondary) / 0.15) !important; }
.dark .bg-destructive\/10, .dark .bg-destructive\/5 { background-color: hsl(var(--destructive) / 0.15) !important; }
.dark .bg-muted\/30, .dark .bg-muted\/50 { background-color: hsl(var(--muted) / 0.5) !important; }

/* ── Text on dark backgrounds ────────────────────────────── */
.dark .text-foreground { color: hsl(var(--foreground)) !important; }
.dark .text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }

/* ── CTA sections with bg-secondary — darken green, white text ── */
/* Exclude topbar (handled separately above) */
.dark section.bg-secondary,
.dark div.bg-secondary:not(.text-secondary-foreground),
.dark .section-padding .bg-secondary {
    background-color: hsl(82 35% 28%) !important;
}
.dark section.bg-secondary *,
.dark div.bg-secondary:not(.text-secondary-foreground) *,
.dark .section-padding .bg-secondary * {
    color: hsl(0 0% 92%) !important;
}
/* Buttons in CTA sections — keep their own colors */
.dark section.bg-secondary [class*="bg-primary"],
.dark .section-padding .bg-secondary [class*="bg-primary"] {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
.dark section.bg-secondary [class*="border"],
.dark .section-padding .bg-secondary [class*="border"],
.dark section.bg-secondary a,
.dark section.bg-secondary button {
    border-color: hsl(0 0% 100% / 0.4) !important;
    color: hsl(0 0% 100%) !important;
}
/* Fix inverted button: bg-secondary-foreground becomes white in dark → force dark bg */
.dark .bg-secondary-foreground {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}
.dark .text-secondary {
    color: hsl(var(--secondary)) !important;
}
.dark section.bg-secondary .bg-secondary-foreground,
.dark .bg-secondary .bg-secondary-foreground {
    background-color: hsl(0 0% 100% / 0.15) !important;
    color: hsl(0 0% 100%) !important;
    border: 1px solid hsl(0 0% 100% / 0.3);
}

/* ── Hover states ────────────────────────────────────────── */
.dark .hover\:bg-accent:hover { background-color: hsl(var(--accent)) !important; }
.dark .hover\:bg-muted:hover { background-color: hsl(var(--muted)) !important; }
.dark .hover\:bg-muted\/50:hover { background-color: hsl(var(--muted) / 0.5) !important; }

/* ── Activity cards ──────────────────────────────────────── */
.dark .iliass-activity-card {
    background: hsl(var(--card)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark .iliass-activity-card button {
    color: hsl(var(--muted-foreground));
}
.dark .iliass-activity-card button:hover {
    color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.08);
}

/* ── Search bar in header ────────────────────────────────── */
.dark .bg-muted\/50 {
    background-color: hsl(var(--muted) / 0.5) !important;
}

/* ── Member cards ────────────────────────────────────────── */
.dark .rounded-lg.border.bg-card {
    border-color: hsl(var(--border)) !important;
}
.dark .rounded-lg.border.bg-card:hover {
    border-color: hsl(var(--primary) / 0.5) !important;
}

/* ── Profile sections ────────────────────────────────────── */
.dark .rounded-2xl[style*="background:var(--card)"],
.dark [style*="background: var(--card)"] {
    border-color: hsl(var(--border)) !important;
}

/* ── BuddyPress ──────────────────────────────────────────── */
.dark #buddypress,
.dark #buddypress .activity-content,
.dark #buddypress .activity-header {
    color: hsl(var(--foreground));
}
.dark #buddypress .activity-header a {
    color: hsl(var(--primary));
}
.dark #buddypress #whats-new-form textarea {
    background: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark #buddypress a { color: hsl(var(--primary)); }

/* ── Notification dropdown ───────────────────────────────── */
.dark .bg-popover {
    background-color: hsl(var(--popover)) !important;
    border-color: hsl(var(--border)) !important;
}

/* ── Edit profile fields ─────────────────────────────────── */
.dark .editfield,
.dark .iliass-edit-field {
    background: hsl(var(--card)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark .editfield legend,
.dark .editfield label {
    color: hsl(var(--foreground)) !important;
}
.dark .editfield .description {
    color: hsl(var(--muted-foreground)) !important;
}

/* ── Registration form ───────────────────────────────────── */
.dark .bg-card\/95 { background-color: hsl(var(--card) / 0.95) !important; }
.dark .backdrop-blur-sm { backdrop-filter: blur(8px); }

/* ── Footer ──────────────────────────────────────────────── */
.dark footer { background-color: hsl(var(--card)) !important; }

/* ── Cookie banner ───────────────────────────────────────── */
.dark .cookie-banner-overlay { background: rgba(0,0,0,0.8) !important; }

/* ── Admin delete buttons ────────────────────────────────── */
.dark .iliass-admin-delete-comment { color: hsl(var(--destructive)) !important; }

/* ── Shadows — softer, more visible in dark ──────────────── */
.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px hsl(var(--border) / 0.5) !important; }
.dark .shadow-md { box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 0 1px hsl(var(--border) / 0.5) !important; }
.dark .shadow-lg { box-shadow: 0 10px 20px rgba(0,0,0,0.5) !important; }
.dark .shadow-xl { box-shadow: 0 20px 30px rgba(0,0,0,0.5) !important; }

/* ── Scrollbar ───────────────────────────────────────────── */
.dark ::-webkit-scrollbar { width: 8px; }
.dark ::-webkit-scrollbar-track { background: hsl(var(--background)); }
.dark ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* ── Header / Navbar ─────────────────────────────────────── */
.dark header.sticky,
.dark header { background-color: hsl(var(--background)) !important; border-color: hsl(var(--border)) !important; }
/* All header text and icons must be light */
.dark header a, .dark header span, .dark header button,
.dark header svg { color: hsl(var(--foreground)) !important; stroke: currentColor; }
/* Except buttons with colored bg */
.dark header .bg-primary, .dark header .bg-secondary,
.dark header [class*="bg-primary"], .dark header [class*="bg-secondary"] { color: hsl(var(--primary-foreground)) !important; }
.dark header .bg-secondary-foreground\/5 { background: hsl(var(--muted)) !important; }
/* Logo — invert dark logos in navbar and footer only */
.dark .iliass-nav-logo,
.dark .iliass-footer-logo {
    filter: brightness(0) invert(1);
}
/* Topbar — dark olive-green, light text */
.dark .bg-secondary.text-secondary-foreground { background-color: hsl(82 35% 22%) !important; }
.dark .bg-secondary.text-secondary-foreground,
.dark .bg-secondary.text-secondary-foreground a,
.dark .bg-secondary.text-secondary-foreground span,
.dark .bg-secondary.text-secondary-foreground button,
.dark .bg-secondary.text-secondary-foreground svg { color: hsl(0 0% 88%) !important; }
.dark .bg-secondary.text-secondary-foreground .bg-secondary-foreground\/5 { background: hsl(82 25% 18%) !important; }
/* Search bar */
.dark header input { background: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; border-color: hsl(var(--border)) !important; }
.dark header select { background: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; border-color: hsl(var(--border)) !important; }
/* Primary menu */
.dark .primary-menu > li > a { color: hsl(var(--foreground) / 0.9) !important; }
.dark .primary-menu > li > a:hover { background-color: hsl(var(--muted)) !important; }
.dark .primary-menu .sub-menu { background-color: hsl(var(--popover)) !important; border-color: hsl(var(--border)) !important; }
.dark .primary-menu .sub-menu a { color: hsl(var(--foreground) / 0.9) !important; }
.dark .primary-menu .sub-menu a:hover { background-color: hsl(var(--muted)) !important; }

/* ── Notification dropdown dark ──────────────────────────── */
.dark #notification-dropdown,
.dark #mobile-notif-dropdown,
.dark #mobile-lang-dropdown,
.dark #lang-dropdown {
    background: hsl(var(--popover)) !important;
    border-color: hsl(var(--border)) !important;
}
.dark #notification-dropdown *, .dark #mobile-notif-dropdown * { color: hsl(var(--foreground)) !important; }
.dark .notif-item:hover { background: hsl(var(--muted)) !important; }
.dark .notif-item .bg-primary\/5 { background: hsl(var(--primary) / 0.1) !important; }
.dark .notif-item .bg-primary\/10 { background: hsl(var(--primary) / 0.15) !important; }

/* ── Mobile drawer dark ──────────────────────────────────── */
.dark #mobile-menu { background: hsl(var(--background)) !important; }
.dark #mobile-menu * { color: hsl(var(--foreground)); }
.dark #mobile-menu .bg-primary { background: hsl(var(--primary)) !important; }
.dark #mobile-menu .bg-primary * { color: hsl(var(--primary-foreground)) !important; }
.dark #mobile-menu .bg-muted\/50 { background: hsl(var(--muted) / 0.5) !important; }
.dark #mobile-menu .border-border { border-color: hsl(var(--border)) !important; }
.dark #mobile-menu input { background: hsl(var(--muted)) !important; border-color: hsl(var(--border)) !important; }

/* ── Global text colors ─────────────────────────────────── */
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: hsl(var(--foreground)); }
.dark p { color: hsl(var(--foreground) / 0.85); }

/* ── BuddyPress full dark ────────────────────────────────── */
.dark #buddypress ul.activity-list li.activity-item,
.dark #buddypress .messages-notices li,
.dark #buddypress .bp-settings-container .settings-section { background-color: hsl(var(--card)) !important; border-color: hsl(var(--border)) !important; }
.dark .bpfb_form_container, .dark .bpfb_form_container * { background-color: transparent !important; }
.dark #bp-nouveau-activity-form,
.dark .activity-update-form,
.dark #whats-new-content,
.dark #whats-new-options { background-color: hsl(var(--card)) !important; border-color: hsl(var(--border)) !important; }

/* ── Footer (navy bg) ────────────────────────────────────── */
.dark footer { background-color: hsl(var(--card)) !important; }
.dark footer p, .dark footer span, .dark footer div, .dark footer li { color: hsl(var(--foreground) / 0.8) !important; }
.dark footer h3, .dark footer h4, .dark footer strong { color: hsl(var(--foreground)) !important; }
.dark footer a { color: hsl(var(--foreground) / 0.8) !important; }
.dark footer a:hover { color: hsl(var(--secondary)) !important; }
.dark footer .border-t { border-color: hsl(var(--border)) !important; }

/* ── Selection ───────────────────────────────────────────── */
.dark ::selection { background: hsl(var(--primary) / 0.3); color: hsl(var(--foreground)); }