:root {
  --app-ink: #1F3864;
  --app-ink-dark: #16294d;
  --app-teal: #1a8f8a;
}

body {
  background-color: #f4f6fb;
  -webkit-text-size-adjust: 100%;
}

.navbar-brand {
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #fff;
}

.card-header-navy {
  background-color: #1F3864;
  color: #fff;
  font-weight: 600;
}

.table-lightblue thead th {
  background-color: #D9E2F3;
}

.section-title {
  color: #1F3864;
  font-weight: 700;
}

.btn-navy {
  background-color: #1F3864;
  color: #fff;
  border-color: #1F3864;
}

.btn-navy:hover,
.btn-navy:focus {
  background-color: #16294d;
  color: #fff;
  border-color: #16294d;
}

/* App chrome: mobile-friendly toolbars & tables */
.app-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.app-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.navbar .nav-link {
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  .navbar .container-fluid {
    flex-wrap: wrap;
  }

  .navbar-collapse {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .navbar-nav {
    gap: 0 !important;
  }

  .navbar-nav .nav-link {
    padding: 0.65rem 0;
  }

  .navbar-actions {
    width: 100%;
    margin-top: 0.5rem;
    padding-bottom: 0.35rem;
  }

  .navbar-actions form {
    width: 100%;
  }

  .navbar-actions .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .container.py-4 {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .section-title {
    font-size: 1.2rem;
    line-height: 1.3;
  }

  .card-body .btn-group {
    flex-wrap: wrap;
  }

  .list-group-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .list-group-item .btn-group {
    margin-left: auto;
  }

  .table {
    font-size: 0.85rem;
  }

  .form-control,
  .form-select,
  .btn {
    min-height: 2.5rem;
  }

  .preview-frame {
    --bs-aspect-ratio: 160% !important;
    min-height: 55vh !important;
  }
}