/* =============================
   THEME PALETTE & TOKENS
   ============================= */
:root{
  /* Brand */
  --primary:#4f46e5; /* Indigo 600 */
  --primary-700:#4338ca;
  --accent:#22c55e;  /* Green 500 */
  --warning:#f59e0b; /* Amber 500 */
  --danger:#ef4444;  /* Red 500 */
  --muted:#6b7280;   /* Gray 500 */

  /* Color chips (สีสินค้า) */
  --purple:#6f42c1;
  --pink:#e83e8c;
  --blue:#0d6efd;
  --orange:#fd7e14;
  --green:#28a745;

  /* Surface */
  --bg:#f4f6fb;
  --card-bg:#ffffff;
  --card-bg-soft:#fafbff;

  /* Effects */
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 25px rgba(15, 23, 42, .06);
  --shadow-sm:0 6px 16px rgba(15, 23, 42, .05);
  --ring:0 0 0 3px rgba(79,70,229,.12);

  /* Stock status */
  --status-ok:#28a745;     /* เขียว: ปกติ */
  --status-warn:#f59e0b;   /* เหลือง: ใกล้หมด */
  --status-danger:#ef4444; /* แดง: หมด */
}

/* =============================
   BASE
   ============================= */
body{
  background:
    radial-gradient(1500px 800px at -10% -10%, #eef2ff 0%, transparent 60%),
    radial-gradient(1200px 600px at 110% -10%, #e0f2fe 0%, transparent 60%),
    var(--bg);
}
.content-wrapper{ background:transparent; }
.main-header.navbar{
  box-shadow:var(--shadow);
  border:0;
  backdrop-filter: saturate(140%) blur(4px);
}
.navbar .btn{ border-radius:999px; }

/* Brand */
.brand-link{
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color:#fff !important;
}
.brand-link .brand-text{ font-weight:600; letter-spacing:.2px; }

/* Sidebar */
.sidebar{ background:#0f172a; /* slate-900 */ }
.sidebar .nav-link{ border-radius:12px; margin:3px 8px; }
.sidebar-dark-primary .nav-link.active{
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}

/* =============================
   CARDS / PANELS
   ============================= */
.card{
  border:0;
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card .card-header{
  background:linear-gradient(135deg, var(--card-bg-soft), #fff);
  border:0;
  padding:.85rem 1rem;
}
.card.elevate-on-hover{ transition:transform .18s ease, box-shadow .18s ease; }
.card.elevate-on-hover:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 40px rgba(15, 23, 42, .10);
}

/* การ์ดสายคล้อง */
.card-lanyard{ border-left: 6px solid #0ea5e9; }
.card-lanyard .card-header{ background: linear-gradient(135deg, #e0f2fe, #ffffff); }
.card-lanyard .card-title, .card-lanyard .card-title i{ color:#0369a1; }
.card-lanyard .card-body{ background:#f0f9ff; }

/* การ์ดตัวหนีบ */
.card-clip{ border-left: 6px solid var(--purple); }
.card-clip .card-header{ background: linear-gradient(135deg, #f3e8ff, #ffffff); }
.card-clip .card-title, .card-clip .card-title i{ color: var(--purple); }
.card-clip .card-body{ background:#faf5ff; }

/* =============================
   BUTTONS
   ============================= */
.btn{ border-radius:999px; transition:transform .08s ease, box-shadow .12s ease; }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:0 8px 18px rgba(79,70,229,.22);
}
.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); }
.btn-outline-success:hover{ color:#fff; }

/* Soft buttons */
.btn-soft{ background: rgba(79,70,229,.10); color: var(--primary); border: none; }
.btn-soft:hover{ background: rgba(79,70,229,.18); color:var(--primary-700); }
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0;
}

/* =============================
   INFO BOX / SMALL BOX
   ============================= */
.small-box{ border-radius:16px; box-shadow:var(--shadow); }
.small-box .icon{ opacity:.15; }
.info-box{ border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.info-box .info-box-number{ font-weight:700; }

/* =============================
   TABLES
   ============================= */
.table{ margin-bottom:0; }
.table thead th{
  position: sticky; top:0; z-index:1;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom:1px solid #e5e7eb;
  font-weight:600;
}
.table tbody tr{ transition: background .12s ease; }
.table-hover tbody tr:hover{ background:#fafafa; }
.table td, .table th{ vertical-align: middle; }
.table .badge{ transform: translateZ(0); }

/* =============================
   BADGES (ล้างซ้ำให้เหลือชุดเดียว)
   ============================= */
/* type IN/OUT */
.badge-success{ background: var(--accent) !important; }
.badge-danger{  background: var(--danger) !important; }

/* สีสินค้า */
.badge-primary{ background: var(--blue) !important; }
.badge-warning{ background: var(--warning) !important; color:#111; }
.badge-purple{  background: var(--purple) !important; color:#fff; }
.badge-pink{     background: var(--pink) !important;   color:#fff; }

/* Chips (เล็ก โค้งมน) */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#f1f5f9; color:#0f172a; padding:.25rem .6rem;
  border-radius:999px; font-size:.82rem; font-weight:600;
}

/* =============================
   COLOR DOTS (เหลือบล็อคเดียว)
   ============================= */
.color-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  margin-right:6px; vertical-align:middle; box-shadow: 0 0 0 2px #fff;
}
.dot-blue{background:var(--blue)}
.dot-orange{background:var(--orange)}
.dot-green{background:var(--green)}
.dot-purple{background:var(--purple)}
.dot-pink{background:var(--pink)}

/* สถานะสต๊อก (สำหรับ dot สถานะ ถ้าต้องใช้) */
.status-ok{ background: var(--status-ok); }
.status-warn{ background: var(--status-warn); }
.status-danger{ background: var(--status-danger); }

/* =============================
   FORMS / INPUTS / DROPDOWNS
   ============================= */
.form-control{
  border-radius:12px;
  border:1px solid #e5e7eb;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{ border-color:var(--primary); box-shadow:var(--ring); }
.input-group .btn{ border-radius:12px; }
.dropdown-menu{ border-radius:14px; border:0; box-shadow:var(--shadow); padding:.35rem; }
.dropdown-item{ border-radius:10px; margin:.1rem 0; }
.dropdown-item:hover{ background:#eef2ff; }

/* =============================
   MODAL
   ============================= */
.modal-content{ border:0; border-radius:16px; box-shadow:var(--shadow); overflow:hidden; }
.modal-header{ background: linear-gradient(135deg, #fff, #f3f4f6); border-bottom:0; }

/* =============================
   UTILITIES
   ============================= */
.text-muted{ color: var(--muted) !important; }
.card-title i{ opacity:.75; }
.hr-soft{ border:0; height:1px; background:linear-gradient(90deg, transparent, #e5e7eb, transparent); }
.elevate-on-hover{ transition:transform .18s ease, box-shadow .18s ease; }
.elevate-on-hover:hover{ transform: translateY(-2px); box-shadow:0 16px 40px rgba(15, 23, 42, .10); }

/* Scrollbar (Chromium/Edge) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:#cbd5e1; border-radius:999px; border:3px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

/* =============================
   LOGIN PAGE
   ============================= */
.auth-page{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(900px 500px at 0% 0%, #eef2ff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #e0f2fe 0%, transparent 60%),
    var(--bg);
}
.auth-card{
  width:100%; max-width:420px;
  background:rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-radius:20px; box-shadow:var(--shadow); padding:26px;
}
.auth-title{
  font-weight:700; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:.75rem;
}

/* =============================
   NAVBAR ACTIVE STATE
   ============================= */
.main-header .navbar-nav .nav-link{
  border-radius:10px; padding:.35rem .65rem; transition: background .2s, color .2s;
}
.main-header.navbar-light .navbar-nav .nav-link:hover,
.main-header.navbar-light .navbar-nav .nav-link:focus{
  background: rgba(79,70,229,.10); color:#4f46e5;
}
.main-header .navbar-nav .nav-link.active{
  background: rgba(79,70,229,.18);
  color:#4f46e5;
  box-shadow: inset 0 0 0 2px rgba(79,70,229,.12);
}

/* =============================
   STOCK ALERT CHIP 
   ============================= */
.stock-alert{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:12px;
  background:#ffe4e6 !important; /* ชมพูอ่อน */
  color:#b4231a !important;       /* แดงเข้ม */
  font-weight:700;
  line-height:1.2;
}
.stock-alert i{ font-size:.95rem; opacity:.95; }