/* Dana Geometric Background - Minimal v3 */
/* ======================================== */

/* ----- Main Layer: very light blue-white base (cards on top are pure white for contrast) ----- */
.geometric-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #edf2fc;
}
.dark .geometric-bg {
    background: #070b14;
}

/* ----- Subtle Blue Gradient Overlay (very faint) ----- */
.geo-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(ellipse 90% 60% at 30% 0%, rgba(57,100,243,0.04) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 70% 100%, rgba(57,100,243,0.03) 0%, transparent 50%);
}

/* ----- Dot Grid Pattern (truly minimal) ----- */
.geo-dot-grid {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(circle, rgba(57,100,243,0.10) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ----- Floating Minimal Circles (very thin) ----- */
.geo-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(57,100,243,0.08);
    opacity: 0;
    animation: geoFloat 25s ease-in-out infinite;
}
.geo-circle-1 { width: 240px; height: 240px; top: -5%; right: 12%; animation-delay: 0s; }
.geo-circle-2 { width: 140px; height: 140px; bottom: 10%; left: 8%; border-color: rgba(218,139,3,0.06); animation-delay: -10s; }

/* ----- Vertical Lines (thin accent) ----- */
.geo-line {
    position: absolute;
    opacity: 0.05;
}
.geo-line-1 {
    top: 0; left: 20%;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, rgba(57,100,243,0.12), transparent 80%);
}
.geo-line-2 {
    top: 0; right: 20%;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, rgba(57,100,243,0.08), transparent 80%);
}

/* ----- 3 Tiny Accent Dots ----- */
.geo-dot {
    position: absolute;
    border-radius: 50%;
    width: 4px; height: 4px;
    opacity: 0;
    animation: geoDotPulse 6s ease-in-out infinite;
}
.geo-dot-1 { top: 30%; left: 15%; background: rgba(57,100,243,0.5); }
.geo-dot-2 { top: 30%; left: calc(15% + 32px); width: 3px; height: 3px; background: rgba(218,139,3,0.5); animation-delay: -2s; }
.geo-dot-3 { top: calc(30% + 28px); left: calc(15% + 16px); background: rgba(57,100,243,0.4); animation-delay: -4s; }

/* ----- Corner Accents (barely visible) ----- */
.geo-corner { position: absolute; }
.geo-corner-tl { top: 0; left: 0; width: 40px; height: 40px; }
.geo-corner-tl::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, rgba(57,100,243,0.15), transparent);
}
.geo-corner-tl::after {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(to right, rgba(57,100,243,0.15), transparent);
}
.geo-corner-br { bottom: 0; right: 0; width: 40px; height: 40px; }
.geo-corner-br::before {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 1px; height: 100%;
    background: linear-gradient(to top, rgba(57,100,243,0.10), transparent);
}
.geo-corner-br::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 100%; height: 1px;
    background: linear-gradient(to left, rgba(57,100,243,0.10), transparent);
}

/* ============================================================
   Content Backgrounds (solid white for cards only)
   ============================================================ */

.content-wrapper {
    position: relative;
    z-index: 10;
}

/* Main content area */
main, [role="main"] {
    background: var(--bg-primary);
}

@media (min-width: 768px) {
    main, [role="main"] {
        margin-top: 2rem;
    }
}

/* Cards, tables, modals - specific containers */
.card, .card-body,
.modal-content, .modal-body,
.dropdown-menu, [role="menu"],
.table-container, .table-wrap {
    background: var(--bg-primary) !important;
}

/* Subtle shadow/depth for visual lift of cards */
main {
    box-shadow: 0 1px 3px rgba(57,100,243,0.04);
}
.card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.03), 0 1px 2px rgba(57,100,243,0.03);
}
.dark main {
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dark .card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
}

/* Navigation + footer already have their own backgrounds in their partials */
/* No need to override them here */