/* =====================================================================
   White-label theme system (plan #9)
   ---------------------------------------------------------------------
   The website's `theme` column selects one of these body classes:
     body.theme-default  — clean professional SaaS layout
     body.theme-modern   — rounded cards, gradients, glass accents
     body.theme-minimal  — flat, thin borders, maximum whitespace

   Views only ever use the --t-* tokens below, so a new theme is just a
   new block + tokens. `--p` / `--s` (brand colors) are injected inline
   from the website's primary/secondary_color.
   ===================================================================== */

/* ---------- DEFAULT — clean professional SaaS ---------- */
body.theme-default {
    --t-radius-sm: .375rem;
    --t-radius: .625rem;
    --t-radius-lg: 1rem;
    --t-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --t-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --t-shadow-lg: 0 14px 40px rgba(16, 24, 40, .14);
    --t-bg: #f8fafc;
    --t-surface: #ffffff;
    --t-border: #e5e7eb;
    --t-ink: #101828;
    --t-muted: #667085;
    --t-nav: rgba(255, 255, 255, .92);
    --t-hero: linear-gradient(135deg, var(--p), var(--s));
    --t-btn-radius: .55rem;
    --t-btn-bg: linear-gradient(135deg, var(--p), var(--s));
    --t-btn-border: 0;
    --t-card-top: 4px solid var(--p);
    --t-chip-bg: rgba(255, 255, 255, .14);
}

