/* ============================================================================
   Aurora UI — GEMS-inspired design system for HMS.
   Tokens + auth/login components + gradient-blob background + glassmorphism.
   Dark by default; html.light flips to the light palette.
   ========================================================================== */

:root {
    /* slate neutrals */
    --s50:#f8fafc; --s100:#f1f5f9; --s200:#e2e8f0; --s300:#cbd5e1; --s400:#94a3b8;
    --s500:#64748b; --s600:#475569; --s700:#334155; --s800:#1e293b; --s900:#0f172a; --s950:#020617;
    /* brand accent — teal (primary #208285) */
    --i400:#3cbcbf; --i500:#27a0a3; --i600:#208285; --i700:#19696c;
    --violet:#176f72; --sky:#34c3c6;   /* same-family teal shades for gradient blobs */
    /* semantic */
    --success:#10b981; --warning:#f59e0b; --danger:#ef4444; --info:#0ea5e9;
    /* radius / shadow / motion */
    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
    --shadow-md:0 4px 16px rgba(2,6,23,.10);
    --shadow-lg:0 18px 50px rgba(2,6,23,.28);
    --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- Dark (default) ---- */
html.aurora, .aurora {
    --bg: var(--s900);
    --bg2: var(--s950);
    --surface: rgba(30,41,59,.72);      /* slate-800 @ .72 (glass) */
    --surface-solid: #1e293b;
    --border: rgba(148,163,184,.18);
    --border-strong: rgba(148,163,184,.28);
    --text: var(--s100);
    --muted: var(--s400);
    --input-bg: rgba(15,23,42,.55);
    --blob-a: rgba(32,130,133,.48);     /* teal */
    --blob-b: rgba(23,111,114,.40);     /* deep teal */
    --blob-c: rgba(52,195,198,.30);     /* light teal */
}
/* ---- Light ---- */
html.light .aurora, .aurora.light {
    --bg: var(--s100);
    --bg2: #fff;
    --surface: rgba(255,255,255,.78);
    --surface-solid:#fff;
    --border: rgba(15,23,42,.10);
    --border-strong: rgba(15,23,42,.16);
    --text: var(--s900);
    --muted: var(--s500);
    --input-bg: rgba(255,255,255,.85);
    --blob-a: rgba(32,130,133,.28);
    --blob-b: rgba(23,111,114,.20);
    --blob-c: rgba(52,195,198,.20);
}

/* ============================ Auth screen ============================ */
.aurora-auth, .aurora-auth *, .aurora-controls, .aurora-controls * { box-sizing: border-box; }
.aurora-auth {
    min-height:100vh; min-height:100dvh;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    background:
        radial-gradient(1200px 800px at 110% -10%, rgba(32,130,133,.12), transparent 60%),
        linear-gradient(160deg, var(--bg2), var(--bg));
    color:var(--text);
    position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}

/* circular gradient blobs (same shade family), blurred + floating */
.aurora-blobs{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.aurora-blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.9; will-change:transform;}
.aurora-blob.b1{width:46vw; height:46vw; max-width:560px; max-height:560px; top:-8%; left:-6%;
    background:radial-gradient(circle at 30% 30%, var(--blob-a), transparent 70%); animation:floatA 16s var(--ease) infinite;}
.aurora-blob.b2{width:42vw; height:42vw; max-width:520px; max-height:520px; bottom:-12%; right:-8%;
    background:radial-gradient(circle at 60% 40%, var(--blob-b), transparent 70%); animation:floatB 20s var(--ease) infinite;}
.aurora-blob.b3{width:34vw; height:34vw; max-width:420px; max-height:420px; top:35%; right:22%;
    background:radial-gradient(circle at 50% 50%, var(--blob-c), transparent 70%); animation:floatA 24s var(--ease) infinite reverse;}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.06)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,-4%) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.aurora-blob{animation:none!important}}

/* glass card */
.aurora-card{
    position:relative; z-index:1; width:100%; max-width:420px;
    background:var(--surface); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border:1px solid var(--border); border-radius:var(--r-xl);
    box-shadow:var(--shadow-lg);
    padding:38px 34px;
}
.aurora-card::before{ /* subtle top light edge */
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%);
}
.aurora-brand{display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:22px;}
.aurora-brand img{height:52px; width:auto; filter:drop-shadow(0 6px 18px rgba(32,130,133,.38));}
.aurora-title{font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0; text-align:center;}
.aurora-sub{font-size:13px; color:var(--muted); text-align:center; margin:4px 0 0;}

/* fields */
.aurora-field{margin-bottom:18px;}
.aurora-label{display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:7px;}
.aurora-input-wrap{position:relative;}
.aurora-input-wrap .ico{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px;}
.aurora-input{
    width:100%; height:46px; padding:0 14px 0 40px;
    background:var(--input-bg); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--r-md);
    font-size:14px; outline:none; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.aurora-input::placeholder{color:var(--muted); opacity:.7;}
