/*
 * ═══════════════════════════════════════════════════════════
 *  MOFH Hosting UI — Mobile-First Design System v2
 *  Color Scheme: Indigo / Violet / Rose Accents
 * ═══════════════════════════════════════════════════════════
 */

/* ── CSS Variables ── */
:root {
    /* ── Brand colours ── */
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-light: #eef2ff;
    --color-accent: #ec4899;

    /* ── Semantic surface tokens (light-mode defaults) ── */
    --bg: #f8fafc;
    /* page background          */
    --surface: #ffffff;
    /* card / panel surface      */
    --surface-raised: #f1f5f9;
    /* slightly raised, e.g. modal footer */
    --surface-hover: #f8fafc;
    /* hover state on surface items */
    --border: #e2e8f0;
    /* default border            */
    --border-muted: #f1f5f9;
    /* subtle dividers           */

    /* ── Semantic text tokens ── */
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-body: #475569;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;
    --text-placeholder: #94a3b8;

    /* ── Scrollbar tokens ── */
    --scrollbar-thumb: #94a3b8;
    --scrollbar-track: transparent;

    /* ── Legacy aliases (keep for backward compat) ── */
    --color-surface: #f8fafc;
    --color-card: #ffffff;
    --color-dark: #0f172a;

    /* ── Radius & shadow ── */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .07), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);
    --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --transition-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 300ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Reset & Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Selection ── */
::selection {
    background-color: var(--color-primary);
    color: #fff;
}

/* ── Focus ── */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Keyframe Animations ── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn .4s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp .5s ease-out forwards;
}

.animate-slide-in-up {
    animation: slideInUp .4s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn .3s ease-out forwards;
}

/* ── Skeleton Loading ── */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ── Mobile Drawer (Slide-in Nav) ── */
.mobile-drawer-overlay {
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity var(--transition-slow);
}

.mobile-drawer {
    transition: transform 350ms cubic-bezier(.32, .72, 0, 1);
    -webkit-overflow-scrolling: touch;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .15);
}

/* ── Card Hover ── */
.card-hover {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* ── Gradient Helpers ── */
.gradient-bg {
    background: linear-gradient(135deg, var(--grad-from, #6366f1), var(--grad-to, #8b5cf6));
}

.gradient-text {
    background: linear-gradient(135deg, var(--grad-from, #6366f1), var(--grad-to, #8b5cf6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Mobile Menu Toggle ── */
.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: block;
}

/* ── Touch-Friendly Targets (mobile-first) ── */
@media (max-width: 639px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    button,
    a[role="button"],
    [type="submit"] {
        min-height: 44px;
    }
}

/* ── Responsive Table ── */
@media (max-width: 639px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* ── Pill Tabs (horizontal scroll on mobile) ── */
.pill-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .5rem;
}

.pill-tabs::-webkit-scrollbar {
    display: none;
}

/* ── Smooth transitions on interactive elements ── */
input,
select,
textarea {
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

a,
button {
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), opacity var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* ── Status Dot Animation ── */
.status-dot-active {
    animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Stagger Animation Children ── */
.stagger-children>* {
    animation: fadeInUp .5s ease-out both;
}

.stagger-children>*:nth-child(1) {
    animation-delay: 0ms;
}

.stagger-children>*:nth-child(2) {
    animation-delay: 60ms;
}

.stagger-children>*:nth-child(3) {
    animation-delay: 120ms;
}

.stagger-children>*:nth-child(4) {
    animation-delay: 180ms;
}

.stagger-children>*:nth-child(5) {
    animation-delay: 240ms;
}

.stagger-children>*:nth-child(6) {
    animation-delay: 300ms;
}

/* ══════════════════════════════════════════════════════════
 *  DARK MODE — token-driven, single source of truth
 *  CSS variables are flipped here; components use dark:
 *  Tailwind variants or consume tokens via var().
 * ══════════════════════════════════════════════════════════ */

html.dark {
    color-scheme: dark;

    /* ── Surface & background tokens ── */
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-raised: #0f172a;
    --surface-hover: #334155;
    --border: #334155;
    --border-muted: #1e293b;

    /* ── Text tokens ── */
    --text-primary: #f1f5f9;
    --text-secondary: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #475569;
    --text-placeholder: #64748b;

    /* ── Scrollbar tokens ── */
    --scrollbar-thumb: #475569;
    --scrollbar-track: #0f172a;
}

/* ── Base: body & page background ── */
html.dark body {
    background-color: var(--bg);
    color: var(--text-body);
}

/* ── Custom class: primary-light tinted in dark mode ── */
html.dark .bg-primary-light,
html.dark .hover\:bg-primary-light:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

/* ── Catch-all background overrides (page content files use bare Tailwind) ── */
html.dark .bg-white,
html.dark .bg-white\/80 {
    background-color: var(--surface) !important;
}

html.dark .bg-slate-50,
html.dark .bg-gray-50 {
    background-color: var(--bg) !important;
}

html.dark .bg-slate-100,
html.dark .bg-gray-100 {
    background-color: #334155 !important;
}

html.dark .bg-slate-200,
html.dark .bg-gray-200 {
    background-color: #475569 !important;
}

html.dark .bg-slate-800 {
    background-color: var(--bg) !important;
}

html.dark .bg-slate-900 {
    background-color: #020617 !important;
}

/* Status / alert badge backgrounds */
html.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.15) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.10) !important;
}

html.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.10) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.10) !important;
}

html.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.10) !important;
}

