/* docassemble theme for infra legem
   Overrides Bootstrap 5 defaults to match infralegem.ch design system
   Loaded via: bootstrap theme + global css in config.yml
   ================================================================== */

/* ============================================
   Fonts
   ============================================ */
@font-face {
  font-family: 'Domine';
  src: url('../fonts/Domine-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

/* ============================================
   CSS Custom Properties (matching style.css)
   ============================================ */
:root {
  --il-navy: #1B2A4A;
  --il-bg: #FAFAF8;
  --il-white: #FFFFFF;
  --il-border: #E5E7EB;
  --il-gray: #A6A6A6;
  --il-light-gray: #C3C3C3;
  --il-text-light: #4A5568;
  --il-accent: #E8D832;

  /* STABILO highlighter */
  --il-rot: #e84057;
  --il-gruen: #77E68A;
  --il-blau: #3CBEFC;
  --il-lila: #5E27C0;

  /* Bootstrap overrides — keep semantic colors near defaults for compatibility */
  --bs-primary: #1B2A4A;
  --bs-primary-rgb: 27, 42, 74;
  --bs-secondary: #4A5568;
  --bs-secondary-rgb: 74, 85, 104;
  --bs-body-bg: #FAFAF8;
  --bs-body-color: #1B2A4A;
  --bs-body-font-family: Arial, Helvetica, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-link-color: #1B2A4A;
  --bs-link-hover-color: #5E27C0;
  --bs-border-color: #E5E7EB;
}

/* ============================================
   Typography
   ============================================ */
body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--il-navy);
  background: var(--il-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--il-navy);
  font-weight: 700;
}

/* ============================================
   Navbar
   ============================================ */
.navbar,
.da-nav,
.bg-body-tertiary {
  background: var(--il-bg) !important;
  border-bottom: 1px solid var(--il-border);
  box-shadow: none;
}

.navbar-brand,
.navbar .navbar-brand {
  font-family: 'Domine', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--il-navy) !important;
  font-size: 1.15rem;
}

.navbar-nav .nav-link {
  color: var(--il-navy) !important;
  font-size: 0.9rem;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: var(--il-lila) !important;
}

.navbar-toggler {
  border-color: var(--il-border);
}

/* ============================================
   Buttons
   ============================================ */

/* Primary — outline by default (config: button style: outline) */
.btn-primary,
.btn-outline-primary {
  --bs-btn-color: var(--il-navy);
  --bs-btn-border-color: var(--il-navy);
  --bs-btn-hover-bg: var(--il-navy);
  --bs-btn-hover-border-color: var(--il-navy);
  --bs-btn-hover-color: var(--il-white);
  --bs-btn-active-bg: var(--il-navy);
  --bs-btn-active-border-color: var(--il-navy);
  --bs-btn-active-color: var(--il-white);
  border-radius: 4px;
  font-weight: 500;
}

/* Filled variant for submit/summary actions */
.btn-primary {
  --bs-btn-bg: var(--il-navy);
  --bs-btn-color: var(--il-white);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--il-text-light);
  --bs-btn-border-color: var(--il-border);
  --bs-btn-hover-bg: var(--il-text-light);
  --bs-btn-hover-border-color: var(--il-text-light);
  --bs-btn-hover-color: var(--il-white);
  border-radius: 4px;
}

.btn-danger,
.btn-outline-danger {
  --bs-btn-color: var(--il-rot);
  --bs-btn-border-color: var(--il-rot);
  --bs-btn-hover-bg: var(--il-rot);
  --bs-btn-hover-border-color: var(--il-rot);
  --bs-btn-hover-color: var(--il-white);
  border-radius: 4px;
}

.btn-info,
.btn-outline-info {
  --bs-btn-color: var(--il-blau);
  --bs-btn-border-color: var(--il-blau);
  --bs-btn-hover-bg: var(--il-blau);
  --bs-btn-hover-border-color: var(--il-blau);
  --bs-btn-hover-color: var(--il-white);
  border-radius: 4px;
}

.btn-success,
.btn-outline-success {
  --bs-btn-color: #1a7a2e;
  --bs-btn-border-color: var(--il-gruen);
  --bs-btn-hover-bg: var(--il-gruen);
  --bs-btn-hover-border-color: var(--il-gruen);
  --bs-btn-hover-color: var(--il-navy);
  border-radius: 4px;
}

/* ============================================
   Cards
   ============================================ */
