/* ═══════════════════════════════════════════════════════════════════════
   Nexoura Admin — Modern / Aurora Theme
   Shared across all Admin + Account pages. Matches Settings.cshtml aesthetic.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --p: #1a5276; --a: #2e86c1;
    --bg: #f0f2f8; --bg2: #ffffff; --bg3: #f8f9fc;
    --sf: rgba(255,255,255,0.82); --sfh: rgba(255,255,255,0.92);
    --bd: rgba(0,0,0,0.06); --bdh: rgba(0,0,0,0.1);
    --tx: #0f172a; --txd: #475569; --txm: #94a3b8;
    --cy: #6366f1; --pu: #8b5cf6; --pk: #ec4899; --cn: #06b6d4;
    --gn: #10b981; --dn: #ef4444; --am: #f59e0b;
    --fd: 'Outfit', sans-serif;
    --fb: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
::selection { background: rgba(99,102,241,0.2); color: var(--tx) }

/* Performance: pause decorative animations when tab is hidden + respect reduced-motion */
body.tab-hidden .bg-orbs { animation-play-state: paused !important }
body.tab-hidden .bg-orb { animation-play-state: paused !important }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
    .bg-orbs { display: none !important }
}

body {
    font-family: var(--fb);
    background: var(--bg);
    min-height: 100vh;
    color: var(--tx);
    position: relative;
}

/* ── Aurora background orbs ──────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.bg-orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform }
.bg-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(99,102,241,0.12), transparent 70%); top: -10%; right: -5%; animation: orb1 20s ease-in-out infinite }
.bg-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(236,72,153,0.08), transparent 70%); bottom: -15%; left: -8%; animation: orb2 26s ease-in-out infinite }
.bg-orb-3 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(6,182,212,0.06), transparent 70%); top: 50%; left: 30%; animation: orb3 22s ease-in-out infinite }
@keyframes orb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,40px)} }
@keyframes orb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-20px)} }
@keyframes orb3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,-30px) scale(1.1)} }

/* ── Header ──────────────────────────────────────────────── */
.hdr {
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--bd);
    padding: 14px 24px;
    display: flex; align-items: center; gap: 12px;
    position: relative; z-index: 1;
}
.hdr::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cy), var(--pu), var(--pk), var(--cn));
}
.hdr h1 { font-family: var(--fd); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--tx) }
.hdr a { color: var(--txd); text-decoration: none; font-size: 13px; transition: all .2s; border-radius: 8px; padding: 6px 12px; font-weight: 500 }
.hdr a:hover { color: var(--cy); background: rgba(99,102,241,.05) }

/* ── Layout ──────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 24px 20px; position: relative; z-index: 1 }
.wrap-sm { max-width: 720px; margin: 0 auto; padding: 24px 20px; position: relative; z-index: 1 }

/* ── Cards ──────────────────────────────────────────────── */
.card {
    background: rgba(255,255,255,0.95);
    border-radius: 20px;
    padding: 26px;
    margin-bottom: 18px;
    box-shadow: 0 4px 24px rgba(99,102,241,0.04),
                0 1px 0 rgba(255,255,255,0.8) inset,
                0 8px 32px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.6);
    animation: fade-up .4s ease;
}
@keyframes fade-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── Typography ─────────────────────────────────────────── */
h1.page-title { font-family: var(--fd); font-size: 24px; font-weight: 700; color: var(--tx); letter-spacing: -.01em }
h2.card-title {
    font-family: var(--fd); font-size: 17px; font-weight: 700; color: var(--tx);
    margin-bottom: 16px; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em;
}
h3.card-sub { font-family: var(--fd); font-size: 14px; font-weight: 600; color: var(--txd); margin: 20px 0 12px }