.aurora-input:focus{border-color:var(--i500); box-shadow:0 0 0 3px rgba(32,130,133,.28);}
.aurora-input.has-toggle{padding-right:42px;}
.aurora-eye{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px;}

/* row + links */
.aurora-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; font-size:13px;}
.aurora-check{display:flex; align-items:center; gap:8px; color:var(--muted); user-select:none;}
.aurora-check input{width:16px; height:16px; accent-color:var(--i600);}
.aurora-link{color:var(--i400); text-decoration:none; font-weight:500;}
.aurora-link:hover{color:var(--i500); text-decoration:underline;}

/* primary button */
.aurora-btn{
    width:100%; height:48px; border:0; border-radius:var(--r-md); cursor:pointer;
    background:linear-gradient(135deg, var(--i600), var(--i500));
    color:#fff; font-size:15px; font-weight:600; letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(32,130,133,.38);
    transition:transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.aurora-btn:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 14px 30px rgba(32,130,133,.48);}
.aurora-btn:active{transform:translateY(0);}

.aurora-foot{text-align:center; font-size:13px; color:var(--muted); margin-top:20px;}

/* alerts */
.aurora-alert{border-radius:var(--r-md); padding:11px 14px; font-size:13px; margin-bottom:16px; border:1px solid transparent;}
.aurora-alert.err{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fecaca;}
.aurora-alert.ok{background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#bbf7d0;}
html.light .aurora-alert.err{color:#b91c1c;} html.light .aurora-alert.ok{color:#047857;}
.aurora-alert ul{margin:0; padding-left:18px;}

/* top-right controls (theme toggle + language) */
.aurora-controls{position:fixed; top:16px; right:16px; z-index:10; display:flex; gap:10px; align-items:center;}
.aurora-iconbtn{
    width:40px; height:40px; border-radius:var(--r-pill); display:inline-flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--border); color:var(--text); cursor:pointer;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .15s var(--ease);
}
.aurora-iconbtn:hover{background:var(--surface-solid);}
.aurora-lang{position:relative;}
.aurora-lang .menu{position:absolute; right:0; top:46px; min-width:160px; background:var(--surface-solid);
    border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px; display:none;}
.aurora-lang.open .menu{display:block;}
.aurora-lang .menu a{display:block; padding:8px 12px; border-radius:var(--r-sm); color:var(--text); text-decoration:none; font-size:13px;}
.aurora-lang .menu a:hover, .aurora-lang .menu a.active{background:rgba(32,130,133,.15); color:var(--i400);}

@media (max-width:480px){ .aurora-card{padding:28px 22px;} }

/* ---- reusable extras for multi-field auth pages ---- */
.aurora-card.wide{ max-width:720px; }
.aurora-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 18px; }
@media (max-width:560px){ .aurora-grid2{ grid-template-columns:1fr; } }

/* Make Bootstrap form-control (e.g. the intl-tel phone field, captcha-adjacent inputs)
   match the Aurora input look when used inside an auth card. */
.aurora-auth .form-control{
    width:100%; min-height:46px; padding:10px 14px;
    background:var(--input-bg); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--r-md);
    font-size:14px; outline:none; transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.aurora-auth .form-control::placeholder{ color:var(--muted); opacity:.7; }
.aurora-auth .form-control:focus{ border-color:var(--i500); box-shadow:0 0 0 3px rgba(32,130,133,.28); }
.aurora-auth .form-label{ display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:7px; }
.aurora-auth .iti{ width:100%; }
.aurora-auth .required::after{ content:" *"; color:var(--danger); }
.aurora-auth a.link-info, .aurora-auth a.link-primary{ color:var(--i400); text-decoration:none; font-weight:500; }
.aurora-auth a.link-info:hover, .aurora-auth a.link-primary:hover{ color:var(--i500); text-decoration:underline; }

/* ============================================================================
   Aurora IN-APP components (usable inside the current shell, light background).
   Prefixed .ax- to avoid clashing with the Metronic theme or the auth scope.
   ========================================================================== */