html.dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}

html.dark .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.10) !important;
}

html.dark .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.10) !important;
}

html.dark .bg-indigo-100 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.10) !important;
}

html.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Section-level backgrounds */
html.dark #plans,
html.dark #features,
html.dark #hosting {
    background-color: var(--bg) !important;
}

/* AdSense units — layout containment (all modes) */
ins.adsbygoogle.google-auto-placed,
.google-auto-placed {
    max-width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* AdSense units — prevent white-iframe bleed in dark mode */
html.dark ins.adsbygoogle {
    background-color: var(--surface) !important;
}

html.dark ins.adsbygoogle.google-auto-placed,
html.dark .google-auto-placed,
html.dark .google-auto-placed > ins {
    background-color: var(--bg) !important;
    color-scheme: dark !important;
}

/* ── Catch-all text overrides ── */
html.dark .text-slate-900,
html.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

html.dark .text-slate-800,
html.dark .text-gray-800 {
    color: var(--text-secondary) !important;
}

html.dark .text-slate-700,
html.dark .text-gray-700 {
    color: var(--text-body) !important;
}

html.dark .text-slate-600,
html.dark .text-gray-600 {
    color: var(--text-muted) !important;
}

html.dark .text-slate-500,
html.dark .text-gray-500 {
    color: #94a3b8 !important;
}

html.dark .text-slate-400,
html.dark .text-gray-400 {
    color: #94a3b8 !important;
}

html.dark .text-slate-300,
html.dark .text-gray-300 {
    color: #cbd5e1 !important;
}

/* Semantic colour overrides – covers all shades used in status badges and alerts */
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-red-800,
html.dark .text-red-900 {
    color: #fca5a5 !important;
}

html.dark .text-red-300 {
    color: #fca5a5 !important;
}

html.dark .text-green-600,
html.dark .text-green-700,
html.dark .text-green-800 {
    color: #4ade80 !important;
}

html.dark .text-green-300 {
    color: #86efac !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-800 {
    color: #34d399 !important;
}

html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 {
    color: #fcd34d !important;
}

html.dark .text-amber-300 {
    color: #fde68a !important;
}

html.dark .text-yellow-700,
html.dark .text-yellow-800 {
    color: #fde68a !important;
}

html.dark .text-yellow-300 {
    color: #fef08a !important;
}

html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-orange-800,
html.dark .text-orange-900 {
    color: #fdba74 !important;
}

html.dark .text-orange-300 {
    color: #fed7aa !important;
}

html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900 {
    color: #93c5fd !important;
}

html.dark .text-blue-300 {
    color: #93c5fd !important;
}

html.dark .text-indigo-800 {
    color: #a5b4fc !important;
}

html.dark .text-slate-800 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

/* ── Catch-all border overrides ── */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/60,
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: var(--border) !important;
}

html.dark .border-slate-800 {
    border-color: var(--border-muted) !important;
}

html.dark .border-green-200 {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .border-amber-200 {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .border-amber-300 {
    border-color: rgba(245, 158, 11, 0.4) !important;
}

html.dark .border-orange-100,
html.dark .border-orange-200 {
    border-color: rgba(249, 115, 22, 0.3) !important;
}

html.dark .border-blue-100,
html.dark .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .border-indigo-200 {
    border-color: rgba(99, 102, 241, 0.3) !important;
}

html.dark .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Divide colours */
html.dark .divide-slate-100> :not([hidden])~ :not([hidden]),
html.dark .divide-slate-200> :not([hidden])~ :not([hidden]),
html.dark .divide-gray-100> :not([hidden])~ :not([hidden]) {
    border-color: var(--border) !important;
}

/* ── Catch-all hover overrides ── */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-100:hover {
    background-color: var(--surface-hover) !important;
}

html.dark .hover\:bg-slate-200:hover {
    background-color: #475569 !important;
}

html.dark .hover\:bg-red-50:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
}

html.dark .hover\:text-slate-600:hover,
html.dark .hover\:text-slate-900:hover {
    color: var(--text-secondary) !important;
}

/* Gradient hero exceptions — CTAs inside gradient stay white-ish */
html.dark .gradient-bg .bg-white {
    background-color: rgba(255, 255, 255, 0.92) !important;
}

html.dark .gradient-bg .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.82) !important;
}

