:root { --sidebar-width: 260px; }

body { font-size: .925rem; }

.main-area { min-width: 0; }

/* ================================================================ Thanh bên
   Nền tối theo bản thiết kế đang dùng thật. Logo màu xanh lá đậm không đọc
   được trên nền tối nên phần đầu dùng tên thương hiệu dạng chữ, đúng như
   bản mẫu; logo vẫn ở trang đăng nhập, POS và các bản in. */

.sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width);
  background: #2f3133; color: #cfd4d8;
  overflow-y: auto; position: sticky; top: 0; height: 100vh;
}
.sidebar .sb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar .sb-head .brand {
  font-size: 16px; font-weight: 600; letter-spacing: .4px;
  color: #fff; text-decoration: none; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .sb-head .who {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #2f3133; border: none;
  display: grid; place-items: center; text-decoration: none; flex: 0 0 auto;
}

.sidebar .sb-menu, .sidebar .sb-sub { list-style: none; margin: 0; padding: 0; }
.sidebar .sb-menu { padding: 8px 0; }

.sidebar .sb-link {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; color: #cfd4d8; text-decoration: none;
  font-size: 15px; border-left: 3px solid transparent;
}
.sidebar .sb-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar .sb-link .ic { font-size: 17px; opacity: .85; }
.sidebar .sb-link .lb { flex: 1 1 auto; }
.sidebar .sb-link .ca { font-size: 11px; opacity: .6; transition: transform .15s ease; }
.sidebar .sb-group.open > .sb-link .ca,
.sidebar .sb-link[aria-expanded="true"] .ca { transform: rotate(180deg); }

/* Mục đang xem */
.sidebar .sb-link.on {
  background: #26282a; color: #4da3ff; border-left-color: #4da3ff;
}
.sidebar .sb-link.on .ic { opacity: 1; }

.sidebar .sb-sub { background: rgba(0,0,0,.18); }
.sidebar .sb-link.sub {
  padding: 10px 18px 10px 52px; font-size: 14px; color: #a9b0b6;
}
.sidebar .sb-link.sub:hover { color: #fff; }
.sidebar .sb-link.sub.on { color: #4da3ff; background: #26282a; }

/* Khối Mobile POS nổi bật */
.sidebar .sb-pos {
  display: flex; align-items: center; gap: 14px;
  margin: 10px 0; padding: 15px 18px;
  background: #e15b4c; color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none;
}
.sidebar .sb-pos:hover { background: #cf4d3f; color: #fff; }

.sidebar .sb-logout { margin: 6px 0 24px; }
.sidebar .sb-logout button {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; background: none; border: none;
  color: #cfd4d8; font-size: 15px; text-align: left;
}
.sidebar .sb-logout button:hover { background: rgba(255,255,255,.05); color: #fff; }

/* Ngăn trượt trên điện thoại dùng chung bộ màu */
.offcanvas.sidebar { width: 280px; height: 100%; position: fixed; }

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover { background-color: var(--bs-secondary-bg); }

.table-sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }

.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

.stat-card { border-left: 4px solid var(--bs-primary); }

@media print {
  .no-print, .sidebar, header.navbar, footer { display: none !important; }
  .main-area { width: 100% !important; }
}