/* Le Mont CRM theme layered on top of Bootstrap 5.
   Palette/tokens extracted from the approved design mockup: teal-green
   brand color, soft pastel status pills, bordered (not shadowed) cards. */

:root {
  --lm-primary: #2d6a5f;
  --lm-primary-dark: #234f47;
  --lm-primary-tint: #e7f0ee;

  --lm-bg: #f4f7f6;
  --lm-surface: #ffffff;
  --lm-border: #e7ece9;
  --lm-input-border: #d7ddda;
  --lm-text-primary: #16211d;
  --lm-text-secondary: #5b665f;

  --lm-success-bg: #e8f5ee;
  --lm-success-text: #1e7a48;
  --lm-danger-bg: #fbe9e7;
  --lm-danger-text: #a23327;
  --lm-warning-bg: #fdf1de;
  --lm-warning-text: #8a5a05;
  --lm-neutral-bg: #eef0ef;
  --lm-neutral-text: #5b665f;

  --lm-radius-sm: 8px;
  --lm-radius: 14px;
  --lm-radius-pill: 999px;
}

body {
  background: var(--lm-bg);
  color: var(--lm-text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  color: var(--lm-text-primary);
}

/* ---------- Top app bar ---------- */
.navbar {
  background: var(--lm-surface) !important;
  border-bottom: 1px solid var(--lm-border);
  box-shadow: none;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--lm-text-primary) !important;
}

.navbar .nav-link {
  color: var(--lm-text-secondary) !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--lm-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar .nav-link:hover {
  background: var(--lm-bg);
  color: var(--lm-primary) !important;
}

.navbar .nav-link.active {
  color: var(--lm-primary) !important;
  background: var(--lm-primary-tint);
}

.navbar .btn-outline-light {
  color: var(--lm-text-secondary);
  border-color: var(--lm-input-border);
}

.navbar .btn-outline-light:hover {
  background: var(--lm-bg);
  border-color: var(--lm-input-border);
  color: var(--lm-text-primary);
}

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: none;
}

.card-header {
  background: var(--lm-surface);
  border-bottom: 1px solid var(--lm-border);
  font-weight: 800;
  color: var(--lm-text-primary);
  border-top-left-radius: var(--lm-radius) !important;
  border-top-right-radius: var(--lm-radius) !important;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--lm-radius-sm);
  font-weight: 700;
  text-transform: none;
}

.btn-primary {
  background-color: var(--lm-primary);
  border-color: var(--lm-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--lm-primary-dark);
  border-color: var(--lm-primary-dark);
}

.btn-danger,
.btn-outline-danger:hover {
  background-color: var(--lm-danger-text);
  border-color: var(--lm-danger-text);
}

.btn-outline-danger {
  color: var(--lm-danger-text);
  border-color: var(--lm-danger-text);
}

.btn-outline-danger:hover {
  background-color: var(--lm-danger-text);
}

.btn-outline-secondary {
  color: var(--lm-text-secondary);
  border-color: var(--lm-input-border);
}

.btn-outline-secondary:hover {
  background-color: var(--lm-bg);
  color: var(--lm-text-primary);
  border-color: var(--lm-input-border);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
  border-color: var(--lm-input-border);
  border-radius: var(--lm-radius-sm);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--lm-primary);
  box-shadow: 0 0 0 0.2rem rgba(45, 106, 95, 0.15);
}

.form-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--lm-text-secondary);
}

/* ---------- Tables ---------- */
.table {
  --bs-table-hover-bg: rgba(45, 106, 95, 0.04);
}

.table thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--lm-text-secondary);
  border-bottom-width: 1px;
  border-color: var(--lm-border);
  font-weight: 700;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.table td {
  border-color: var(--lm-border);
  vertical-align: middle;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* Bootstrap's .table-sm compresses cell padding to 0.25rem so several
   tables (job tasks, leads, keys) end up with rows touching each other.
   Loosen it back up — still tighter than the default .table, just not
   cramped. */
.table-sm > :not(caption) > * > * {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Empty-state tables (a single row whose td[colspan] spans every column)
   have no data row to establish real column proportions, so the browser's
   auto table-layout distributes leftover width unevenly across headers
   (e.g. "Trạng thái" stretching 275px while "Tên" stays at 112px). Force
   equal-width columns whenever that's the only row present; tables with
   real data never match this selector and keep their natural auto sizing. */
.table:has(> tbody > tr > td[colspan]) {
  table-layout: fixed;
}

/* Align table content with the card-header title above it: Bootstrap's
   .card-header uses 1rem horizontal padding but .table cells only use
   0.5rem, so the first column always sat 8px left of the header text above
   it (and the last column 8px short of the right edge). Match them. */
.card .table > :not(caption) > * > :first-child {
  padding-left: 1rem;
}

.card .table > :not(caption) > * > :last-child {
  padding-right: 1rem;
}

/* ---------- Badges ---------- */
.badge {
  border-radius: var(--lm-radius-pill);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.4em 0.7em;
}

.badge.bg-primary { background-color: var(--lm-primary-tint) !important; color: var(--lm-primary) !important; }
.badge.bg-success { background-color: var(--lm-success-bg) !important; color: var(--lm-success-text) !important; }
.badge.bg-danger  { background-color: var(--lm-danger-bg) !important; color: var(--lm-danger-text) !important; }
.badge.bg-warning { background-color: var(--lm-warning-bg) !important; color: var(--lm-warning-text) !important; }
.badge.bg-secondary { background-color: var(--lm-neutral-bg) !important; color: var(--lm-neutral-text) !important; }
.badge.bg-dark { background-color: var(--lm-neutral-bg) !important; color: var(--lm-text-primary) !important; }

/* ---------- Alerts ---------- */
.alert {
  border: none;
  border-radius: var(--lm-radius-sm);
}

.alert-success { background: var(--lm-success-bg); color: var(--lm-success-text); }
.alert-danger  { background: var(--lm-danger-bg); color: var(--lm-danger-text); }
.alert-warning { background: var(--lm-warning-bg); color: var(--lm-warning-text); }

/* ---------- Progress bars ---------- */
.progress {
  border-radius: 999px;
  background-color: var(--lm-neutral-bg);
  height: 6px;
}

.progress-bar {
  background-color: var(--lm-primary);
}

/* ---------- Pagination ---------- */
.pagination {
  gap: 4px;
}

.page-link {
  color: var(--lm-primary);
  border-color: var(--lm-input-border);
  border-radius: var(--lm-radius-sm);
  min-width: 34px;
  text-align: center;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Bootstrap squares off the inner corners of the first and last item so a
   default pagination reads as one joined bar. The gap above separates them
   into individual chips, so restore an even radius on all four corners. */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: var(--lm-radius-sm);
}

.page-link:hover {
  background-color: var(--lm-primary-tint);
  border-color: var(--lm-primary-tint);
  color: var(--lm-primary-dark);
}

.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(45, 106, 95, 0.15);
}

.page-item.active .page-link {
  background-color: var(--lm-primary);
  border-color: var(--lm-primary);
  color: #fff;
}

/* The ellipsis gap and the arrows at either end of the range: present for
   structure, but never look clickable. */
.page-item.disabled .page-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--lm-text-secondary);
  opacity: 0.5;
}

/* ---------- Modals ---------- */
.modal-content {
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: 0 8px 24px rgba(22, 33, 29, 0.12);
}

.modal-header {
  border-bottom: 1px solid var(--lm-border);
}

.modal-footer {
  border-top: 1px solid var(--lm-border);
}