/*
 * NOVA AVA – Pre-Login Custom Styles
 *
 * Sections:
 *   1. Flat UI Colors – Tabler variable overrides
 *   2. Base styles
 *   3. Background effects  (bg-linear | bg-mesh | bg-aurora | bg-conic | bg-noise)
 *   4. Entrance animations
 *
 * Background color tokens (--bg-c1/c2/c3 + -rgb variants) are injected
 * per-request via an inline <style> in the template (PHP shuffle).
 *
 * Flat UI Colors (US palette) — flatuicolors.com
 *   Turquoise   #1abc9c   Sun Flower  #f1c40f
 *   Emerald     #2ecc71   Carrot      #e67e22
 *   Peter River #3498db   Alizarin    #e74c3c
 *   Amethyst    #9b59b6   Clouds      #ecf0f1
 *   Wet Asphalt #34495e   Silver      #bdc3c7
 *   Midnight    #2c3e50   Concrete    #95a5a6
 *   Green Sea   #16a085   Asbestos    #7f8c8d
 *   Nephritis   #27ae60   Orange      #f39c12
 *   Belize Hole #2980b9   Pumpkin     #d35400
 *   Wisteria    #8e44ad   Pomegranate #c0392b
 */

/* ══════════════════════════════════════════════════════════════════════
   1. Flat UI Colors – Tabler overrides
   ══════════════════════════════════════════════════════════════════════ */
:root, [data-bs-theme=light] {

    /* Named palette */
    --tblr-blue:        #3498db;
    --tblr-indigo:      #9b59b6;
    --tblr-purple:      #8e44ad;
    --tblr-pink:        #e74c3c;
    --tblr-red:         #e74c3c;
    --tblr-orange:      #e67e22;
    --tblr-yellow:      #f1c40f;
    --tblr-green:       #2ecc71;
    --tblr-teal:        #1abc9c;
    --tblr-cyan:        #1abc9c;
    --tblr-azure:       #3498db;
    --tblr-lime:        #2ecc71;
    --tblr-gray:        #7f8c8d;
    --tblr-gray-dark:   #2c3e50;

    --tblr-gray-100:    #f4f6f6;
    --tblr-gray-200:    #eaeded;
    --tblr-gray-300:    #d5d8dc;
    --tblr-gray-400:    #aab7b8;
    --tblr-gray-500:    #95a5a6;
    --tblr-gray-600:    #7f8c8d;
    --tblr-gray-700:    #616a6b;
    --tblr-gray-800:    #34495e;
    --tblr-gray-900:    #2c3e50;

    /* Semantic colors */
    --tblr-primary:     #3498db;  /* Peter River  */
    --tblr-secondary:   #7f8c8d;  /* Asbestos     */
    --tblr-success:     #2ecc71;  /* Emerald      */
    --tblr-info:        #1abc9c;  /* Turquoise    */
    --tblr-warning:     #e67e22;  /* Carrot       */
    --tblr-danger:      #e74c3c;  /* Alizarin     */
    --tblr-light:       #ecf0f1;  /* Clouds       */
    --tblr-dark:        #2c3e50;  /* Midnight Blue*/
    --tblr-muted:       #95a5a6;  /* Concrete     */

    /* RGB variants */
    --tblr-primary-rgb:   52, 152, 219;
    --tblr-secondary-rgb: 127, 140, 141;
    --tblr-success-rgb:   46, 204, 113;
    --tblr-info-rgb:      26, 188, 156;
    --tblr-warning-rgb:   230, 126, 34;
    --tblr-danger-rgb:    231, 76, 60;
    --tblr-light-rgb:     236, 240, 241;
    --tblr-dark-rgb:      44, 62, 80;
    --tblr-muted-rgb:     149, 165, 166;

    --tblr-blue-rgb:      52, 152, 219;
    --tblr-azure-rgb:     52, 152, 219;
    --tblr-indigo-rgb:    155, 89, 182;
    --tblr-purple-rgb:    142, 68, 173;
    --tblr-pink-rgb:      231, 76, 60;
    --tblr-red-rgb:       231, 76, 60;
    --tblr-orange-rgb:    230, 126, 34;
    --tblr-yellow-rgb:    241, 196, 15;
    --tblr-lime-rgb:      46, 204, 113;
    --tblr-green-rgb:     46, 204, 113;
    --tblr-teal-rgb:      26, 188, 156;
    --tblr-cyan-rgb:      26, 188, 156;

    /* Text / emphasis variants */
    --tblr-primary-text:   #2980b9;  /* Belize Hole */
    --tblr-secondary-text: #7f8c8d;
    --tblr-success-text:   #27ae60;  /* Nephritis   */
    --tblr-info-text:      #16a085;  /* Green Sea   */
    --tblr-warning-text:   #d35400;  /* Pumpkin     */
    --tblr-danger-text:    #c0392b;  /* Pomegranate */
    --tblr-light-text:     #7f8c8d;
    --tblr-dark-text:      #34495e;  /* Wet Asphalt */

    /* Subtle background variants */
    --tblr-primary-bg-subtle:   #d6eaf8;
    --tblr-secondary-bg-subtle: #f2f3f4;
    --tblr-success-bg-subtle:   #d5f5e3;
    --tblr-info-bg-subtle:      #d1f2eb;
    --tblr-warning-bg-subtle:   #fdebd0;
    --tblr-danger-bg-subtle:    #fadbd8;
    --tblr-light-bg-subtle:     #f9f9f9;
    --tblr-dark-bg-subtle:      #d5d8dc;

    /* Border subtle variants */
    --tblr-primary-border-subtle:   #aed6f1;
    --tblr-secondary-border-subtle: #d5d8dc;
    --tblr-success-border-subtle:   #a9dfbf;
    --tblr-info-border-subtle:      #a2d9ce;
    --tblr-warning-border-subtle:   #fad7a0;
    --tblr-danger-border-subtle:    #f1948a;
    --tblr-light-border-subtle:     #eaeded;
    --tblr-dark-border-subtle:      #aab7b8;

    /* Tabler brand + links */
    --tblr-tabler:           #3498db;
    --tblr-tabler-rgb:       52, 152, 219;
    --tblr-link-color:       #3498db;
    --tblr-link-hover-color: #2980b9;
    --tblr-link-color-rgb:   52, 152, 219;
}

