/* AuthRAI frontend — shared design tokens & component classes.
   Extracted from the original server-rendered base.html so this static
   frontend matches the existing visual identity exactly. */

:root { --border-subtle: rgba(255,255,255,0.04); --border-strong: rgba(255,255,255,0.1); }
*,*::before,*::after { box-sizing:border-box; }
body { background:#09090b; color:#e4e4e7; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; }
a, button, [role="button"], select, input[type="button"], input[type="submit"], label { touch-action:manipulation; }
.mono { font-family:'JetBrains Mono',monospace; }
[x-cloak] { display:none !important; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#27272a; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#3f3f46; }
::selection { background:rgba(16,185,129,0.25); color:#fff; }

.glass { background:rgba(24,24,27,0.6); backdrop-filter:blur(16px); border:1px solid var(--border-subtle); box-shadow:0 4px 24px -4px rgba(0,0,0,0.5); }
.panel { background:#18181b; border:1px solid var(--border-subtle); border-radius:1rem; }
.panel-interactive { background:#18181b; border:1px solid var(--border-subtle); transition:all 0.2s ease; border-radius:1rem; }
.panel-interactive:hover { border-color:rgba(255,255,255,0.1); transform:translateY(-2px); box-shadow:0 8px 24px -8px rgba(0,0,0,0.5); }

.btn-primary { background:#ffffff; color:#000000 !important; font-weight:700; border:1px solid transparent; transition:all 0.2s ease; border-radius:0.5rem; display:inline-flex; align-items:center; justify-content:center; }
.btn-primary:hover:not(:disabled) { background:#e4e4e7; transform:translateY(-1px); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }
.btn-secondary { background:rgba(255,255,255,0.03); color:#e4e4e7; border:1px solid var(--border-subtle); font-weight:600; transition:all 0.2s ease; border-radius:0.5rem; display:inline-flex; align-items:center; justify-content:center; }
.btn-secondary:hover:not(:disabled) { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1); }
.btn-ghost { background:transparent; color:#a1a1aa; font-weight:600; transition:all 0.2s; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; }
.btn-ghost:hover:not(:disabled) { color:#fff; background:rgba(255,255,255,0.05); }
.btn-danger { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); font-weight:600; transition:all 0.2s ease; border-radius:0.5rem; display:inline-flex; align-items:center; justify-content:center; }
.btn-danger:hover:not(:disabled) { background:rgba(239,68,68,0.15); border-color:rgba(239,68,68,0.3); }
.btn-cta { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; background:#10b981; color:#000; font-weight:700; border-radius:0.5rem; padding:0.625rem 1.5rem; transition:all 0.18s ease; border:1px solid transparent; }
.btn-cta:hover { background:#059669; transform:translateY(-1px); box-shadow:0 6px 20px -4px rgba(16,185,129,0.45); }
.btn-cta:active { transform:translateY(0); }

.field { background:#09090b; border:1px solid var(--border-subtle); color:#fff; transition:all 0.2s ease; outline:none; width:100%; }
.field::placeholder { color:#52525b; }
.field:focus { border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,0.1); }

.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th { font-size:10px; font-weight:700; color:#71717a; padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.03); text-transform:uppercase; letter-spacing:0.07em; }
.data-table td { padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.02); font-size:0.875rem; color:#d4d4d8; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(255,255,255,0.01); }

.dot { display:inline-block; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dot-green { background:#10b981; box-shadow:0 0 6px rgba(16,185,129,0.6); }
.dot-red { background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,0.6); }
.dot-yellow { background:#f59e0b; box-shadow:0 0 6px rgba(245,158,11,0.6); }
.dot-blue { background:#3b82f6; box-shadow:0 0 6px rgba(59,130,246,0.6); }

.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:0.7rem; font-weight:600; letter-spacing:0.03em; }
.badge-green { background:rgba(16,185,129,0.1); color:#34d399; border:1px solid rgba(16,185,129,0.2); }
.badge-red { background:rgba(239,68,68,0.1); color:#f87171; border:1px solid rgba(239,68,68,0.2); }
.badge-yellow { background:rgba(245,158,11,0.1); color:#fbbf24; border:1px solid rgba(245,158,11,0.2); }
.badge-blue { background:rgba(59,130,246,0.1); color:#60a5fa; border:1px solid rgba(59,130,246,0.2); }
.badge-zinc { background:rgba(113,113,122,0.1); color:#a1a1aa; border:1px solid rgba(113,113,122,0.2); }
.badge-gray { background:rgba(113,113,122,0.1); color:#a1a1aa; border:1px solid rgba(113,113,122,0.2); }

@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.animate-float { animation: floatY 7s ease-in-out infinite; }
@keyframes pulseSlow { 0%,100%{opacity:0.4} 50%{opacity:0.9} }
.animate-pulse-slow { animation: pulseSlow 5s ease-in-out infinite; }
.spotlight-top { background: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(16,185,129,0.14) 0%, transparent 70%); pointer-events:none; position:fixed; inset:0; }
.display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.fade-up { opacity:0; transform:translateY(16px); animation:fadeUp 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.fade-in { opacity:0; animation:fadeIn 0.3s ease-out forwards; }
.delay-100 { animation-delay:0.08s; }
.delay-200 { animation-delay:0.16s; }
.delay-300 { animation-delay:0.24s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }
.gradient-text { background:linear-gradient(to right,#ffffff,#a1a1aa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.gradient-text-brand { background:linear-gradient(135deg,#34d399,#10b981); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.toast-item { padding:12px 16px; border-radius:10px; font-size:0.875rem; font-weight:500; max-width:380px; backdrop-filter:blur(16px); box-shadow:0 12px 40px rgba(0,0,0,0.5); }
.toast-success { background:rgba(6,78,59,0.9); color:#ecfdf5; border:1px solid rgba(16,185,129,0.3); }
.toast-error { background:rgba(127,29,29,0.9); color:#fef2f2; border:1px solid rgba(239,68,68,0.3); }

.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem; }
.empty-state { padding:4rem 2rem; text-align:center; color:#52525b; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:1rem; }
.drawer-backdrop { position:fixed; inset:0; z-index:50; }
.drawer-backdrop-bg { position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.modal-box { background:#18181b; border:1px solid var(--border-subtle); border-radius:1rem; width:100%; max-width:480px; padding:1.75rem; box-shadow:0 24px 64px rgba(0,0,0,0.6); }
.form-label { display:block; font-size:0.8rem; font-weight:500; color:#a1a1aa; margin-bottom:0.5rem; }
.form-group { margin-bottom:1rem; }
.form-error { margin-top:0.75rem; padding:0.75rem 1rem; border-radius:0.5rem; background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); color:#f87171; font-size:0.85rem; display:flex; align-items:center; gap:0.5rem; }

/* Sidebar — class-based state on <html>:
   html.sb-open  -> sidebar visible
   html.sb-closed -> sidebar hidden (translateX(-100%))
   html.sb-anim  -> transitions enabled (added via rAF after init to prevent flash) */
#app-sidebar { transform: translateX(-100%); }
html.sb-open #app-sidebar { transform: translateX(0); }
html.sb-anim #app-sidebar { transition: transform 0.26s cubic-bezier(0.4,0,0.2,1); }
html.sb-anim .page-container { transition: margin-left 0.26s cubic-bezier(0.4,0,0.2,1); }
.page-container { flex:1; min-width:0; background:#09090b; display:flex; flex-direction:column; }
@media(min-width:768px) { .page-container { margin-left:15rem; } }
@media(min-width:768px) { html.sb-closed .page-container { margin-left:0; } }
.page-inner { padding:2rem; max-width:80rem; margin:0 auto; width:100%; }
@media(max-width:640px) { .page-inner { padding:1.5rem; } }
.topbar { height:4rem; display:flex; align-items:center; justify-content:space-between; padding:0 1rem; background:rgba(9,9,11,0.8); backdrop-filter:blur(12px); border-bottom:1px solid #18181b; position:sticky; top:0; z-index:20; flex-shrink:0; gap:0.75rem; }
@media(min-width:768px){ .topbar { padding:0 2rem; } }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; }
@media(max-width:480px){ .modal-box { max-width:100%; border-radius:0.75rem; padding:1.25rem; } }
@media(max-width:480px){ .page-inner { padding:1rem; } }
@media(max-width:480px){ .sm\:grid-cols-1 { grid-template-columns:repeat(1,minmax(0,1fr)); } }
@media(max-width:768px){ input, select, textarea { font-size:16px !important; } }