/* ============================================================
   CashMiles Admin Panel — Base CSS (premium theme)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --primary:        #0f9d8a;
  --primary-dark:   #0a7a6a;
  --primary-light:  #dcf5f0;
  --primary-soft:   #f0fbf8;
  --accent:         #6366f1;

  /* Status */
  --success:        #059669;
  --success-light:  #d1fae5;
  --danger:         #e11d48;
  --danger-light:   #ffe4e9;
  --warning:        #d97706;
  --warning-light:  #fef3c7;
  --info:           #0284c7;
  --info-light:     #e0f2fe;

  /* Chrome */
  --sidebar-bg:     #0a1f24;
  --sidebar-bg-2:   #0d2b31;
  --sidebar-text:   #9db8bd;
  --sidebar-hover:  rgba(255,255,255,.06);
  --sidebar-active: linear-gradient(135deg, #14b8a6 0%, #0f9d8a 100%);
  --topnav-bg:      rgba(255,255,255,.82);
  --body-bg:        #f4f7f8;
  --card-bg:        #ffffff;
  --border:         #e6ecef;
  --border-strong:  #d5dee2;

  /* Text */
  --text-primary:   #10242a;
  --text-secondary: #5a7079;
  --text-muted:     #93a5ac;

  /* Shape */
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;

  /* Elevation */
  --shadow:         0 1px 2px rgba(10,31,36,.04), 0 1px 3px rgba(10,31,36,.05);
  --shadow-md:      0 4px 12px rgba(10,31,36,.06), 0 2px 4px rgba(10,31,36,.04);
  --shadow-lg:      0 20px 40px rgba(10,31,36,.12), 0 6px 12px rgba(10,31,36,.06);
  --ring:           0 0 0 4px rgba(15,157,138,.14);

  --font:           'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sidebar-w:      268px;
  --topnav-h:       68px;
}

html { font-size: 15px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(15,157,138,.07), transparent 60%),
    var(--body-bg);
  background-attachment: fixed;
  color: var(--text-primary);
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }
::selection { background: rgba(15,157,138,.22); }

/* Slim scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c5d2d7 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c5d2d7; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a9bcc3; }

/* Utilities used across views */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mb-6 { margin-bottom: 24px; }
.mt-4 { margin-top: 16px; }
.text-center { text-align: center; }
.text-danger { color: var(--danger); }
@media (max-width: 1024px) { .grid-2 { grid-template-columns: 1fr; } }