/* ══════════════════════════════════════════════════════════════════════
   2. Base styles
   ══════════════════════════════════════════════════════════════════════ */
body, .card, input, button { font-family: 'Inter', sans-serif; }

html, body { height: 100%; }
body { display: block; } /* override Tabler's display:flex */

.page-wrapper {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

.login-container { max-width: 480px; width: 100%; margin: auto; }
.login-logo      { max-height: 48px; max-width: 100%; }
@media (min-width: 576px) {
    .login-logo  { max-height: 68px; }
}

.login-footer    { color: rgba(255, 255, 255, .55); }

.tenant-item { transition: background .15s; }
.tenant-item:hover { background: var(--tblr-light); }

.quick-login-card {
    position: relative;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.quick-login-card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12) !important;
    transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════════
   3. Background effects
   ══════════════════════════════════════════════════════════════════════ */

/* bg-linear ──────────────────────────────────────────────────────── */
@keyframes gradient-move {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
body.bg-linear {
    background: linear-gradient(135deg, var(--bg-c1), var(--bg-c2), var(--bg-c3), var(--bg-c1));
    background-size: 400% 400%;
    animation: gradient-move 14s ease infinite;
}

/* bg-mesh ────────────────────────────────────────────────────────── */
body.bg-mesh { background: var(--bg-c1); }
body.bg-mesh::before,
body.bg-mesh::after {
    content: '';
    position: fixed;
    inset: -30%;
    width: 160%; height: 160%;
    pointer-events: none;
}
@keyframes mesh-a {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%       { transform: translate(4%, -3%) rotate(5deg); }
    66%       { transform: translate(-3%, 4%) rotate(-3deg); }
}
@keyframes mesh-b {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%       { transform: translate(-5%, 3%) rotate(-6deg); }
    66%       { transform: translate(3%, -5%) rotate(4deg); }
}
body.bg-mesh::before {
    background:
        radial-gradient(ellipse 80% 80% at 20% 30%, rgba(var(--bg-c1-rgb), 1),   transparent 70%),
        radial-gradient(ellipse 70% 70% at 80% 70%, rgba(var(--bg-c2-rgb), .95), transparent 70%);
    animation: mesh-a 18s ease-in-out infinite;
}
body.bg-mesh::after {
    background:
        radial-gradient(ellipse 75% 75% at 70% 20%, rgba(var(--bg-c3-rgb), .95), transparent 70%),
        radial-gradient(ellipse 65% 65% at 30% 80%, rgba(var(--bg-c2-rgb), .85), transparent 70%);
    animation: mesh-b 24s ease-in-out infinite;
}
body.bg-mesh .container { position: relative; z-index: 1; }

/* bg-aurora ──────────────────────────────────────────────────────── */
body.bg-aurora { background: #0d1020; }
body.bg-aurora::before,
body.bg-aurora::after {
    content: '';
    position: fixed;
    left: -10%; width: 120%;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(48px);
}
@keyframes aurora-a {
    0%, 100% { transform: translateY(-20px) scaleX(1);    opacity: .9; }
    50%       { transform: translateY( 20px) scaleX(1.08); opacity: 1; }
}
@keyframes aurora-b {
    0%, 100% { transform: translateY(14px) scaleX(1.04); opacity: .75; }
    50%       { transform: translateY(-14px) scaleX(1);   opacity: 1; }
}
body.bg-aurora::before {
    height: 60vh; top: 30%;
    background: linear-gradient(90deg,
        rgba(var(--bg-c1-rgb), 1),  rgba(var(--bg-c2-rgb), .9), rgba(var(--bg-c3-rgb), 1));
    animation: aurora-a 9s ease-in-out infinite;
}
body.bg-aurora::after {
    height: 40vh; top: 10%;
    background: linear-gradient(90deg,
        rgba(var(--bg-c3-rgb), .8), rgba(var(--bg-c1-rgb), .7), rgba(var(--bg-c2-rgb), .65));
    animation: aurora-b 13s ease-in-out infinite;
}
body.bg-aurora .container { position: relative; z-index: 1; }

/* bg-conic ───────────────────────────────────────────────────────── */
body.bg-conic { overflow: clip; }
body.bg-conic::before {
    content: '';
    position: fixed;
    top: 50%; left: 50%;
    width: 300vmax; height: 300vmax;
    margin: -150vmax;
    background: conic-gradient(var(--bg-c1), var(--bg-c2), var(--bg-c3), var(--bg-c1));
    animation: conic-spin 40s linear infinite;
    pointer-events: none;
}
@keyframes conic-spin { to { transform: rotate(360deg); } }
body.bg-conic .container { position: relative; z-index: 1; }

/* bg-noise ───────────────────────────────────────────────────────── */
@keyframes noise-move {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50%       { background-position: 0 0, 100% 50%; }
}
body.bg-noise {
    background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--bg-c1), var(--bg-c2), var(--bg-c3), var(--bg-c1));
    background-size: 256px 256px, 400% 400%;
    animation: noise-move 14s ease infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   4. Entrance animations
   ══════════════════════════════════════════════════════════════════════ */
@keyframes card-enter {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes logo-enter {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

.card {
    animation: card-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}
.card-body > .text-center img {
    animation: logo-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .card-body > .text-center img { animation: none; }
}