/* ==========================================================================
   NFP Latvia — design tokens (violet/pink theme)
   ========================================================================== */
:root {
  --nfp-primary: #7C3AED;
  --nfp-primary-700: #6D28D9;
  --nfp-primary-800: #5B21B6;
  --nfp-accent: #EC4899;
  --nfp-accent-700: #DB2777;
  --nfp-bg: #FAF8FF;
  --nfp-surface: #FFFFFF;
  --nfp-ink: #211A35;
  --nfp-muted: #6E6685;
  --nfp-track: #F1ECFB;
  --nfp-radius: 14px;
}

body {
  background: var(--nfp-bg);
  color: var(--nfp-ink);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.nfp-navbar,
.navbar.bg-primary {
  background: linear-gradient(120deg, #5B21B6, #7C3AED 55%, #DB2777) !important;
}

/* --------------------------------------------------------------------------
   Bootstrap re-theme (chrome only — success/warning/danger stay default)
   -------------------------------------------------------------------------- */
.btn-primary {
  background-color: var(--nfp-primary);
  border-color: var(--nfp-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--nfp-primary-700) !important;
  border-color: var(--nfp-primary-700) !important;
}
.btn-outline-primary {
  color: var(--nfp-primary-700);
  border-color: var(--nfp-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--nfp-primary) !important;
  border-color: var(--nfp-primary) !important;
  color: #fff !important;
}
a {
  color: var(--nfp-primary-700);
}
a:hover {
  color: var(--nfp-accent-700);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--nfp-primary);
  box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25);
}
.form-check-input:checked {
  background-color: var(--nfp-primary);
  border-color: var(--nfp-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .25);
}
.badge.text-bg-primary {
  background-color: var(--nfp-primary) !important;
}
.text-primary {
  color: var(--nfp-primary) !important;
}
.bg-primary {
  background-color: var(--nfp-primary) !important;
}
.nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--nfp-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--nfp-primary) !important;
}
.page-link {
  color: var(--nfp-primary-700);
}
.page-item.active .page-link {
  background-color: var(--nfp-primary);
  border-color: var(--nfp-primary);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  border: 0;
  border-radius: var(--nfp-radius);
  box-shadow: 0 1px 3px rgba(91, 33, 182, .10), 0 1px 2px rgba(0, 0, 0, .04);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table thead th {
  color: var(--nfp-muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .03em;
  font-weight: 600;
  border-bottom-width: 1px;
}
.table-hover > tbody > tr:hover > * {
  background-color: #F7F3FF;
}

/* --------------------------------------------------------------------------
   Phase badges (utility classes; replace text-bg-light on phase badges)
   -------------------------------------------------------------------------- */
.phase-pregnancy { background: #EDE9FE; color: #5B21B6; }
.phase-infancy { background: #FCE7F3; color: #BE185D; }
.phase-toddlerhood { background: #CCFBF1; color: #0F766E; }

/* --------------------------------------------------------------------------
   Stat tiles (dashboard KPIs)
   -------------------------------------------------------------------------- */
.stat-tile {
  background: var(--nfp-surface);
  border-radius: var(--nfp-radius);
  box-shadow: 0 1px 3px rgba(91, 33, 182, .10), 0 1px 2px rgba(0, 0, 0, .04);
  padding: .9rem 1rem .8rem;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.stat-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nfp-primary), var(--nfp-accent));
}
.stat-tile .stat-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--nfp-muted);
  font-weight: 600;
  margin-bottom: .15rem;
}
.stat-tile .stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--nfp-ink);
  line-height: 1.15;
}
.stat-tile .stat-sub {
  font-size: .74rem;
  color: var(--nfp-muted);
}

/* --------------------------------------------------------------------------
   Horizontal bars (magnitude, single violet hue — never a status color)
   -------------------------------------------------------------------------- */