/* ── Stat grid ──────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 12px }

.stat {
    padding: 18px 18px;
    border-radius: 14px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.6);
    position: relative; overflow: hidden;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    animation: fade-up .4s ease backwards;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.stat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cy), var(--pu));
    border-radius: 14px 14px 0 0;
}
.stat:nth-child(1) { animation-delay: .05s }
.stat:nth-child(2) { animation-delay: .10s }
.stat:nth-child(2)::before { background: linear-gradient(90deg, var(--gn), var(--cn)) }
.stat:nth-child(3) { animation-delay: .15s }
.stat:nth-child(3)::before { background: linear-gradient(90deg, var(--am), var(--pk)) }
.stat:nth-child(4) { animation-delay: .20s }
.stat:nth-child(4)::before { background: linear-gradient(90deg, var(--pu), var(--pk)) }
.stat:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(99,102,241,.06) }

.stat-v { font-family: var(--fd); font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--tx); line-height: 1.1 }
.stat-l { font-size: 11px; color: var(--txm); font-weight: 500; margin-top: 6px; letter-spacing: .04em; text-transform: uppercase }
.stat-small { font-size: 13px; color: var(--txd); font-weight: 500 }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    padding: 10px 20px; border: none; border-radius: 12px; cursor: pointer;
    font-weight: 600; font-size: 13px; font-family: var(--fd);
    transition: all .25s cubic-bezier(.16,1,.3,1);
    display: inline-flex; align-items: center; gap: 6px; letter-spacing: .01em;
    text-decoration: none;
}
.btn-p {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,.2), 0 1px 0 rgba(255,255,255,.1) inset;
}
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(99,102,241,.3) }
.btn-o { background: var(--bg2); border: 1.5px solid var(--bd); color: var(--txd) }
.btn-o:hover { background: var(--bg3); border-color: rgba(99,102,241,.15); color: var(--cy); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(99,102,241,.06) }
.btn-d { background: var(--bg2); border: 1.5px solid rgba(239,68,68,.15); color: #dc2626 }
.btn-d:hover { background: rgba(239,68,68,.03); border-color: rgba(239,68,68,.25) }
.btn-sm { padding: 6px 12px; font-size: 11px; border-radius: 8px }

/* ── Forms ──────────────────────────────────────────────── */
.f {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid rgba(0,0,0,0.06); border-radius: 12px;
    font-size: 13px; font-family: var(--fb);
    background: rgba(255,255,255,0.7); outline: none; margin-bottom: 14px;
    transition: all .25s; color: var(--tx);
}
.f:focus { border-color: rgba(99,102,241,.35); box-shadow: 0 0 0 3px rgba(99,102,241,.06); background: var(--bg2) }
.f-inline { margin-bottom: 0 }
textarea.f { resize: vertical; min-height: 60px; font-family: var(--fb) }
.fm { font-family: 'Courier New', monospace; font-size: 12px }
label.fl { display: block; font-size: 11px; font-weight: 600; color: var(--txd); margin-bottom: 5px; letter-spacing: .02em; text-transform: uppercase }

/* ── Filter bar ────────────────────────────────────────── */
.filter-bar { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 12px; align-items: end }

