/* ============================================================
   🎨 NKE Fleet — Design System Theme
   ไฟล์เดียวคุมโทนทั้งระบบ: สี ฟอนต์ การ์ด ปุ่ม ตาราง โมดัล
   วางทับ Bootstrap 5 (โหลดไฟล์นี้ "หลัง" bootstrap.min.css)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  --nke-primary: #6d28d9;        /* violet-700 */
  --nke-primary-dark: #4c1d95;   /* violet-900 */
  --nke-primary-soft: #ede9fe;   /* violet-100 */
  --nke-accent: #f59e0b;         /* amber-500 */
  --nke-bg: #f4f4fb;
  --nke-surface: #ffffff;
  --nke-text: #1e1b2e;
  --nke-muted: #6b7280;
  --nke-radius: 16px;
  --nke-shadow-sm: 0 1px 3px rgba(30, 27, 46, .06), 0 4px 14px rgba(30, 27, 46, .05);
  --nke-shadow-md: 0 8px 30px rgba(76, 29, 149, .12);
  --nke-gradient: linear-gradient(135deg, #7c3aed 0%, #6d28d9 45%, #4c1d95 100%);
}

/* ---------- Base ---------- */
body {
  font-family: 'Sarabun', 'Prompt', sans-serif !important;
  background-color: var(--nke-bg);
  color: var(--nke-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-bold {
  font-family: 'Prompt', 'Sarabun', sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Navbar ---------- */
.navbar-nke, nav.navbar {
  background: var(--nke-gradient) !important;
  box-shadow: 0 2px 20px rgba(76, 29, 149, .25);
}
.navbar-nke .navbar-brand, nav.navbar .navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.navbar-nke .fw-bold, nav.navbar span.fw-bold { color: #fff; }

/* ---------- Cards ---------- */
.card {
  border: none !important;
  border-radius: var(--nke-radius) !important;
  box-shadow: var(--nke-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--nke-shadow-md); }
.card-header {
  border-radius: var(--nke-radius) var(--nke-radius) 0 0 !important;
  border-bottom: 1px solid #f0eef8 !important;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; font-weight: 600; transition: all .2s ease; }
.btn:active { transform: scale(.97); }
.btn-primary, .btn-nke {
  background: var(--nke-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(109, 40, 217, .35);
}
.btn-primary:hover, .btn-nke:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(109, 40, 217, .45);
}
.btn-success {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .3);
}
.btn-danger {
  background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
  border: none !important;
}
.btn-warning {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  border: none !important;
  color: #422006 !important;
}
.btn-outline-primary { border-color: var(--nke-primary); color: var(--nke-primary); }
.btn-outline-primary:hover { background: var(--nke-primary); border-color: var(--nke-primary); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: 12px;
  border: 1.5px solid #e5e3f1;
  padding: .6rem .9rem;
  background-color: #fbfaff;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--nke-primary);
  box-shadow: 0 0 0 4px rgba(109, 40, 217, .12);
  background-color: #fff;
}
.form-label { font-weight: 600; color: var(--nke-text); }

/* ---------- Tables ---------- */
.table { border-color: #f0eef8; }
.table thead th {
  background: var(--nke-primary-soft);
  color: var(--nke-primary-dark);
  font-family: 'Prompt', sans-serif;
  font-weight: 600;
  border: none;
  white-space: nowrap;
}
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: #faf9ff; }

/* ---------- Badges / Alerts ---------- */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.alert { border-radius: var(--nke-radius); border: none; box-shadow: var(--nke-shadow-sm); }

/* ---------- Modals ---------- */
.modal-content {
  border: none;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(30, 27, 46, .25);
  overflow: hidden;
}
.modal-header.bg-primary { background: var(--nke-gradient) !important; }
.modal-backdrop.show { backdrop-filter: blur(3px); }

/* ---------- Timeline (dashboard) ---------- */
.timeline-bar {
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(30, 27, 46, .25);
  font-family: 'Prompt', sans-serif;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d1ea; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--nke-primary); }

/* ---------- Utility ---------- */
.text-primary { color: var(--nke-primary) !important; }
.bg-primary { background: var(--nke-gradient) !important; }
.rounded-4 { border-radius: var(--nke-radius) !important; }
.shadow-sm { box-shadow: var(--nke-shadow-sm) !important; }

/* ---------- Page fade-in ---------- */
@keyframes nkeFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body > .container, body > .container-fluid, body > div { animation: nkeFadeIn .35s ease both; }