:root {
  --sidebar-w: 240px;
  --brand: #b45309;
  --brand-dark: #7c3a0a;
}
body { background: #f4f5f7; }
.app-wrapper { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #1f2937, #111827);
  color: #e5e7eb;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  overflow-y: auto;
  z-index: 1030;
  transition: transform .2s ease;
}
.sidebar-brand {
  padding: 1.1rem 1.2rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand i { color: var(--brand); margin-right: .4rem; }
.sidebar-nav { padding: .75rem .6rem; }
.sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-radius: .5rem;
  color: #cbd5e1; text-decoration: none; margin-bottom: .15rem;
  font-size: .93rem;
}
.sidebar-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-link.active { background: var(--brand); color: #fff; }
.main-col { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: .6rem 1.25rem; display: flex; align-items: center;
  position: sticky; top: 0; z-index: 1020;
}
.content-area { padding: 1.25rem; flex: 1; }
.card { border: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); border-radius: .6rem; }
.stat-card { border-radius: .75rem; color: #fff; padding: 1.1rem 1.25rem; }
.stat-card .stat-label { font-size: .8rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; }
.bg-brand1 { background: linear-gradient(135deg,#2563eb,#1d4ed8); }
.bg-brand2 { background: linear-gradient(135deg,#16a34a,#15803d); }
.bg-brand3 { background: linear-gradient(135deg,#d97706,#b45309); }
.bg-brand4 { background: linear-gradient(135deg,#dc2626,#b91c1c); }
.table-responsive { border-radius: .5rem; overflow: hidden; }
.badge-low { background: #fee2e2; color: #b91c1c; }
.auth-body { background: linear-gradient(135deg,#1f2937,#b45309); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: #fff; border-radius: .75rem; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.line-item-row .form-control, .line-item-row .form-select { font-size: .9rem; }
.line-item-row .unit-display { background: #f1f3f5; text-align: center; color: #495057; }
.line-item-row .unit-display.unit-editable { background: #fff8e6; border-color: #f0b429; color: #664d03; font-weight: 600; }
.line-item-row .note-input::placeholder { font-size: .82rem; }
.line-item-row .prod-search { padding-right: 3.2rem; }
.new-product-badge { position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); pointer-events: none; }
.new-product-hint { line-height: 1.3; }
#custSearch.prod-search { padding-right: 5.2rem; }

/* Autocomplete tim vat lieu (thay the dropdown select khi danh sach dai) */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1060;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.autocomplete-item {
  padding: .5rem .75rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: #fef3e2; }
.autocomplete-item .ac-main { font-size: .9rem; }
.autocomplete-item .ac-code { font-weight: 600; color: var(--brand); }
.autocomplete-item .ac-sub { font-size: .78rem; }
.autocomplete-empty { padding: .6rem .75rem; color: #868e96; font-size: .85rem; }
.autocomplete-create-new { background: #fffaf0; }
.autocomplete-create-new:hover, .autocomplete-create-new.active { background: #fef3e2; }
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-col { margin-left: 0; }
}

/* Hoa don ban hang dang in - bang co ke o giong mau hoa don viet tay/excel cua cua hang */
.invoice-sheet { background: #fff; padding: 1.5rem; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.invoice-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.invoice-table td, .invoice-table th { border: 1px solid #ced4da; padding: .35rem .5rem; vertical-align: middle; }
.invoice-table tr.invoice-noborder td { border: none; }
.invoice-table tr.invoice-spacer-row td { border-left: 1px solid #ced4da; border-right: 1px solid #ced4da; border-top: none; border-bottom: none; height: .6rem; padding: 0; }
.invoice-shop-cell { text-align: left; vertical-align: middle; }
.invoice-shop-name { font-weight: 800; font-size: 1.05rem; color: #b91c1c; line-height: 1.3; }
.invoice-title-cell { text-align: center; vertical-align: middle; }
.invoice-title { font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; }
.invoice-tagline { font-size: .82rem; color: #495057; margin-top: .25rem; }
.invoice-header-row th { background: #f1f3f5; font-size: .82rem; }
.invoice-debt { color: #dc2626; }
.invoice-sign-space td { height: 4rem; }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main-col { margin-left: 0 !important; }
  .content-area { padding: 0 !important; }
  body { background: #fff !important; }
  .invoice-sheet { box-shadow: none; padding: 0; }
}