/*
  Bang mau: Cam + Vang + Xanh la + Den + Trang + Nude — pha nhat, moi mau 1 vai tro rieng
  de phoi hop hai hoa thay vi choi:
   - Nude/Trang: nen chinh, tao khong gian thoang
   - Cam: mau thuong hieu, dung cho nut hanh dong chinh + sidebar
   - Vang: diem nhan phu (canh tren stat-card, trang thai "sap den han")
   - Xanh la: mau trang thai tich cuc (con trong, da thanh toan) - tong dieu diu, khong chinh
   - Den (than chi): mau chu chinh
*/
:root {
  --sidebar-w: 240px;
  --brand: #e0894f;
  --brand-dark: #b9652f;
  --brand-accent: #d9a441;
  --brand-accent-dark: #b8872c;
  --nude: #f7f1e6;
  --nude-soft: #fbf7f0;
  --ink: #2b2621;
  --leaf: #7a9b5e;
  --leaf-rgb: 122, 155, 94;
  --leaf-dark: #5f7d47;

  --bs-success: var(--leaf);
  --bs-success-rgb: var(--leaf-rgb);
  --bs-success-text-emphasis: #3f5230;
  --bs-success-bg-subtle: #e9efe2;
  --bs-success-border-subtle: #c3d2b3;

  --bs-warning: var(--brand-accent);
  --bs-warning-rgb: 217, 164, 65;
  --bs-warning-text-emphasis: #7a5b1e;
  --bs-warning-bg-subtle: #f7ecd4;
  --bs-warning-border-subtle: #ecd7a4;
}

* { box-sizing: border-box; }

body {
  background: var(--nude);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
}

.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--brand-dark), var(--brand));
  color: #fff;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: transform .2s ease;
}

.sidebar-brand {
  padding: 20px 18px;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.sidebar-nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.sidebar-nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .93rem;
}

.sidebar-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-nav a.active { background: #fff; color: var(--brand-dark); font-weight: 600; }

.sidebar-section {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  padding: 14px 14px 4px;
}

.main-col { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: #fff;
  border-bottom: 1px solid #e5e8eb;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.content { padding: 24px; flex: 1; }

.app-footer { padding: 14px 24px; text-align: center; }

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border: 1px solid #eef0f2;
  border-top: 3px solid var(--brand-accent);
  height: 100%;
}

/* Nut hanh dong chinh (Them/Luu) dung mau thuong hieu cam dat, diu mat hon mau xanh la mac dinh */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #9c5127;
  --bs-btn-hover-border-color: #9c5127;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #9c5127;
  --bs-btn-active-border-color: #9c5127;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-success {
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
}

.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}

.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; }

.card { border: 1px solid #eef0f2; border-radius: 12px; }
.card-header { background: #fff; border-bottom: 1px solid #eef0f2; font-weight: 600; }

/* Banner ten khu vuc to, dam, giua trang - dung phan cach danh sach theo tung khu (Doanh thu dai han...) */
.deal-zone-banner {
  background: var(--brand-dark);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 22px 0 12px;
}

table.table thead { background: #f8f9fa; }
.table > :not(caption) > * > * { vertical-align: middle; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-col { margin-left: 0; }
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.calendar-table th, .calendar-table td { padding: 4px; }
.cal-cell { width: 22px; height: 28px; padding: 0 !important; cursor: default; }
.cal-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
}

.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}