/**
 * ERPlora Cloud - Base Styles
 * Complements @erplora/ux CSS library
 */

/* ========================================
   UTILITIES & BASE STYLES
   ======================================== */

[x-cloak] {
    display: none !important;
}

body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* SVG Icons — handled by UX library (.icon class in ux.css)
   Size: 1.2em by default, scales with parent font-size / text-* classes
   Color: inherits via fill:currentColor */

/* ========================================
   PAGE BACKGROUND
   Gradient mesh + grid overlay (matches Hub)
   ======================================== */

.page {
    background: var(--color-base-200);
    position: relative;
}

.page::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 70% 10%, color-mix(in oklch, var(--color-primary) 15%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 20% 90%, color-mix(in oklch, var(--color-secondary) 12%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 50%, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 70%);
    z-index: 0;
}

.page::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in oklch, var(--color-base-content) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--color-base-content) 3%, transparent) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
}

.page > * {
    position: relative;
    z-index: 1;
}

/* ========================================
   HTMX LOADING INDICATOR
   Animated top bar (matches Hub)
   ======================================== */

#htmx-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.htmx-request #htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

#htmx-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    animation: htmx-loading 1.5s ease-in-out infinite;
}

@keyframes htmx-loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ========================================
   HTMX TRANSITIONS
   ======================================== */

.htmx-swapping {
    opacity: 0;
    transition: opacity 150ms ease;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease;
}

/* ========================================
   CONTAINER UTILITIES
   ======================================== */

.page-container {
    padding: 1rem;
    margin: 0 auto;
}

.page-container-sm {
    max-width: 500px;
    padding: 1rem;
    margin: 0 auto;
}

.page-container-md {
    max-width: 800px;
    padding: 1rem;
    margin: 0 auto;
}

.page-container-lg {
    max-width: 1000px;
    padding: 1rem;
    margin: 0 auto;
}

.page-container-xl {
    max-width: 1200px;
    padding: 1rem;
    margin: 0 auto;
}

.page-container-2xl {
    max-width: 1400px;
    padding: 1rem;
    margin: 0 auto;
}

/* ========================================
   FORM STYLING
   ======================================== */

.form-item {
    margin-bottom: 1rem;
}

.form-error {
    color: var(--color-error);
    font-size: 0.875rem;
    margin: 0.25rem 0 0.75rem 0;
    padding-left: 1rem;
}

.form-helper {
    color: var(--color-base-content);
    opacity: 0.5;
    font-size: 0.75rem;
    margin: 0.25rem 0 0 0;
    padding-left: 1rem;
}

/* ========================================
   EMPTY STATE
   ======================================== */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state-icon {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    opacity: 0.5;
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
}

/* ========================================
   HEADER UTILITIES
   ======================================== */

.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.page-header-subtitle {
    opacity: 0.5;
    margin: 0.25rem 0 0 0;
}

/* ========================================
   STATUS ICONS
   ======================================== */

.success-icon-circle,
.warning-icon-circle,
.danger-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
}

.success-icon-circle {
    background: color-mix(in oklch, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

.warning-icon-circle {
    background: color-mix(in oklch, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
}

.danger-icon-circle {
    background: color-mix(in oklch, var(--color-error) 15%, transparent);
    color: var(--color-error);
}