html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Site-wide "no black" rule: Bootstrap's --bs-dark / body / emphasis / secondary
   text variables all default to near-black greys. Overriding the variables (rather
   than one-off classes) means every Bootstrap control that keys off them — .text-dark,
   .border-dark, .btn-dark/.btn-outline-dark, default body/heading text, .text-muted —
   renders in the brand's blue family instead, site-wide, with no per-view changes. */
:root {
  --bs-dark: #1b2559;
  --bs-dark-rgb: 27, 37, 89;
  --bs-body-color: #1b2559;
  --bs-body-color-rgb: 27, 37, 89;
  --bs-emphasis-color: #10173b;
  --bs-emphasis-color-rgb: 16, 23, 59;
  --bs-secondary-color: #5b6b9e;
  --bs-secondary-color-rgb: 91, 107, 158;
  --bs-heading-color: #10173b;
}

/* Card headers use the same brand blue as the top nav pills, everywhere
   .bg-dark is used for a card-header (that's its only use in this project). */
.bg-dark {
  background-color: #4640de !important;
}

/* Table/list headers (.table-dark, used for every table's <thead> site-wide)
   otherwise render Bootstrap's literal black — its compiled CSS bakes in a
   hardcoded #212529 rather than reading --bs-dark, so it needs its own
   override to match the brand blue everywhere else. */
.table-dark {
  --bs-table-bg: #4640de;
  --bs-table-color: #fff;
  --bs-table-border-color: #3733b0;
}

/* Buttons only — green success buttons become brand blue. Badges/text using
   .bg-success/.text-success (Active status, paid-balance indicators) intentionally
   keep their green semantics; only literal buttons were asked to change. */
.btn-success,
.btn-check:checked + .btn-outline-success,
.btn-outline-success:hover {
  background-color: #4640de !important;
  border-color: #4640de !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #3733b0 !important;
  border-color: #3733b0 !important;
  color: #fff !important;
}

.btn-outline-success {
  color: #4640de !important;
  border-color: #4640de !important;
}

/* Box-style top navigation */
@media (min-width: 992px) {
  .navbar-center-grid {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
  }

  .navbar-center-grid > .navbar-nav-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  /* A flex-wrap container sizes as a flex item unpredictably (some
     engines treat it as fill-available rather than content-based), so
     force content sizing explicitly and center it with auto margins. */
  .navbar-nav-center > .nav-pill-list {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    justify-content: center;
  }

  .navbar-center-grid > .navbar-user-area {
    flex: 0 0 auto;
  }
}

.nav-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  background-color: #4640de;
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.nav-pill:hover,
.nav-pill:focus,
.nav-pill.show {
  background-color: #3733b0;
  color: #fff !important;
}

.nav-pill:active {
  transform: translateY(1px);
}

.nav-pill.dropdown-toggle::after {
  margin-left: 0.55rem;
  vertical-align: 0.2em;
}

.navbar-user-chip {
  display: inline-flex;
  align-items: center;
  background-color: #4640de;
  border-radius: 999px;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  color: #fff;
  font-size: 0.85rem;
  white-space: nowrap;
}

.status-filter-badge {
  color: #4640de;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}

.status-filter-badge:hover {
  color: #3733b0;
}

.status-filter-badge.active {
  text-decoration: underline !important;
}

/* Lead comment thread — sent/received bubble colors kept for visual parity with
   the mobile app's chat screen, on a plain white background. */
.chat-thread {
  background-color: #ffffff;
  max-height: 480px;
  overflow-y: auto;
  padding: 1rem;
  border-radius: 0 0 0.375rem 0.375rem;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background-color: #4640de;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.chat-bubble {
  max-width: 70%;
  padding: 0.45rem 0.7rem 0.3rem;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.chat-bubble-admin {
  background-color: #ffffff;
  border-top-left-radius: 2px;
}

.chat-bubble-employee {
  background-color: #dcf8c6;
  border-top-right-radius: 2px;
}

.chat-bubble-author {
  font-size: 0.75rem;
  font-weight: 700;
  color: #4640de;
  margin-bottom: 2px;
}

.chat-bubble-role {
  font-weight: 500;
  color: #6c757d;
}

.chat-bubble-text {
  font-size: 0.9rem;
  color: #1b2559;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-bubble-time {
  font-size: 0.68rem;
  color: rgba(27, 37, 89, 0.5);
  text-align: right;
  margin-top: 2px;
}

/* WhatsApp-style centered call-log pill, inline in the same comment thread. */
.call-bubble {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-color: rgba(255, 255, 255, 0.85);
  color: #5b6b9e;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.call-bubble-connected {
  color: #17a058;
}

.call-bubble-missed {
  color: #c62828;
}

.call-bubble-time {
  font-weight: 500;
  color: rgba(27, 37, 89, 0.5);
  margin-left: 0.15rem;
}

.navbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 700;
  margin-left: 0.75rem;
}

/* Dropdown submenus: no divider lines between items, and a soft white-to-blue
   gradient sweep on hover/focus instead of Bootstrap's flat grey highlight. */
.dropdown-menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 0.5rem 1.5rem rgba(27, 37, 89, 0.18);
  padding: 0.4rem;
}

.dropdown-item {
  color: #1b2559;
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(90deg, #ffffff 0%, #c7cdff 100%);
  color: #3733b0;
  font-weight: 700;
}

.dropdown-item:active {
  background: linear-gradient(90deg, #c7cdff 0%, #4640de 100%);
  color: #fff;
}

/* Success toast — green gradient, used after every successful form submission
   site-wide (see the TempData["Success"]/["Error"] toast script in _Layout). */
.app-toast-success {
  background: linear-gradient(135deg, #2fbf71 0%, #17a058 100%) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px;
}

.app-toast-error {
  background: linear-gradient(135deg, #ef5350 0%, #c62828 100%) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px;
}

.app-toast-success .swal2-title,
.app-toast-error .swal2-title {
  color: #fff !important;
}