/* ── Tables ────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--bd); border-radius: 14px; overflow: hidden }
table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
th {
    padding: 13px 15px; text-align: left; font-weight: 700;
    color: var(--txd); background: rgba(99,102,241,.03);
    border-bottom: 1.5px solid var(--bd);
    font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
    font-family: var(--fd);
}
td { padding: 12px 15px; border-bottom: 1px solid rgba(0,0,0,0.03); transition: background .15s; vertical-align: top }
tr:last-child td { border-bottom: none }
tr:hover td { background: rgba(99,102,241,.02) }

/* ── Badges ─────────────────────────────────────────────── */
.bg { padding: 3px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .02em; display: inline-block }
.bg-a { background: rgba(99,102,241,.08); color: var(--cy) }
.bg-u { background: rgba(6,182,212,.08); color: #0891b2 }
.bg-ok { background: rgba(16,185,129,.08); color: #059669 }
.bg-w { background: rgba(245,158,11,.08); color: #b45309 }
.bg-bl { background: rgba(239,68,68,.08); color: #dc2626 }
.bg-g { background: rgba(148,163,184,.14); color: #64748b }
.bg-owner { background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(236,72,153,.08)); color: #b45309 }

/* ── Alerts ─────────────────────────────────────────────── */
.al { padding: 14px 18px; border-radius: 14px; font-size: 13px; margin: 14px 0; line-height: 1.6 }
.al-ok { background: rgba(16,185,129,.06); color: #059669; border: 1px solid rgba(16,185,129,.12) }
.al-er { background: rgba(239,68,68,.05); color: #dc2626; border: 1px solid rgba(239,68,68,.1) }
.al-info { background: rgba(99,102,241,.04); color: var(--txd); border: 1px solid rgba(99,102,241,.08) }
.al-warn { background: rgba(245,158,11,.06); color: #92400e; border: 1px solid rgba(245,158,11,.15) }

/* ── Mono / code ────────────────────────────────────────── */
.mono { font-family: ui-monospace, 'Courier New', monospace; font-size: 11.5px; color: var(--txm) }
.code-pill { background: rgba(99,102,241,.04); padding: 2px 8px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, monospace; color: var(--txd) }

/* ── Pagination ─────────────────────────────────────────── */
.pg { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 10px; flex-wrap: wrap }
.pg-b { display: flex; gap: 6px }
.pg-b a, .pg-b span {
    padding: 7px 12px; border: 1px solid var(--bd); border-radius: 9px;
    text-decoration: none; color: var(--txd); font-size: 12px; font-weight: 600;
    background: var(--bg2); transition: all .15s;
}
.pg-b a:hover { background: var(--bg3); border-color: rgba(99,102,241,.2); color: var(--cy) }
.pg-b .on { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(99,102,241,.2) }
.pg-b .disabled { opacity: .35; pointer-events: none }

/* ── Empty state ────────────────────────────────────────── */
.empty { padding: 48px 20px; text-align: center; color: var(--txm); font-size: 13px }
.empty-i { font-size: 32px; margin-bottom: 10px; opacity: .5 }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 50;
    background: rgba(15,23,42,0.45); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 20px;
    animation: fade-in .2s ease;
}
.modal-overlay.open { display: flex }
@keyframes fade-in { from{opacity:0} to{opacity:1} }
.modal-box {
    background: rgba(255,255,255,0.98); border-radius: 20px; padding: 26px;
    max-width: 520px; width: 100%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.8) inset;
    border: 1px solid rgba(255,255,255,0.6);
    animation: modal-in .25s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-in { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px }
.modal-hdr h2 { margin-bottom: 0 }
.modal-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--txm); padding:4px 8px; border-radius:8px; transition:all .15s }
.modal-close:hover { background: var(--bg3); color: var(--tx) }

/* ── Health pills ──────────────────────────────────────── */
.health-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700 }
.health-ok { background: rgba(16,185,129,.08); color: #059669 }
.health-error { background: rgba(239,68,68,.08); color: #dc2626 }
.health-unknown { background: rgba(148,163,184,.12); color: #64748b }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

/* ── Progress bar ──────────────────────────────────────── */
.progress { height: 12px; background: rgba(99,102,241,.06); border-radius: 100px; overflow: hidden; margin: 10px 0 6px }
.progress-fill { height: 100%; border-radius: 100px; transition: width .5s cubic-bezier(.16,1,.3,1); background: linear-gradient(90deg, #10b981, #06b6d4) }
.progress-warn .progress-fill { background: linear-gradient(90deg, #f59e0b, #ec4899) }
.progress-over .progress-fill { background: linear-gradient(90deg, #ef4444, #ec4899) }

/* ── Message / chat transcript (for ChatHistory viewer) ── */
.msg-bubble { padding: 14px 18px; margin: 10px 0; border-radius: 14px; font-size: 14px; line-height: 1.6 }
.msg-user { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; margin-left: 80px }
.msg-assistant { background: var(--bg3); border: 1px solid var(--bd); margin-right: 80px }
.msg-meta { font-size: 10.5px; opacity: .75; margin-top: 6px; letter-spacing: .03em }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 700; margin-left: 6px }
.pill-s { background: rgba(16,185,129,.14); color: #059669 }
.pill-c { background: rgba(99,102,241,.14); color: #6366f1 }
.pill-t { background: rgba(139,92,246,.14); color: #7c3aed }
.pill-n { background: rgba(245,158,11,.14); color: #b45309 }
.pill-e { background: rgba(239,68,68,.14); color: #dc2626 }

/* ── Document cards (search playground) ─────────────────── */
.doc-card { border-left: 4px solid var(--cy); padding: 14px 18px; margin-bottom: 12px; background: var(--bg3); border-radius: 0 12px 12px 0 }
.doc-t { font-weight: 700; margin-bottom: 4px; color: var(--tx); font-size: 13.5px }
.doc-m { font-size: 11px; color: var(--txm); display: flex; gap: 14px; margin-bottom: 8px; flex-wrap: wrap }
.doc-s { font-size: 12.5px; color: var(--txd); line-height: 1.55; white-space: pre-wrap }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr) }
    .grid-3 { grid-template-columns: repeat(2, 1fr) }
    .filter-bar { grid-template-columns: 1fr 1fr; gap: 10px }
}
@media (max-width: 600px) {
    .wrap { padding: 14px 12px }
    .card { padding: 18px; border-radius: 16px }
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr }
    .filter-bar { grid-template-columns: 1fr }
    h1.page-title { font-size: 20px }
    .hdr { padding: 12px 16px; flex-wrap: wrap }
    table { font-size: 12px }
    th, td { padding: 9px 10px }
    .msg-user, .msg-assistant { margin-left: 0; margin-right: 0 }
}