body { background-color: #f7f5f2; margin: 0; }

/* ---------------------------------------------------------------- *
 * Layout: a full-width top bar (branding left, settings/user right)
 * sits above everything, including the sidebar. The sidebar holds
 * navigation only and starts below the top bar. Both share the same
 * brand color. Main content sits to the right of the sidebar and
 * below the top bar.
 * ---------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #7b3f61;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  z-index: 1040;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.topbar-toggle {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: #fff;
  padding: .25rem .6rem .25rem 0;
  flex: 0 0 auto;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.topbar-brand:hover { color: #fff; }
.topbar-brand img { height: 32px; width: 32px; object-fit: contain; flex: 0 0 auto; }
.topbar-brand i { font-size: 1.5rem; flex: 0 0 auto; }
.topbar-brand-text { overflow: hidden; text-overflow: ellipsis; }

.topbar-spacer { flex: 1 1 auto; }

.topbar-actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.topbar-link {
  color: rgba(255,255,255,.9);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  font-size: .92rem;
}
.topbar-link:hover { color: #fff; }
.topbar-actions .badge { font-weight: 500; }

.sidebar {
  width: 250px;
  background-color: #7b3f61;
  color: #fff;
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 1030;
  border-top: 1px solid rgba(255,255,255,.15);
  transition: transform .2s ease;
}

.sidebar-nav { padding: .75rem .6rem; display: flex; flex-direction: column; gap: .15rem; }

.sidebar-link, .sidebar-toggle {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border-radius: .45rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .92rem;
  white-space: nowrap;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.sidebar-link i, .sidebar-toggle i { font-size: 1rem; flex: 0 0 1.1rem; }
.sidebar-link:hover, .sidebar-toggle:hover { background-color: rgba(255,255,255,.12); color: #fff; }
.sidebar-link.active { background-color: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

.sidebar-toggle { justify-content: flex-start; cursor: pointer; }
.sidebar-toggle span { flex: 1 1 auto; }
.sidebar-chevron { transition: transform .15s ease; font-size: .75rem !important; flex: 0 0 auto !important; }
.sidebar-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }

.sidebar-group .collapse.show,
.sidebar-group .collapsing {
  display: flex;
  flex-direction: column;
  padding-left: 1.9rem;
  gap: .1rem;
}
.sidebar-sublink {
  padding: .4rem .5rem;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .87rem;
  border-radius: .4rem;
  white-space: nowrap;
}
.sidebar-sublink:hover { background-color: rgba(255,255,255,.1); color: #fff; }
.sidebar-sublink.active { color: #fff; font-weight: 600; }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0,0,0,.4);
  z-index: 1020;
}

.main-area {
  margin-left: 250px;
  margin-top: 60px;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

/* Mobile: sidebar becomes an off-canvas drawer, toggled from the top bar */
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; }
  .main-area { margin-left: 0; }
}

/* ---------------------------------------------------------------- *
 * Everything below is unchanged from before
 * ---------------------------------------------------------------- */
.card { border: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); border-radius: .6rem; }
.table thead th { background-color: #f1e9ee; }
.btn-primary { background-color: #7b3f61; border-color: #7b3f61; }
.btn-primary:hover { background-color: #632f4e; border-color: #632f4e; }
.badge-status-draft { background-color: #6c757d; }
.badge-status-sent { background-color: #0d6efd; }
.badge-status-invoiced { background-color: #198754; }
.badge-status-cancelled { background-color: #dc3545; }
.print-only { display: none; }
@media print {
  .no-print, .sidebar, .topbar { display: none !important; }
  .print-only { display: block; }
  .main-area { margin-left: 0; margin-top: 0; }
  body { background: #fff; }
}
.stock-low { color: #dc3545; font-weight: 600; }