/* ui/theme/custom.css
   Overrides layer on top of prebuilt Bootstrap CSS — brand colors via
   Bootstrap 5.3's CSS custom properties + built-in dark mode, no SCSS
   recompile needed (revisit SCSS only if theming needs grow beyond this). */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

[data-bs-theme='dark'] {
  --bs-body-bg: #0f1117;
  --bs-body-color: #e8eaf0;
  --bs-border-color: #2a3045;
  --bs-secondary-bg: #181c27;
  --bs-tertiary-bg: #1e2333;
  --bs-primary: #00c896;
  --bs-primary-rgb: 0, 200, 150;
  --bs-info: #0091ff;
  --bs-danger: #ff4d6d;
  --bs-warning: #ffbe0b;
  --bs-body-font-family: 'DM Sans', sans-serif;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: 12px;
}

body {
  font-family: var(--bs-body-font-family);
}

/* Brand wordmark — the demo/production both used Syne for this element. */
.pac-brand {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}

/* Sidebar shell (see ui/components/sidebar.ts) */
.pac-sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--bs-secondary-bg);
  border-right: 1px solid var(--bs-border-color);
}

.pac-sidebar .nav-link {
  color: var(--bs-body-color);
  border-radius: var(--bs-border-radius);
}

.pac-sidebar .nav-link.active {
  background: var(--bs-tertiary-bg);
  color: var(--bs-primary);
  font-weight: 500;
}

/* Auth card (see ui/components/auth-card.ts) */
.pac-auth-card {
  width: 420px;
  max-width: 100%;
}

/* App shell (sidebar + main, see home.page.ts / admin-index.page.ts) —
   stack vertically instead of side-by-side once the sidebar's fixed width
   would otherwise starve the content column on narrow screens. */
@media (max-width: 768px) {
  .pac-shell {
    flex-direction: column;
  }

  .pac-sidebar {
    width: 100%;
    min-height: auto;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
  }
}

/* Print reports (browser print-to-PDF) — hidden on screen, shown only when
   printing; see ui/components/print-report.ts for the header this wraps. */
.print-only {
  display: none;
}

@media print {
  .pac-sidebar,
  .modal,
  .btn,
  .toast-container,
  .accordion-button::after {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  body {
    background: #fff;
    color: #000;
  }

  .table-responsive {
    overflow: visible;
  }

  table,
  th,
  td {
    color: #000 !important;
  }
}