/* ---------- MODERN — rounded, gradients, glass (AISensy / WATI feel) ---------- */
body.theme-modern {
    --t-radius-sm: .7rem;
    --t-radius: 1.05rem;
    --t-radius-lg: 1.6rem;
    --t-shadow-sm: 0 2px 8px rgba(99, 102, 241, .09);
    --t-shadow: 0 10px 30px rgba(99, 102, 241, .14);
    --t-shadow-lg: 0 30px 70px rgba(99, 102, 241, .22);
    --t-bg: #faf9ff;
    --t-surface: #ffffff;
    --t-border: #ece7ff;
    --t-ink: #181226;
    --t-muted: #6d6789;
    --t-nav: rgba(255, 255, 255, .8);
    --t-hero: radial-gradient(900px 480px at 15% -20%, color-mix(in srgb, var(--p) 42%, #fff), transparent 70%),
              radial-gradient(700px 420px at 90% 110%, color-mix(in srgb, var(--s) 45%, #fff), transparent 70%),
              linear-gradient(135deg, var(--p), var(--s));
    --t-btn-radius: 999px;
    --t-btn-bg: linear-gradient(135deg, var(--p), var(--s));
    --t-btn-border: 0;
    --t-card-top: none;
    --t-chip-bg: rgba(255, 255, 255, .18);
}

/* ---------- MINIMAL — flat, thin borders, whitespace ---------- */
body.theme-minimal {
    --t-radius-sm: 0;
    --t-radius: .25rem;
    --t-radius-lg: .375rem;
    --t-shadow-sm: none;
    --t-shadow: none;
    --t-shadow-lg: none;
    --t-bg: #ffffff;
    --t-surface: #ffffff;
    --t-border: #d9dde3;
    --t-ink: #111418;
    --t-muted: #5b6470;
    --t-nav: #ffffff;
    --t-hero: var(--p);
    --t-btn-radius: 0;
    --t-btn-bg: var(--p);
    --t-btn-border: 0;
    --t-card-top: none;
    --t-chip-bg: rgba(0, 0, 0, .06);
}

/* =====================================================================
   Landing page components (home.php)
   ===================================================================== */
body { font-family: var(--t-font, 'Inter', system-ui, sans-serif); background: var(--t-bg); color: var(--t-ink); }

.land-nav { background: var(--t-nav); backdrop-filter: blur(10px); border-bottom: 1px solid var(--t-border); }
.land-nav .btn-brand-land { background: var(--t-btn-bg); border: var(--t-btn-border); border-radius: var(--t-btn-radius); color: #fff; font-weight: 600; padding: .5rem 1.1rem; }
.land-nav .btn-brand-land:hover { filter: brightness(1.1); color: #fff; }

.land-hero { background: var(--t-hero); color: #fff; position: relative; overflow: hidden; padding: 5.2rem 0 6rem; }
.land-hero .hero-chip { display: inline-flex; align-items: center; gap: .45rem; background: var(--t-chip-bg); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600; }
.land-hero .btn-hero { border-radius: var(--t-btn-radius); border: 0; }
.land-hero .btn-hero-light { background: #fff; color: var(--t-ink); }
.land-hero .btn-hero-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }

/* Chat mockup card in the hero (Modern/Default) */
.hero-mock { position: relative; }
.hero-mock .mock-card { background: #fff; border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); overflow: hidden; max-width: 380px; margin: 0 auto; }
.hero-mock .mock-head { padding: .9rem 1.1rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--t-border); }
.hero-mock .mock-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--p), var(--s)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hero-mock .mock-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.hero-mock .mock-bubble { max-width: 82%; padding: .5rem .8rem; border-radius: .85rem; font-size: .82rem; }
.hero-mock .mock-bubble.in { align-self: flex-start; background: #f1f3f7; color: var(--t-ink); border-bottom-left-radius: .2rem; }
.hero-mock .mock-bubble.out { align-self: flex-end; background: var(--p); color: #fff; border-bottom-right-radius: .2rem; }
.hero-mock .mock-reply { display: flex; gap: .5rem; padding: .85rem 1.1rem; border-top: 1px solid var(--t-border); }
.hero-mock .mock-reply .mock-input { flex: 1; height: 34px; border-radius: 999px; border: 1px solid var(--t-border); background: #f8fafc; }
.hero-mock .mock-send { width: 34px; height: 34px; border-radius: 50%; background: var(--p); display: flex; align-items: center; justify-content: center; color: #fff; }

.land-section { padding: 4.5rem 0; }
.land-section .sec-label { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: var(--p); }
.land-section h2 { font-weight: 800; letter-spacing: -.02em; }

.land-card { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
.land-card .card-top-accent { height: 5px; background: linear-gradient(90deg, var(--p), var(--s)); border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0; }
.feature-icon { width: 46px; height: 46px; border-radius: var(--t-radius); background: color-mix(in srgb, var(--p) 12%, #fff); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

.plan-land { border-top: var(--t-card-top); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
.plan-land .btn-plan { background: var(--t-btn-bg); border: var(--t-btn-border); border-radius: var(--t-btn-radius); color: #fff; font-weight: 600; }
.plan-land .btn-plan:hover { filter: brightness(1.1); color: #fff; }
.plan-land.popular { border: 2px solid var(--p); }

.land-footer { background: var(--t-ink); color: #fff; }
.land-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }

/* ---------- MODERN hero: blobs, floating stat chips, tilted mock ---------- */
.hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero-blob.a { width: 380px; height: 380px; background: var(--s); top: -140px; left: -80px; }
.hero-blob.b { width: 300px; height: 300px; background: #fff; top: 40px; right: -120px; opacity: .18; }
.hero-blob.c { width: 260px; height: 260px; background: var(--p); bottom: -120px; left: 40%; }
.hero-tilt { transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); }
.float-chip { position: absolute; background: #fff; border-radius: var(--t-radius); box-shadow: var(--t-shadow-lg); padding: .6rem .9rem; font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; animation: floaty 4s ease-in-out infinite; }
.float-chip .ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.float-chip.top { top: -18px; right: -26px; animation-delay: .6s; }
.float-chip.bot { bottom: -16px; left: -30px; animation-delay: 1.4s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- MODERN stats band ---------- */
.stats-band { background: var(--t-surface); border-top: 1px solid var(--t-border); border-bottom: 1px solid var(--t-border); }
.stats-band .stat-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; background: var(--t-btn-bg); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- MODERN dark CTA band ---------- */
.cta-band { border-radius: var(--t-radius-lg); background: linear-gradient(135deg, var(--p), var(--s)); color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.15); top: -120px; right: -80px; filter: blur(40px); }
.cta-band .btn { border-radius: var(--t-btn-radius); }

/* ---------- MINIMAL hero: flat, left-aligned, accent underline ---------- */
.hero-flat { background: var(--t-bg); color: var(--t-ink); }
.hero-flat .accent-line { width: 64px; height: 4px; background: var(--p); }
.hero-flat .btn-flat { border-radius: 0; border: 1px solid var(--t-ink); }
.hero-flat .btn-flat-primary { background: var(--p); color: #fff; border: 1px solid var(--p); }
.hero-flat .mock-card { box-shadow: none; border: 1px solid var(--t-border); }

/* ---------- MINIMAL feature rows ---------- */
.feature-row { display: flex; gap: 1.1rem; padding: 1.4rem .5rem; border-bottom: 1px solid var(--t-border); }
.feature-row:first-child { border-top: 1px solid var(--t-border); }
.feature-row .fr-icon { width: 40px; height: 40px; border: 1px solid var(--t-border); display: flex; align-items: center; justify-content: center; color: var(--p); flex-shrink: 0; }
.feature-row .fr-num { font-weight: 800; color: var(--p); }

/* ---------- MINIMAL pricing rows ---------- */
.plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: 1.5rem .25rem; border-bottom: 1px solid var(--t-border); }
.plan-row:first-child { border-top: 1px solid var(--t-border); }
.plan-row .plan-price { font-size: 1.6rem; font-weight: 800; }
.plan-row .plan-cta { background: var(--p); color: #fff; border-radius: 0; border: 0; padding: .55rem 1.3rem; font-weight: 600; }

/* ---------- MODERN feature chips ---------- */
.feature-chip { display: inline-flex; align-items: center; gap: .45rem; background: var(--t-chip-bg); border: 1px solid var(--t-border); border-radius: 999px; padding: .3rem .8rem; font-size: .75rem; font-weight: 600; color: var(--p); }
.mod-card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.mod-card-hover:hover { transform: translateY(-5px); box-shadow: var(--t-shadow-lg); }

/* =====================================================================
   Panel theming (admin / owner / /app/) — minor differences per theme
   ===================================================================== */
body.theme-modern .content { background: var(--t-bg); }
body.theme-modern .card { border-radius: var(--t-radius-lg); border-color: var(--t-border); box-shadow: var(--t-shadow-sm); }
body.theme-modern .rail { border-radius: 0 1.4rem 1.4rem 0; }
body.theme-modern .inbox-shell > div { border-radius: var(--t-radius-lg); }

body.theme-minimal .card { border-radius: 0; box-shadow: none !important; }
body.theme-minimal .inbox-shell > div { border-radius: 0; box-shadow: none; }
body.theme-minimal .page-body .card { border: 1px solid var(--t-border); }
body.theme-minimal .topbar { border-bottom: 1px solid var(--t-border); }

/* =====================================================================
   Auth pages
   ===================================================================== */
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.theme-default .auth-body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, var(--s) 150%); }
.theme-modern .auth-body { background: radial-gradient(800px 500px at 15% -10%, color-mix(in srgb, var(--p) 30%, #fff), transparent), #faf9ff; }
.theme-minimal .auth-body { background: #fff; }
.auth-card { border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow-lg); }
.auth-card .auth-head { background: var(--t-hero); color: #fff; border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0; }
.auth-card .btn-auth { background: var(--t-btn-bg); border: var(--t-btn-border); border-radius: var(--t-btn-radius); color: #fff; font-weight: 600; }
.auth-card .btn-auth:hover { filter: brightness(1.08); color: #fff; }
.theme-minimal .auth-card { border-radius: 0; box-shadow: none; border: 1px solid var(--t-border); }
.theme-minimal .auth-card .auth-head { border-radius: 0; }
.theme-modern .auth-card .auth-head { border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0; }