/**
 * UniUyo Community — Dark Mode Design System
 *
 * A single shared stylesheet that enforces consistent dark-mode rules
 * across every page, instead of each page needing its own hand-written
 * (and easily inconsistent) html.dark overrides. Included once, applies
 * everywhere.
 *
 * THE RULES (as specified):
 * 1. In dark mode, only three colors are used: black/near-black
 *    backgrounds, red accent cards, and white text/icons. No gray text
 *    anywhere — every text color in dark mode resolves to white.
 * 2. Every button in dark mode uses the app's red pill-button style
 *    (solid red background, white text/icon, fully rounded) — the same
 *    style already used correctly on Profile's Dashboard/Edit
 *    Profile/Add to Story buttons.
 * 3. Icon "chip" backgrounds (Quick Access, feature icons, list-row
 *    icons) become solid red with white icons, instead of the pale
 *    pink-tinted light-mode backgrounds.
 * 4. No section keeps a white/light card background in dark mode — every
 *    card, composer bar, story tray, announcement box, etc. gets the same
 *    dark treatment.
 * 5. Content cards on pages with their own card systems (Hostel,
 *    Marketplace, Admin Directory, Campus Map, Venues, and similar) get
 *    an iOS-style frosted glass treatment: translucent dark background,
 *    backdrop blur, soft border — instead of a flat opaque dark card.
 *
 * WHY !important IS USED THROUGHOUT:
 * Most of the app's color values are set via inline style="" attributes
 * (style="background:#fee2e2", style="color:#dc2626", etc.) rather than
 * classes. Inline styles have higher CSS specificity than an external
 * stylesheet's class selectors, so a normal override rule would silently
 * lose to the inline style and do nothing. !important is the correct,
 * standard tool for deliberately overriding inline styles — used here
 * narrowly, only within html.dark rules, so it never affects light mode.
 *
 * HOW GRAY GETS ELIMINATED:
 * Rather than hunting down every individual gray hex value across dozens
 * of pages, this targets Tailwind's gray utility classes directly
 * (text-gray-400 through text-gray-900, which is what the overwhelming
 * majority of the app's text actually uses) plus the common raw hex
 * values (#6b7280, #9ca3af, #d1d5db, etc.) seen throughout the codebase.
 * Any gray not covered by one of these is a value this stylesheet hasn't
 * encountered yet — flag it and it can be added.
 */

/* ══════════════════════════════════════════════════════════════════
   1. BASE — background and text foundation
   ══════════════════════════════════════════════════════════════════ */
