:root {
  --sidebar-bg: #4d5aa0;
  --sidebar-bg-active: #434e8c;
  --accent-orange: #f2a93b;
  --text-muted: #c8cdec;
}

body {
  background-color: #f4f5fa;
}

/* Sidebar */
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background-color: var(--sidebar-bg);
  padding-top: 1rem;
}

.app-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  font-size: 0.95rem;
}

.app-sidebar a i {
  width: 18px;
  text-align: center;
}

.app-sidebar a:hover,
.app-sidebar a.active {
  background-color: var(--sidebar-bg-active);
  color: #fff;
}

/* Content area */
.app-content {
  margin-left: 220px;
  min-height: 100vh;
}

.app-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7f0;
  padding: 0.85rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-topbar .brand {
  font-weight: 700;
  color: #333;
}

.app-topbar .breadcrumb-text {
  font-size: 0.85rem;
  color: #9aa0b4;
}

.app-topbar .breadcrumb-text .current {
  color: #b8beda;
}

.card-panel {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.btn-brand {
  background-color: #3f4b87;
  border-color: #3f4b87;
  color: #fff;
}
.btn-brand:hover {
  background-color: #333d70;
  border-color: #333d70;
  color: #fff;
}

.btn-accent {
  background-color: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
}
.btn-accent:hover {
  background-color: #e0972a;
  border-color: #e0972a;
  color: #fff;
}

.section-label {
  font-weight: 600;
  color: #444;
  margin-bottom: 0;
}

.required-mark {
  color: #e0972a;
}

/* Invoice totals box: explicit width rather than a responsive Bootstrap
   column -- print rendering can compute a page width below the md
   breakpoint even on a full-size sheet, which would otherwise make the
   column silently fall back to 100% width. */
.totals-box {
  width: 100%;
  max-width: 320px;
}

/* Company details footer on the printed invoice, pinned to the bottom of
   each printed page. Left as normal in-flow content on screen. */
.print-footer {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7f0;
}

@media print {
  .app-sidebar, .app-topbar, .no-print { display: none !important; }
  .app-content { margin-left: 0 !important; }

  .print-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: #fff;
  }

  /* Reserve space at the bottom of the page so invoice content doesn't
     run underneath the fixed footer. */
  .card-panel {
    padding-bottom: 3.5rem !important;
  }
}