/* Hero wave SVG — override hardcoded #f8fafc fill */
html.dark .hero-wave svg path {
    fill: var(--bg) !important;
}

/* OAuth / form divider separator span: 'bg-white px-3' becomes invisible
   because bg-white override fires. Match the card surface color instead. */
html.dark .relative span.bg-white {
    background-color: var(--surface) !important;
    color: #94a3b8 !important;
}

/* Active nav links scoped to sidebar nav elements only —
   prevents catching quick-action card <a> tags */
html.dark nav a.bg-primary-light,
html.dark aside a.bg-primary-light,
html.dark .bg-primary-light.text-primary {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

/* Icon wells — give colored accent backgrounds visible dark tones
   instead of defaulting to the page bg color via the bg-*-50 override */
html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

html.dark .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.15) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.12) !important;
}

html.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html.dark .bg-rose-50 {
    background-color: rgba(244, 63, 94, 0.12) !important;
}

html.dark .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.12) !important;
}

html.dark .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.12) !important;
}

/* Icon well hover states */
html.dark .group:hover .group-hover\:bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

html.dark .group:hover .group-hover\:bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.22) !important;
}

html.dark .group:hover .group-hover\:bg-purple-100 {
    background-color: rgba(168, 85, 247, 0.25) !important;
}

html.dark .gradient-bg .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.82) !important;
}

/* ── Navigation bar (backdrop-filter needs CSS, not Tailwind) ── */
html.dark nav.sticky {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: var(--border) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ── Form elements (native autofill bg can't be set via Tailwind) ── */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text-secondary) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--text-placeholder) !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* ── Code / pre ── */
html.dark code,
html.dark pre {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* ── Skeleton loader ── */
html.dark .skeleton {
    background: linear-gradient(90deg,
            var(--surface) 25%,
            var(--surface-hover) 50%,
            var(--surface) 75%);
    background-size: 200% 100%;
}

/* ── Scrollbar ── */
html.dark ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

html.dark ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

/* ── Shadows (attenuated in dark mode) ── */
html.dark [class*="shadow"] {
    --tw-shadow-color: rgba(0, 0, 0, 0.4);
}

/* ── Hero wave SVG fill ── */
html.dark .hero-wave path {
    fill: var(--bg);
}

/* ── Selection ── */
html.dark ::selection {
    background-color: var(--color-primary);
    color: #fff;
}

/* ── Theme toggle button ── */
html.dark .theme-toggle-btn {
    color: var(--text-muted);
}

html.dark .theme-toggle-btn:hover {
    color: var(--color-primary);
    background-color: rgba(99, 102, 241, 0.15);
}

/* ── Legal content ── */
html.dark .legal-content h2 {
    color: var(--text-primary);
    border-bottom-color: var(--border);
}

html.dark .legal-content h3 {
    color: var(--text-secondary);
}

html.dark .legal-content p,
html.dark .legal-content li {
    color: var(--text-muted);
}

html.dark .legal-content strong {
    color: var(--text-body);
}

html.dark .legal-content a {
    color: #818cf8;
}


/* ── Theme Toggle Button ── */
.theme-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    color: #64748b;
    /* slate-500 */
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
    border: none;
    z-index: 50;
}

.theme-toggle-btn:hover {
    color: var(--color-primary);
    background-color: rgba(99, 102, 241, 0.1);
}

html.dark .theme-toggle-btn {
    color: #94a3b8;
    /* slate-400 */
}

html.dark .theme-toggle-btn:hover {
    color: var(--color-primary);
    background-color: rgba(99, 102, 241, 0.15);
}

/* 
   Explicit Icon Switching Logic
   1. Hide everything by default 
   2. Show Moon ONLY when NOT dark 
   3. Show Sun ONLY when dark
*/

.theme-toggle-btn svg {
    display: none !important;
}

/* Light Mode: Show Moon (to switch to dark) */
html:not(.dark) .theme-toggle-btn .icon-moon {
    display: block !important;
}

/* Dark Mode: Show Sun (to switch to light) */
html.dark .theme-toggle-btn .icon-sun {
    display: block !important;
}

/* ── Legal Pages (Terms / Privacy) ── */
.legal-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
}

.legal-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    padding-left: 0.75rem;
    border-left: 3px solid var(--color-primary);
}

.legal-content p {
    color: #475569;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.legal-content ul {
    margin: 1rem 0 1.25rem 1.5rem;
    list-style-type: disc;
}

.legal-content ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    list-style-type: circle;
}

.legal-content li {
    color: #475569;
    line-height: 1.75;
    margin-bottom: 0.35rem;
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-content strong {
    color: #334155;
    font-weight: 600;
}