html.dark, html.dark body {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   2. NO GRAY TEXT — every gray resolves to white
   ══════════════════════════════════════════════════════════════════ */
html.dark .text-gray-300,
html.dark .text-gray-400,
html.dark .text-gray-500,
html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-gray-900,
html.dark [style*="color:#6b7280"],
html.dark [style*="color: #6b7280"],
html.dark [style*="color:#9ca3af"],
html.dark [style*="color: #9ca3af"],
html.dark [style*="color:#d1d5db"],
html.dark [style*="color: #d1d5db"],
html.dark [style*="color:#4b5563"],
html.dark [style*="color: #4b5563"],
html.dark [style*="color:#374151"],
html.dark [style*="color: #374151"],
html.dark [style*="color:#111827"],
html.dark [style*="color: #111827"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color: #1f2937"],
html.dark [style*="color:#e5e7eb"],
html.dark [style*="color: #e5e7eb"],
html.dark [style*="color:#f3f4f6"],
html.dark [style*="color: #f3f4f6"],
html.dark [style*="color:#f9fafb"],
html.dark [style*="color: #f9fafb"] {
    color: #ffffff !important;
}

/* Placeholders stay legible without becoming pure white-on-black noise —
   a slightly dimmed white keeps them visually distinct from real content
   while remaining part of the "no gray" rule (this is white at reduced
   opacity, not a gray hex value). */
html.dark ::placeholder { color: rgba(255,255,255,0.45) !important; }

/* ══════════════════════════════════════════════════════════════════
   3. NO WHITE/LIGHT SECTIONS — every card, bar, and section goes dark
   ══════════════════════════════════════════════════════════════════ */
html.dark .bg-white,
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background: #fafafa"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background: #f9fafb"],
html.dark [style*="background:#f8f9fa"],
html.dark [style*="background: #f8f9fa"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background:#f0f2f5"],
html.dark [style*="background: #f0f2f5"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background: #e5e7eb"],
html.dark [style*="background:#d1d5db"],
html.dark [style*="background: #d1d5db"] {
    background: #121212 !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background: #1a1a1a !important;
}

/* Borders that were light-gray-on-white need to become a dark hairline,
   not vanish entirely (an invisible border would make card edges
   disappear against the black page background). */
html.dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border:1px solid #f0f0f0"],
html.dark [style*="border: 1px solid #f0f0f0"],
html.dark [style*="border-bottom:1px solid #e5e7eb"],
html.dark [style*="border-bottom: 1px solid #e5e7eb"],
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: #2a2a2a !important;
}

/* ══════════════════════════════════════════════════════════════════
   4. BUTTONS — every button becomes the standard red pill
   ══════════════════════════════════════════════════════════════════
   Deliberately scoped to actual interactive controls (button elements,
   Tailwind's rounded-full pattern, and elements already using the red
   button classes) rather than every div on the page, so this doesn't
   accidentally reshape unrelated card containers that happen to have
   rounded corners. */
html.dark button:not(.toggle):not(.mode-card):not([class*="icon-btn"]):not([class*="action-btn"]):not(.bnav-item):not(#uniuyo-mode-badge),
html.dark .btn-primary,
html.dark a.rounded-full.bg-red-600,
html.dark button.rounded-full.bg-red-600,
html.dark [class*="rounded-full"][class*="bg-red"] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}
html.dark button:not(.toggle):not(.mode-card):not([class*="icon-btn"]):not([class*="action-btn"]):not(.bnav-item):not(#uniuyo-mode-badge) i,
html.dark button:not(.toggle):not(.mode-card):not([class*="icon-btn"]):not([class*="action-btn"]):not(.bnav-item):not(#uniuyo-mode-badge) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Secondary/outline buttons (gray background, dark text in light mode —
   e.g. "Cancel" actions) get a dark-but-distinct treatment so they don't
   visually vanish against a pure-black page or get mistaken for a
   primary red action. */
html.dark button.btn-outline,
html.dark [class*="bg-gray-100"][class*="rounded"],
html.dark .bg-gray-200,
html.dark .bg-gray-300,
html.dark [style*="background:#f3f4f6"] button,
html.dark [style*="background:#f9fafb"] button {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   5. ICON CHIPS — Quick Access and feature icons: red background, white icon
   ══════════════════════════════════════════════════════════════════ */
html.dark .qa-icon,
html.dark .feat-icon,
html.dark [style*="background:#fee2e2"],
html.dark [style*="background: #fee2e2"],
html.dark [style*="background:#fef2f2"],
html.dark [style*="background: #fef2f2"],
html.dark .row-icon,
html.dark [class*="w-9"][class*="h-9"][class*="rounded-full"][class*="bg-red-50"],
html.dark [class*="w-10"][class*="h-10"][class*="rounded-full"][class*="bg-red-50"] {
    background: #dc2626 !important;
}
html.dark .qa-icon i,
html.dark .qa-icon svg,
html.dark .feat-icon i,
html.dark .feat-icon svg,
html.dark [style*="background:#fee2e2"] i,
html.dark [style*="background: #fee2e2"] i,
html.dark [style*="color:#dc2626"],
html.dark [style*="color: #dc2626"],
html.dark .row-icon i,
html.dark .text-red-600,
html.dark .text-red-500 {
    color: #ffffff !important;
}

/* Filled SVGs (fill=, not stroke=) need the fill property specifically —
   color: doesn't affect fill on its own for most inline SVG icon sets
   used across the app. */
html.dark .qa-icon svg[fill],
html.dark .feat-icon svg[fill] {
    fill: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   6. GLASSMORPHIC CARDS — pages with their own card systems
   ══════════════════════════════════════════════════════════════════
   Deliberately opt-in via .glass-card rather than blanket-applied to
   every .bg-white, so this doesn't fight with Home's own feed-card
   dark styling (which already has its own established, correct dark
   treatment) or introduce blur into places it wasn't asked for. Pages
   that want this (Hostel, Marketplace, Admin Directory, Campus Map,
   Venues, and similar) add class="glass-card" to their card container —
   see the per-page changes that pair with this stylesheet. */
html.dark .glass-card {
    background: rgba(30, 30, 30, 0.55) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
html.dark .glass-card * {
    color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════
   7. PROFILE SOCIAL LINK CARDS — subtle red-to-white gradient
   ══════════════════════════════════════════════════════════════════
   Specifically the Instagram/Facebook/YouTube/TikTok/WhatsApp link row
   on the Profile page — plain white in light mode, given a soft brand
   gradient here so it feels more integrated with dark mode instead of
   sitting as a flat white/gray chip. */
html.dark .uniuyo-social-link-card {
    background: linear-gradient(135deg, rgba(220,38,38,0.35), rgba(255,255,255,0.08)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}