/* Nice2Meet admin - brand theme: warm coral on neutral surfaces. */
:root,
[data-bs-theme="light"] {
  --bs-primary: #e25c45;
  --bs-primary-rgb: 226, 92, 69;
  --bs-link-color: #c94a33;
  --bs-link-color-rgb: 201, 74, 51;
  --bs-link-hover-color: #a93b27;
  --bs-link-hover-color-rgb: 169, 59, 39;
  --bs-body-bg: #faf8f6;
  --n2m-surface: #ffffff;
  --n2m-sidebar-bg: #ffffff;
  --n2m-border: #ebe5e0;
  --n2m-primary-soft: #fdeeea;
  --n2m-sidebar-w: 248px;
}

[data-bs-theme="dark"] {
  --bs-primary: #ff8a73;
  --bs-primary-rgb: 255, 138, 115;
  --bs-link-color: #ff8a73;
  --bs-link-color-rgb: 255, 138, 115;
  --bs-link-hover-color: #ffa391;
  --bs-link-hover-color-rgb: 255, 163, 145;
  --bs-body-bg: #17151a;
  --n2m-surface: #211e25;
  --n2m-sidebar-bg: #1c1a20;
  --n2m-border: #343038;
  --n2m-primary-soft: #3a2420;
}

/* Bootstrap components that bake in the primary colour */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #cf4f39;
  --bs-btn-hover-border-color: #cf4f39;
  --bs-btn-active-bg: #b94430;
  --bs-btn-active-border-color: #b94430;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: #2a1511;
  --bs-btn-hover-color: #2a1511;
  --bs-btn-active-color: #2a1511;
  --bs-btn-bg: #ff8a73;
  --bs-btn-border-color: #ff8a73;
  --bs-btn-hover-bg: #ff9f8b;
  --bs-btn-hover-border-color: #ff9f8b;
  --bs-btn-active-bg: #ffb0a0;
  --bs-btn-active-border-color: #ffb0a0;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}
.text-primary { color: var(--bs-primary) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }

/* Layout */
.app-shell { display: flex; min-height: 100vh; }
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 60px;
  background: var(--n2m-surface);
  border-bottom: 1px solid var(--n2m-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.content { flex: 1 1 auto; outline: none; }

/* Sidebar: static column on >= lg, offcanvas below (Bootstrap handles that) */
.sidebar { --bs-offcanvas-width: var(--n2m-sidebar-w); background: var(--n2m-sidebar-bg); }
@media (min-width: 992px) {
  .sidebar {
    flex: 0 0 var(--n2m-sidebar-w);
    width: var(--n2m-sidebar-w);
    border-right: 1px solid var(--n2m-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
}
.brand { color: var(--bs-body-color); }
.brand-mark { color: var(--bs-primary); font-size: 1.4rem; }
.nav-section {
  margin: 1rem 0.75rem 0.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--bs-body-color);
}
.sidebar .nav-link:hover { background: var(--n2m-primary-soft); }
.sidebar .nav-link.active {
  background: var(--n2m-primary-soft);
  color: var(--bs-primary);
  font-weight: 600;
}

/* Cards */
.card { background: var(--n2m-surface); border-color: var(--n2m-border); border-radius: 0.75rem; }
.status-card .status-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n2m-primary-soft); color: var(--bs-primary); font-size: 1.15rem;
}
.empty-state { max-width: 520px; margin: 3rem auto; text-align: center; }
.empty-state .empty-icon { font-size: 2.5rem; color: var(--bs-primary); }