/* ==========================================================================
   MoneyTales Admin Design System — Neutral Theme
   Shared across Atlas & Lumos admin interfaces
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  --primary: #1E293B;
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-light: #E0E7FF;
  --gold: #E89B2D;
  --gold-hover: #D48A1F;

  --navy: #1E293B;
  --sapphire: #6366F1;
  --sapphire-hover: #4F46E5;
  --sapphire-light: #E0E7FF;
  --gold-light: #FEF3C7;
  --navy-light: #E8ECF2;

  --text: #1E293B;
  --text-secondary: #64748B;
  --border: #E2E8F0;
  --surface: #F1F5F9;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --success: #059669;
  --warning: #D97706;
  --error: #DC2626;

  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-xs: 0 1px 2px rgba(30,41,59,.04);
  --shadow: 0 1px 3px rgba(30,41,59,.06), 0 1px 2px rgba(30,41,59,.04);
  --shadow-md: 0 4px 12px rgba(30,41,59,.08), 0 2px 4px rgba(30,41,59,.04);
  --shadow-lg: 0 12px 32px rgba(30,41,59,.1), 0 4px 8px rgba(30,41,59,.04);

  --ease: 220ms ease-out;
  --ease-slow: 400ms ease-out;

  --sp-xs: .25rem;
  --sp-sm: .5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --container: 1200px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--accent-hover)}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit}
::selection{background:var(--accent-light);color:var(--primary)}
hr{border:none;height:1px;background:var(--border)}
table{border-collapse:collapse;border-spacing:0}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--primary);line-height:1.2;letter-spacing:-.01em;font-weight:700}
h1{font-size:2.5rem;letter-spacing:-.025em}
h2{font-size:2rem;letter-spacing:-.02em}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
h5{font-size:1.125rem}
h6{font-size:1rem}

.text-sm{font-size:.875rem}
.text-xs{font-size:.75rem}
.fw-medium{font-weight:500}
.fw-semibold{font-weight:600}
.fw-bold{font-weight:700}
.text-secondary{color:var(--text-secondary)}
.text-sapphire{color:var(--accent)}
.text-success{color:var(--success)}
.text-error{color:var(--error)}
.text-center{text-align:center}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.flex-1{flex:1}
.gap-xs{gap:var(--sp-xs)}
.gap-sm{gap:var(--sp-sm)}
.gap-md{gap:var(--sp-md)}
.gap-lg{gap:var(--sp-lg)}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1023px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ==========================================================================
   SPACING
   ========================================================================== */
.m-0{margin:0}.mb-0{margin-bottom:0}
.mb-xs{margin-bottom:var(--sp-xs)}.mb-sm{margin-bottom:var(--sp-sm)}
.mb-md{margin-bottom:var(--sp-md)}.mb-lg{margin-bottom:var(--sp-lg)}
.mb-xl{margin-bottom:var(--sp-xl)}.mb-2xl{margin-bottom:var(--sp-2xl)}
.mt-sm{margin-top:var(--sp-sm)}.mt-md{margin-top:var(--sp-md)}
.p-md{padding:var(--sp-md)}.p-lg{padding:var(--sp-lg)}
.p-xl{padding:var(--sp-xl)}.w-full{width:100%}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:600;line-height:1.4;border-radius:var(--radius);border:none;cursor:pointer;transition:all var(--ease);text-decoration:none;white-space:nowrap}
.btn-lg{padding:.8125rem 1.75rem;font-size:1rem}
.btn-sm{padding:.4375rem .875rem;font-size:.8125rem}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(99,102,241,.2)}
.btn-primary:hover{background:var(--accent-hover);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.25);transform:translateY(-1px)}
.btn-outline{background:var(--white);color:var(--primary);border:1px solid var(--border)}
.btn-outline:hover{background:var(--surface);border-color:#CBD5E1;color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow)}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all var(--ease)}

/* Superadmin dashboard metric tiles. The em dash rendered when a stats
   lookup fails uses the same size as a number, so a failure reads as
   "unknown" rather than as a small value. */
.metric-value{font-family:var(--font-display,inherit);font-size:2rem;font-weight:600;line-height:1.1;color:var(--primary)}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group{margin-bottom:var(--sp-lg)}
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--primary);margin-bottom:.375rem}
.form-label-row{display:flex;justify-content:space-between;align-items:baseline}
.form-input{display:block;width:100%;padding:.75rem 1rem;font-size:.9375rem;line-height:1.5;color:var(--text);background:var(--white);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--ease),box-shadow var(--ease);appearance:none}
.form-input::placeholder{color:#94A3B8}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.1)}

/* ==========================================================================
   TABLE
   ========================================================================== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.table th,.table td{padding:.875rem 1rem;text-align:center;vertical-align:middle}
.table thead{background:var(--primary)}
.table thead th{color:#fff;font-weight:600;font-size:.875rem;letter-spacing:.02em;border:none}
.table tbody td{border-bottom:1px solid var(--border)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--ease)}
.table tbody tr:hover{background:var(--bg)}

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge{display:inline-flex;align-items:center;padding:.3125rem .75rem;font-size:.8125rem;font-weight:600;line-height:1.4;border-radius:var(--radius-full);letter-spacing:.02em}
.badge-sapphire{background:var(--accent-light);color:var(--accent)}
.badge-navy{background:var(--navy-light);color:var(--primary)}

/* ==========================================================================
   ADMIN LAYOUT
   ========================================================================== */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 240px;
  background: #1E293B;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  flex-shrink: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
}

.admin-sidebar-logo {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
}

.admin-sidebar-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: -.02em;
}

.admin-sidebar-logo-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
}

.admin-nav {
  flex: 1;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: all 200ms ease;
  border-left: 3px solid transparent;
}

.admin-nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}

.admin-nav-item.active {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-left-color: var(--accent);
}

.admin-nav-item i {
  font-size: 20px;
}

.admin-nav-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: .5rem;
}

.admin-content {
  flex: 1;
  margin-left: 240px;
  padding: 2rem 2.5rem;
  background: var(--bg);
  min-height: 100vh;
}

.admin-header {
  margin-bottom: 2rem;
}

.admin-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes revealUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealScale{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
}