.card {
  border: 1px solid var(--il-border);
  border-radius: 6px;
  box-shadow: none;
  background: var(--il-white);
}

.card-header {
  background: var(--il-bg);
  border-bottom: 1px solid var(--il-border);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  color: var(--il-navy);
}

/* ============================================
   Forms
   ============================================ */
.form-control,
.form-select {
  border: 1px solid var(--il-border);
  border-radius: 4px;
  color: var(--il-navy);
  background: var(--il-white);
  font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--il-lila);
  box-shadow: 0 0 0 0.2rem rgba(94, 39, 192, 0.15);
}

.form-label,
label {
  color: var(--il-navy);
  font-weight: 500;
  font-size: 0.95rem;
}

/* ============================================
   Section Navigation Sidebar
   ============================================ */
.da-section-active,
.da-section-active a {
  color: var(--il-navy) !important;
  font-weight: 600;
}

.da-section-inactive,
.da-section-inactive a {
  color: var(--il-gray) !important;
}

/* Progress bar */
.progress {
  background-color: var(--il-border);
  border-radius: 4px;
  height: 6px;
}

.progress-bar {
  background-color: var(--il-navy);
}

/* ============================================
   STABILO accents (targeted, not global)
   ============================================ */

/* Playground source indicator */
.dasource,
.da-interview-source {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  color: var(--il-gray);
}

/* ============================================
   Tables
   ============================================ */
.table {
  color: var(--il-navy);
  border-color: var(--il-border);
}

.table thead th {
  background: var(--il-bg);
  border-bottom: 2px solid var(--il-border);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--il-navy);
}

.table-bordered > :not(caption) > * > * {
  border-color: var(--il-border);
}

/* ============================================
   Alerts
   ============================================ */
.alert-primary {
  background-color: rgba(27, 42, 74, 0.08);
  border-color: rgba(27, 42, 74, 0.15);
  color: var(--il-navy);
}

.alert-danger {
  background-color: rgba(232, 64, 87, 0.08);
  border-color: rgba(232, 64, 87, 0.15);
  color: var(--il-rot);
}

.alert-success {
  background-color: rgba(119, 230, 138, 0.1);
  border-color: rgba(119, 230, 138, 0.2);
  color: #1a7a2e;
}

.alert-info {
  background-color: rgba(60, 190, 252, 0.08);
  border-color: rgba(60, 190, 252, 0.15);
  color: #0a6fa0;
}

/* ============================================
   Footer
   ============================================ */
.da-footer,
#dafooter {
  background: var(--il-white) !important;
  border-top: 1px solid var(--il-border);
  color: var(--il-gray);
  font-size: 0.8rem;
}

.da-footer a {
  color: var(--il-gray);
  text-decoration: none;
}

.da-footer a:hover {
  color: var(--il-navy);
}

/* ============================================
   Links
   ============================================ */
a {
  color: var(--il-navy);
  text-decoration: underline;
  text-decoration-color: rgba(94, 39, 192, 0.3);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--il-lila);
  text-decoration-color: var(--il-lila);
}

/* ============================================
   Review screens
   ============================================ */
.da-review-action {
  color: var(--il-lila);
  font-weight: 500;
}

.da-review-action:hover {
  color: var(--il-navy);
}

/* ============================================
   Signature pad
   ============================================ */
.da-signature-canvas {
  border: 1px solid var(--il-border);
  border-radius: 4px;
  background: var(--il-white);
}

/* ============================================
   Dropdown menus
   ============================================ */
.dropdown-menu {
  border: 1px solid var(--il-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dropdown-item {
  color: var(--il-navy);
  font-size: 0.9rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--il-bg);
  color: var(--il-navy);
}

/* ============================================
   Modal dialogs
   ============================================ */
.modal-header {
  background: var(--il-bg);
  border-bottom: 1px solid var(--il-border);
}

.modal-title {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--il-navy);
}

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

/* ============================================
   Misc overrides
   ============================================ */

/* Breadcrumbs */
.breadcrumb-item a {
  color: var(--il-lila);
}

/* Badge */
.badge.bg-primary {
  background-color: var(--il-navy) !important;
}

/* Pagination */
.page-link {
  color: var(--il-navy);
  border-color: var(--il-border);
}

.page-item.active .page-link {
  background-color: var(--il-navy);
  border-color: var(--il-navy);
}

/* Help button */
.da-help-button {
  color: var(--il-blau) !important;
}

/* Back button */
.da-back-button {
  color: var(--il-text-light) !important;
  font-size: 0.85rem;
}