/**
 * Apartment Ideas — Common Styles
 * Shared across all portals. Layered on top of Bootstrap 5.
 *
 * Loaded by every header template (proof, front, order, etc.)
 */

/* =============================================================================
   Design Tokens (CSS Custom Properties)
   ============================================================================= */

:root {
    /* Brand colors — logo blue-teal #0090be */
    --ai-teal:        #0090be;
    --ai-teal-hover:  #007a9e;
    --ai-teal-deep:   #006580;
    --ai-teal-light:  #d4eef7;
    --ai-teal-50:     #edf8fc;
    --ai-teal-rgb:    0, 144, 190;

    /* Brand accent — warm orange for contrast pops */
    --ai-accent:      #e65100;
    --ai-accent-light:#fff3e0;

    /* Gold accent — specialty finishes, premium callouts */
    --ai-gold:        #d4a340;
    --ai-gold-light:  #fdf6e3;
    --ai-gold-rgb:    212, 163, 64;

    /* Dark palette — richer with blue undertones */
    --ai-dark:         #0f1923;
    --ai-dark-lighter: #1b2a38;
    --ai-dark-section: #0b1520;
    --ai-dark-gradient: linear-gradient(135deg, #0f1923 0%, #122a3a 60%, #0d2235 100%);

    /* Neutrals */
    --ai-gray-50:  #f8fafc;
    --ai-gray-100: #f1f5f9;
    --ai-gray-200: #e2e8f0;
    --ai-gray-300: #cbd5e1;
    --ai-gray-400: #94a3b8;
    --ai-gray-500: #64748b;
    --ai-gray-600: #475569;
    --ai-gray-700: #334155;
    --ai-gray-900: #0f172a;

    /* Shadows — deeper for more dimension */
    --ai-shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
    --ai-shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --ai-shadow-md:  0 4px 14px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.06);
    --ai-shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);
    --ai-shadow-xl:  0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.08);

    /* Radii */
    --ai-radius-sm: 0.375rem;
    --ai-radius:    0.5rem;
    --ai-radius-lg: 0.75rem;
    --ai-radius-xl: 1rem;
    --ai-radius-pill: 50rem;

    /* Motion */
    --ai-transition-fast: 0.15s ease;
    --ai-transition:      0.25s ease;
    --ai-transition-slow: 0.35s ease;
}

/* =============================================================================
   Framework: ViewEngine state classes
   ============================================================================= */

/* Hide templates */
.template {
    display: none !important;
}

/* Loading state */
.load-data.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--ai-transition);
}

/* Error state */
.load-data.load-error {
    border-left: 3px solid #dc3545;
    padding-left: 0.75rem;
}

/* Prevent flash of raw {placeholders} */
.load-data:not(.loaded):not(.loading):not(.cached) [class*="view-"] {
    visibility: hidden;
}

/* Smooth loading transitions */
.load-data {
    transition: opacity var(--ai-transition);
}

/* =============================================================================
   Global typography & base
   ============================================================================= */

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--ai-gray-900);
    background: var(--ai-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* =============================================================================
   Brand: Blue-teal accent system
   ============================================================================= */

a {
    color: var(--ai-teal);
    transition: color var(--ai-transition-fast);
}

a:hover {
    color: var(--ai-teal-hover);
}

.btn-primary,
.bg-primary {
    background-color: var(--ai-teal) !important;
    border-color: var(--ai-teal) !important;
}

.btn-primary:hover {
    background-color: var(--ai-teal-hover) !important;
    border-color: var(--ai-teal-hover) !important;
    box-shadow: 0 4px 12px rgba(var(--ai-teal-rgb), 0.35) !important;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--ai-teal-rgb), 0.35) !important;
}

.btn-outline-primary {
    color: var(--ai-teal) !important;
    border-color: var(--ai-teal) !important;
}

.btn-outline-primary:hover {
    background-color: var(--ai-teal) !important;
    border-color: var(--ai-teal) !important;
    color: #fff !important;
}

/* =============================================================================
   Navbar — dramatic dark bar with brand accent
   ============================================================================= */

.navbar.navbar-dark {
    background: var(--ai-dark-gradient) !important;
    box-shadow: var(--ai-shadow-lg);
    padding: 0.65rem 0;
}

.navbar-logo {
    height: 36px;
    width: auto;
    transition: all var(--ai-transition-fast);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.navbar-logo:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Nav links — pill hover/active with glow */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.45rem 1rem;
    border-radius: var(--ai-radius-pill);
    transition: all var(--ai-transition-fast);
    position: relative;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: var(--ai-teal);
    box-shadow: 0 2px 10px rgba(var(--ai-teal-rgb), 0.45);
}

/* User greeting */
.navbar-greeting {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
    font-weight: 500;
    border-right: 1px solid rgba(255,255,255,0.1);
    margin-right: 0.25rem;
}

/* =============================================================================
   Info Banner (shared)
   ============================================================================= */

.alert-info {
    background: var(--ai-teal-50);
    border: 1px solid var(--ai-teal-light);
    color: var(--ai-teal);
    border-radius: var(--ai-radius);
    display:block !important;
    text-align:center;
}

/* =============================================================================
   Footer — full dark bottom bar
   ============================================================================= */

.portal-footer {
    background: var(--ai-dark-gradient) !important;
    border-top: 3px solid var(--ai-teal);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    margin-top: 3rem;
}

.portal-footer p {
    line-height: 1.7;
}

.portal-footer a {
    text-decoration: none;
    transition: color var(--ai-transition-fast);
}

.portal-footer a:hover {
    text-decoration: underline;
}

.portal-footer .text-info {
    color: rgba(var(--ai-teal-rgb), 0.85) !important;
}

.portal-footer .text-info:hover {
    color: var(--ai-teal-light) !important;
}

/* =============================================================================
   Utility: focus-visible for accessibility
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--ai-teal);
    outline-offset: 2px;
}