/*
 * Caravel Platform UIX Layer
 * Shared, non-invasive styling for consistent look-and-feel across base templates.
 */

:root {
    --caravel-bg: #f3f6fb;
    --caravel-surface: #ffffff;
    --caravel-border: #e5eaf2;
    --caravel-text: #0f172a;
    --caravel-muted: #64748b;
    --caravel-primary: #0f52ba;
    --caravel-primary-hover: #0c419a;
    --caravel-radius-lg: 14px;
    --caravel-radius-xl: 18px;
    --caravel-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
    --caravel-shadow-md: 0 8px 26px rgba(15, 23, 42, 0.08);
}

body.caravel-uix,
body.caravel-uix-marketing,
body.caravel-uix-mobile {
    color: var(--caravel-text);
}

body.caravel-uix,
body.caravel-uix-marketing {
    background: radial-gradient(circle at top right, #eef4ff 0%, var(--caravel-bg) 35%, #f8fafc 100%);
}

/* Top bar consistency for authenticated app shell */
body.caravel-uix header.bg-white.shadow-sm {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--caravel-border);
    box-shadow: var(--caravel-shadow-sm);
}

/* Shared card rhythm for common utility combinations in app shell */
body.caravel-uix .main-content :is(
    .bg-white.shadow,
    .bg-white.shadow-sm,
    .bg-white.rounded-lg,
    .bg-white.rounded-xl,
    .bg-white.rounded-2xl
) {
    border: 1px solid var(--caravel-border);
    box-shadow: var(--caravel-shadow-sm);
}

body.caravel-uix .main-content :is(.rounded-lg, .rounded-xl) {
    border-radius: var(--caravel-radius-lg);
}

body.caravel-uix .main-content .rounded-2xl {
    border-radius: var(--caravel-radius-xl);
}

/* Subtle hover polish for interactive cards */
body.caravel-uix .main-content :is(.hover\:shadow-lg, .group):hover {
    box-shadow: var(--caravel-shadow-md);
}

/* Button consistency (non-destructive visual polish) */
body.caravel-uix :is(button, .btn, a[role="button"]) {
    transition: all 180ms ease;
}

body.caravel-uix :is(button, .btn, a[role="button"]):focus-visible,
body.caravel-uix-mobile :is(button, .btn-mobile, a):focus-visible,
body.caravel-uix-marketing :is(button, a):focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* Primary action polish for common blue CTA classes */
body.caravel-uix :is(.bg-blue-600.text-white, .bg-primary-600.text-white, .bg-\[\#0F52BA\].text-white) {
    background-color: var(--caravel-primary);
    box-shadow: 0 4px 12px rgba(15, 82, 186, 0.28);
}

body.caravel-uix :is(.bg-blue-600.text-white, .bg-primary-600.text-white, .bg-\[\#0F52BA\].text-white):hover {
    background-color: var(--caravel-primary-hover);
}

/* Sidebar consistency */
body.caravel-uix #sidebar,
body.caravel-uix #org-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-right-color: var(--caravel-border);
}

body.caravel-uix #sidebar nav,
body.caravel-uix #org-sidebar nav {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Table consistency for dense back-office views */
body.caravel-uix table thead tr {
    border-bottom: 1px solid var(--caravel-border);
}

body.caravel-uix table tbody tr:hover {
    background: #f8fbff;
}

/* Marketing shell consistency */
body.caravel-uix-marketing footer {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

body.caravel-uix-marketing main :is(.bg-white.shadow, .bg-white.shadow-sm, .bg-white.rounded-lg, .bg-white.rounded-xl, .bg-white.rounded-2xl) {
    border: 1px solid var(--caravel-border);
}

/* Guest portal mobile consistency */
body.caravel-uix-mobile .top-bar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--caravel-border);
}

body.caravel-uix-mobile .bottom-nav {
    border-top: 1px solid var(--caravel-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06);
}

body.caravel-uix-mobile .nav-item.active {
    color: var(--caravel-primary);
}

/* Forms */
body.caravel-uix :is(input, select, textarea),
body.caravel-uix-mobile :is(input, select, textarea),
body.caravel-uix-marketing :is(input, select, textarea) {
    border-radius: 12px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}