/* ===============================
   ToBe System Theme (Light + Black/Yellow Accent)
   =============================== */

:root{
  --bg-main: #f5f7fb;          /* พื้นหลังหลัก (ขาวอมเทา) */
  --bg-card: #ffffff;          /* การ์ด */
  --bg-dark: #0f1115;          /* ดำ (navbar/accent) */

  --text-main: #1f2937;        /* ตัวอักษรหลัก */
  --text-muted: #6b7280;       /* ตัวอักษรรอง */

  --yellow: #ffc107;           /* เหลือง ToBe */
  --border-soft: #e5e7eb;      /* เส้นขอบอ่อน */
}

/* ---------- Global ---------- */
body.bg-app{
  background: #f5f7fb;   /* เรียบๆ ไม่เป็นชั้น */
  color: var(--text-main);
}

/* ---------- Page wrapper ---------- */
.page-wrap{
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 16px;
}

/* ---------- Card ---------- */
.card-app{
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ---------- Text ---------- */
.text-muted-app{
  color: var(--text-muted) !important;
}

/* ---------- Navbar tweaks ---------- */
.navbar-dark{
  background-color: var(--bg-dark) !important;
}

.navbar-dark .nav-link{
  color: rgba(255,255,255,0.75);
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active{
  color: var(--yellow);
}

/* ---------- Buttons ---------- */
.btn-warning{
  font-weight: 600;
  color: #1f2937;
}

.btn-outline-warning{
  font-weight: 600;
}

/* ---------- Tables ---------- */
.table{
  color: var(--text-main);
}

.table thead th{
  background-color: #f9fafb;
  border-bottom: 2px solid var(--border-soft);
}

.table-striped > tbody > tr:nth-of-type(odd){
  background-color: #f9fafb;
}

/* ---------- Forms ---------- */
.form-label{
  font-weight: 500;
}

.form-control,
.form-select{
  border-radius: 10px;
}

/* focus สีเหลือง */
.form-control:focus,
.form-select:focus,
.btn:focus{
  box-shadow: 0 0 0 .2rem rgba(255,193,7,.25);
  border-color: var(--yellow);
}

/* ---------- Links ---------- */
a{
  text-decoration: none;
}

/* ===============================
   KPI Cards (Dashboard)
   =============================== */

.kpi-card{
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* เส้น accent ด้านบน */
.kpi-card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background: var(--kpi-accent, var(--yellow));
}

/* แสงพื้นหลังเบา ๆ */
.kpi-card::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width:240px;
  height:240px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,193,7,.22), transparent 60%);
  pointer-events:none;
  filter: blur(0px);
}

.kpi-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,193,7,.16);
  color:#b45309;
  font-size: 1.4rem;
}

.kpi-title{
  color: var(--text-muted);
  font-size: .85rem;
}

.kpi-number{
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
}

.kpi-sub{
  color: var(--text-muted);
  font-size: .85rem;
}

.kpi-accent-yellow{ --kpi-accent: var(--yellow); }
.kpi-accent-green{ --kpi-accent: #22c55e; }
.kpi-accent-dark{ --kpi-accent: #111827; }
.kpi-accent-blue{ --kpi-accent: #3b82f6; }

/* progress bar ให้เข้าธีม */
.progress.kpi-progress{
  height: 8px;
  background: #eef2f7;
  border-radius: 999px;
}
.progress.kpi-progress .progress-bar{
  background: var(--kpi-accent, var(--yellow));
  border-radius: 999px;
}

/* ===== Menu Card Accent ===== */
.menu-card{
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.menu-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* accent bar */
.menu-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:6px 0 0 6px;
}

/* color themes */
.menu-blue::before{ background:#0d6efd; }
.menu-yellow::before{ background:#ffc107; }
.menu-purple::before{ background:#6f42c1; }
.menu-red::before{ background:#dc3545; }

/* icon color */
.menu-blue .menu-icon{ color:#0d6efd; }
.menu-yellow .menu-icon{ color:#ffc107; }
.menu-purple .menu-icon{ color:#6f42c1; }
.menu-red .menu-icon{ color:#dc3545; }