/* Philipse IT – VoIP beheer */
:root {
  --bs-primary: #0d80c6;
  --bs-primary-rgb: 13, 128, 198;
  --bs-success: #5dbb46;
  --bs-success-rgb: 93, 187, 70;
}

html {
  scroll-behavior: smooth;
}

html,
.app-body {
  margin: 0;
  padding: 0;
}

.app-body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: linear-gradient(180deg, #f4f8fb 0%, #f8f9fa 32%, #f8f9fa 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app-body > main.container {
  padding-top: 1.75rem;
  padding-bottom: 3rem;
}

/* Top bar: white, 1px primary */
.app-navbar {
  border-bottom: 1px solid var(--bs-primary);
  box-shadow: 0 1px 0 rgba(13, 128, 198, 0.06);
}

.app-navbar .navbar-brand {
  transition: opacity 0.2s ease;
}

.app-navbar .navbar-brand:hover {
  opacity: 0.88;
}

.app-navbar .nav-link {
  font-weight: 500;
  color: #2c3e50 !important;
  border-radius: 0.375rem;
  padding: 0.5rem 0.85rem !important;
  margin-left: 0.15rem;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.app-navbar .nav-link:hover {
  color: var(--bs-primary) !important;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.app-navbar .nav-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.app-navbar-logo {
  height: auto;
  max-height: 2.5rem;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  vertical-align: middle;
}

/* Buttons */
.btn {
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.35);
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-primary-rgb), 0.35);
}

.btn-success:hover:not(:disabled) {
  box-shadow: 0 0.25rem 0.75rem rgba(var(--bs-success-rgb), 0.35);
}

/* Cards */
.card {
  transition: box-shadow 0.22s ease, border-color 0.2s ease, transform 0.2s ease;
  border: 1px solid rgba(13, 128, 198, 0.12);
}

.card.shadow-sm:hover,
.card:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(13, 80, 120, 0.1) !important;
  border-color: rgba(13, 128, 198, 0.22);
}

/* Forms: clearer focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

/* Tables */
.table-hover tbody tr {
  transition: background-color 0.12s ease;
}

/* Links in content (not nav buttons) */
main a:not(.btn):not(.nav-link) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.12s ease;
}

.text-bg-primary,
.card-header.text-bg-primary,
.btn-primary {
  color: #fff;
}

.card.border-primary {
  border-color: var(--bs-primary) !important;
}

.card-header.text-bg-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Flash alerts: slight entrance motion is handled by Bootstrap fade; add polish */
.alert {
  border-radius: 0.5rem;
  border: none;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

/* Lead text on home */
main .lead {
  line-height: 1.6;
  color: #495057;
}