.hbar-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.hbar-label {
  flex: 0 0 auto;
  width: 11rem;
  max-width: 40%;
  font-size: .82rem;
  color: var(--nfp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  flex: 1 1 auto;
  position: relative;
  background: var(--nfp-track);
  height: 12px;
  border-radius: 6px;
  overflow: visible;
}
.hbar-fill {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #7C3AED, #9333EA);
}
.hbar-target-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--nfp-muted);
  opacity: .55;
}
.hbar-value {
  flex: 0 0 auto;
  width: 3.5rem;
  text-align: right;
  font-size: .82rem;
  font-weight: 600;
  color: var(--nfp-ink);
}
.hbar-target {
  flex: 0 0 auto;
  font-size: .72rem;
  color: var(--nfp-muted);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .hbar-row {
    flex-wrap: wrap;
    row-gap: .2rem;
    margin-bottom: .85rem;
  }
  .hbar-label {
    order: 1;
    flex: 1 1 100%;
    width: auto;
    max-width: 100%;
    white-space: normal;
    font-weight: 600;
  }
  .hbar-value {
    order: 2;
    flex: 0 0 auto;
    width: auto;
  }
  .hbar-target {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .hbar-track {
    order: 4;
    flex: 1 1 100%;
    margin-top: .15rem;
  }
}

/* --------------------------------------------------------------------------
   Status chips (icon + label; color reserved for semantics only)
   -------------------------------------------------------------------------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.status-chip.ok { background: #D1FAE5; color: #065F46; }
.status-chip.warn { background: #FEF3C7; color: #92400E; }
.status-chip.danger { background: #FEE2E2; color: #991B1B; }

/* --------------------------------------------------------------------------
   Login page
   -------------------------------------------------------------------------- */
.nfp-login-bg {
  min-height: 100vh;
  background: linear-gradient(120deg, #5B21B6, #7C3AED 55%, #DB2777);
}
.nfp-login-card {
  border-radius: var(--nfp-radius);
  box-shadow: 0 20px 50px rgba(43, 12, 92, .35);
}
.nfp-login-brand {
  color: var(--nfp-primary-800);
  font-weight: 700;
}

#calendar { max-width: 1400px; margin: 0 auto; }
.nfp-cancelled { opacity: .45; text-decoration: line-through; }
.fc-event { cursor: pointer; }
.matrix-input { min-width: 55px; max-width: 70px; }
.matrix-table th { white-space: nowrap; }
.myday-card { border-left: 4px solid var(--nfp-primary); }
.myday-card .btn-lg { font-size: 1.25rem; padding: .9rem; }
.myday-card .btn-success { --bs-btn-bg: #198754; --bs-btn-border-color: #198754; }
.myday-card .btn-outline-danger:hover { background-color: #dc3545; }
@media (max-width: 576px) {
  .fc-toolbar { flex-direction: column; gap: .5rem; }
}

/* FullCalendar today highlight */
.fc .fc-day-today { background-color: #F5F0FF !important; }

/* Fase 2: visit sessions & forms engine */
#domain-total.text-success { font-weight: 600; }
#domain-total.text-danger { font-weight: 600; }
.domain-value { display: inline-block; min-width: 2.5em; text-align: right; }
.engagement-select:disabled { opacity: .5; }

/* Mobile optimization pass */

/* 1. Bottom navigation bar (mobile only) */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  background: #fff;
  border-top: 1px solid #EEE7FA;
  box-shadow: 0 -1px 6px rgba(91, 33, 182, .10);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 2px 4px;
  color: #495057;
  text-decoration: none;
  font-size: .68rem;
  line-height: 1.1;
  text-align: center;
}
.bottom-nav-icon {
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 999px;
  padding: 2px 10px;
}
.bottom-nav-item.active { color: var(--nfp-primary-700); font-weight: 600; }
.bottom-nav-item.active .bottom-nav-icon { background: #F1E9FE; }

@media (max-width: 767.98px) {
  body.has-bottom-nav { padding-bottom: 64px; }
}

/* 5. Forms & inputs: touch-friendly sizing on mobile */
@media (max-width: 767.98px) {
  .form-control, .form-select { font-size: 16px; }
  .btn:not(.py-0) { min-height: 44px; }
  .form-check {
    min-height: 1.75rem;
    padding-left: 1.9em;
    margin-bottom: .5rem;
  }
  .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-left: -1.9em;
    margin-top: .15em;
  }
  .form-check-inline {
    margin-right: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Mileage: photo previews
   -------------------------------------------------------------------------- */
.photo-preview {
  max-width: 100%;
  max-height: 220px;
  border-radius: var(--nfp-radius);
  border: 1px solid var(--nfp-track);
  object-fit: cover;
}