.ax-scope{
    --ax-teal:#208285; --ax-teal-600:#208285; --ax-teal-500:#27a0a3; --ax-teal-700:#19696c;
    --ax-teal-soft:rgba(32,130,133,.12);
    --ax-text:#0f172a; --ax-muted:#64748b; --ax-surface:#fff; --ax-border:rgba(15,23,42,.08);
    --ax-shadow:0 1px 2px rgba(2,6,23,.04), 0 8px 24px rgba(2,6,23,.06);
    --ax-shadow-hover:0 10px 30px rgba(2,6,23,.12);
    --ax-radius:16px;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* soft background blobs behind dashboard content */
.ax-dash{position:relative;}
.ax-dash__blobs{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.ax-dash__blobs i{position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.5;}
.ax-dash__blobs i:nth-child(1){width:380px;height:380px;top:-120px;right:-60px;background:radial-gradient(circle at 30% 30%, rgba(32,130,133,.30), transparent 70%);}
.ax-dash__blobs i:nth-child(2){width:300px;height:300px;bottom:-100px;left:-40px;background:radial-gradient(circle at 50% 50%, rgba(52,195,198,.22), transparent 70%);}
.ax-dash > *{position:relative; z-index:1;}

/* hero greeting strip */
.ax-hero{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:6px;}
.ax-hero h2{font-size:22px; font-weight:700; color:var(--ax-text); margin:0; letter-spacing:-.01em;}
.ax-hero p{margin:2px 0 0; color:var(--ax-muted); font-size:13px;}
.ax-hero .ax-date{background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:999px; padding:8px 16px; font-size:13px; color:var(--ax-muted); box-shadow:var(--ax-shadow);}

/* KPI stat card */
.ax-stat{
    display:flex; align-items:center; gap:16px;
    background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius);
    padding:20px 22px; box-shadow:var(--ax-shadow); height:100%;
    transition:transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s; text-decoration:none;
    position:relative; overflow:hidden;
}
.ax-stat::after{content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%;
    background:var(--ax-teal-soft); opacity:.6;}
.ax-stat:hover{transform:translateY(-3px); box-shadow:var(--ax-shadow-hover); border-color:rgba(32,130,133,.3);}
.ax-stat__icon{flex:0 0 auto; width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:22px; color:#fff; background:linear-gradient(135deg, var(--ax-teal-600), var(--ax-teal-500));
    box-shadow:0 8px 18px rgba(32,130,133,.30); position:relative; z-index:1;}
.ax-stat__icon.v-emerald{background:linear-gradient(135deg,#0f766e,#10b981); box-shadow:0 8px 18px rgba(16,185,129,.3);}
.ax-stat__icon.v-sky{background:linear-gradient(135deg,#0369a1,#0ea5e9); box-shadow:0 8px 18px rgba(14,165,233,.3);}
.ax-stat__icon.v-violet{background:linear-gradient(135deg,#6d28d9,#8b5cf6); box-shadow:0 8px 18px rgba(139,92,246,.3);}
.ax-stat__icon.v-amber{background:linear-gradient(135deg,#b45309,#f59e0b); box-shadow:0 8px 18px rgba(245,158,11,.3);}
.ax-stat__meta{min-width:0;}
.ax-stat__value{font-size:26px; font-weight:700; color:var(--ax-text); line-height:1.1; letter-spacing:-.02em; word-break:break-word;}
.ax-stat__label{font-size:12.5px; font-weight:500; color:var(--ax-muted); margin-top:3px; text-transform:uppercase; letter-spacing:.03em;}

/* generic surface card */
.ax-card{background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius); box-shadow:var(--ax-shadow); overflow:hidden;}
.ax-card__head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--ax-border);}
.ax-card__head h3{margin:0; font-size:16px; font-weight:600; color:var(--ax-text); display:flex; align-items:center; gap:10px;}
.ax-card__head h3 i{color:var(--ax-teal);}
.ax-card__body{padding:18px 22px;}

/* clean table */
.ax-table{width:100%; border-collapse:collapse;}
.ax-table th{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ax-muted); font-weight:600; text-align:left; padding:10px 12px; border-bottom:1px solid var(--ax-border);}
.ax-table td{padding:12px; border-bottom:1px solid var(--ax-border); font-size:14px; color:var(--ax-text); vertical-align:middle;}
.ax-table tr:last-child td{border-bottom:0;}
.ax-table tbody tr{transition:background .15s;}
.ax-table tbody tr:hover{background:var(--ax-teal-soft);}
.ax-table a{color:var(--ax-teal); text-decoration:none; font-weight:500;}
.ax-table a:hover{text-decoration:underline;}
.ax-chip{display:inline-block; background:var(--ax-teal-soft); color:var(--ax-teal-700); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:500; white-space:nowrap;}
.ax-empty{text-align:center; color:var(--ax-muted); padding:34px 10px; font-size:15px;}
.ax-empty i{display:block; font-size:34px; color:var(--ax-teal); opacity:.5; margin-bottom:10px;}

/* loading skeleton (lazy placeholder) */
.ax-skel{background:var(--ax-surface); border:1px solid var(--ax-border); border-radius:var(--ax-radius); box-shadow:var(--ax-shadow);}
.ax-shimmer{position:relative; overflow:hidden; background:#e9eef5; border-radius:8px;}
.ax-shimmer::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:axShimmer 1.4s infinite;}
@keyframes axShimmer{100%{transform:translateX(100%)}}