/* ============================================================
   ERP Demo — Design System (ธีมกลางใช้ทุกหน้า)
   palette / typography / spacing / components / states
   ============================================================ */
:root {
    --brand-900: #0a2f52;
    --brand-700: #0d3b66;
    --brand-500: #1d6fb8;
    --brand-300: #4dabf7;
    --accent:    #0d6efd;
    --ok:    #198754;
    --warn:  #f0a020;
    --danger:#dc3545;
    --ink:   #1f2a37;
    --muted: #6b7785;
    --line:  #e6eaf0;
    --bg:    #f3f6fb;
    --radius: .85rem;
    --shadow: 0 2px 14px rgba(13, 59, 102, .07);
    --shadow-hover: 0 8px 26px rgba(13, 59, 102, .14);
}

* { scroll-behavior: smooth; }
body {
    font-family: 'Sarabun', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
}

/* ---------- Navbar ---------- */
.app-navbar {
    background: linear-gradient(100deg, var(--brand-900), var(--brand-500));
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.app-navbar .navbar-brand { font-weight: 700; letter-spacing: .2px; }
.app-navbar .nav-link { color: rgba(255,255,255,.86) !important; border-radius: .5rem; transition: all .18s ease; }
.app-navbar .nav-link:hover { background: rgba(255,255,255,.12); color:#fff !important; }
.app-navbar .nav-link.active { font-weight: 600; background: rgba(255,255,255,.18); color:#fff !important; }
.global-search .form-control {
    border: none; border-radius: 2rem; background: rgba(255,255,255,.18);
    color:#fff; min-width: 220px;
}
.global-search .form-control::placeholder { color: rgba(255,255,255,.7); }
.global-search .form-control:focus { background: #fff; color: var(--ink); box-shadow: none; }

/* ---------- Cards ---------- */
.card {
    border: none; border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.section-title { font-weight: 700; color: var(--brand-700); }

/* ---------- KPI cards ---------- */
.kpi {
    border-radius: var(--radius); color: #fff; padding: 1.1rem 1.25rem;
    position: relative; overflow: hidden; box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.kpi.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.kpi .kpi-icon {
    position: absolute; right: -8px; top: -6px; font-size: 4.6rem; opacity: .16;
}
.kpi .kpi-label { font-size: .92rem; opacity: .95; }
.kpi .kpi-value { font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-delta { font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem;
    background: rgba(255,255,255,.2); padding: .1rem .5rem; border-radius: 1rem; margin-top: .35rem; }
.kpi-blue   { background: linear-gradient(135deg, #1d6fb8, #4dabf7); }
.kpi-green  { background: linear-gradient(135deg, #198754, #2bbf6a); }
.kpi-orange { background: linear-gradient(135deg, #e8830c, #ffb347); }
.kpi-red    { background: linear-gradient(135deg, #cf3344, #ff6b81); }
.kpi-purple { background: linear-gradient(135deg, #6f42c1, #9b6df0); }
.kpi-slate  { background: linear-gradient(135deg, #475569, #7488a3); }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: #eef4fc; }
.table thead th { background: #eef2f8; color: var(--brand-700); font-weight: 600; border-bottom: 2px solid var(--line); }
.table tbody tr { transition: background .12s ease; }

/* ---------- Buttons / pills ---------- */
.btn { border-radius: .55rem; transition: all .16s ease; }
.btn:active { transform: translateY(1px); }
.btn-brand { background: var(--brand-500); color:#fff; }
.btn-brand:hover { background: var(--brand-700); color:#fff; }
.badge-soft { background:#eef2f8; color: var(--brand-700); border:1px solid var(--line); font-weight:500; }

/* ---------- Empty state ---------- */
.empty-state { text-align:center; padding: 2.6rem 1rem; color: var(--muted); }
.empty-state .bi { font-size: 2.8rem; opacity:.4; display:block; margin-bottom:.6rem; }

/* ---------- Loading overlay ---------- */
.loading-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,.72);
    backdrop-filter: blur(2px); z-index: 2000; display:none;
    align-items:center; justify-content:center; flex-direction:column; gap:1rem;
}
.loading-overlay.show { display:flex; }
.loading-overlay .spinner-border { width: 3rem; height: 3rem; color: var(--brand-500); }

/* ---------- Flow steps (home) ---------- */
.flow-step { background:#fff; border-radius:.7rem; padding:1rem .6rem; text-align:center;
    box-shadow: var(--shadow); height:100%; transition: transform .18s ease; }
.flow-step:hover { transform: translateY(-3px); }
.flow-arrow { font-size:1.4rem; color:#b8c2d0; }

/* ---------- Notification dropdown ---------- */
.notif-dropdown { width: 340px; max-width: 92vw; }
.notif-item { border-bottom:1px solid var(--line); padding:.6rem .9rem; }
.notif-item:last-child { border-bottom:none; }

/* ---------- Footer ---------- */
footer.app-footer { color:#8a94a6; font-size:.85rem; }

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.animate-in { animation: fadeInUp .45s ease both; }

/* ---------- QR scan success flash ---------- */
@keyframes scanFlash { 0% { background: rgba(25,135,84,.0);} 30% { background: rgba(25,135,84,.35);} 100% { background: rgba(25,135,84,0);} }
.scan-flash { animation: scanFlash .6s ease; }

/* ---------- Responsive tweaks (มือถือ/แท็บเล็ต) ---------- */
@media (max-width: 991px) {
    .global-search { margin: .5rem 0; }
    .global-search .form-control { width: 100%; }
    .kpi .kpi-value { font-size: 1.7rem; }
}
@media (max-width: 575px) {
    .kpi .kpi-value { font-size: 1.55rem; }
    h3.section-title { font-size: 1.25rem; }
}