:root { --ttsk: #0b5ea8; --ttsk-dark: #08426f; --sidebar-w: 250px; }
body { font-family: 'Sarabun', system-ui, sans-serif; background: #f3f6fa; }
.bg-ttsk { background: var(--ttsk-dark); }
.app-wrap { display: flex; min-height: 100vh; }
/* Bootstrap .offcanvas-lg ตั้งพื้นหลังโปร่งใสด้วย !important บนจอ ≥lg จึงต้อง override ให้ชนะ */
.sidebar, .sidebar.offcanvas-lg {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0b4f8a 0%, #08335a 100%) !important;
  color: #fff !important;
  flex-shrink: 0; display: flex; flex-direction: column;
  --bs-offcanvas-color: #fff; --bs-offcanvas-bg: #08335a;
  box-shadow: 2px 0 8px rgba(0,0,0,.12);
}
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.sidebar .sidebar-brand, .sidebar .sidebar-foot { color: #fff; }
.sidebar .sidebar-brand i { color: #7fc4ff; }
.sidebar .sidebar-foot .text-white-50 { color: rgba(255,255,255,.65) !important; }
.sidebar-brand { padding: 1rem 1.25rem; font-size: 1.5rem; font-weight: 700; display: flex; gap: .6rem; align-items: center; }
.sidebar-brand small { display: block; font-size: .65rem; font-weight: 300; opacity: .7; margin-top: -4px; }
.sidebar .nav-head { font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.6); padding: 1rem .75rem .3rem; list-style: none; font-weight: 500; }
.sidebar .nav-link { color: #e8f1fa; border-radius: .5rem; padding: .5rem .75rem; display: flex; gap: .6rem; align-items: center; }
.sidebar .nav-link i { opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.14); color: #fff; }
.sidebar .nav-link.active { background: #fff; color: var(--ttsk-dark); font-weight: 600; }
.sidebar .nav-link.active i { color: var(--ttsk); opacity: 1; }
.sidebar .btn-outline-light:hover { color: var(--ttsk-dark); }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.15); }
.content { flex: 1; min-width: 0; padding: 1.5rem; }
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card .stat-num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.table > :not(caption) > * > * { vertical-align: middle; }
.low-stock { background: #fff3cd !important; }
.out-stock { background: #f8d7da !important; }
.login-box { max-width: 400px; margin: 8vh auto; }