:root {
  --kicm-navy: #1b2a4a;
  --kicm-gold: #e8b923;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
}

.navbar-brand img {
  height: 36px;
  width: 36px;
}

.nav-lock-indicator {
  font-size: 1.1rem;
  margin-left: 0.25rem;
}

.nav-lock-indicator.nav-lock-indicator-locked {
  color: var(--kicm-gold);
}

.nav-lock-indicator.nav-lock-indicator-unlocked {
  color: rgba(255, 255, 255, 0.6);
}

.messages-badge-mobile {
  vertical-align: top;
}

/* Below the lg breakpoint, the "Messages" nav-link badge lives inside the
   collapsed hamburger menu, so show the unread bubble next to the lock
   indicator instead. At lg and up the nav-link is always visible, so show
   the badge there and hide the one next to the lock indicator. */
@media (max-width: 991.98px) {
  #messagesUnreadBadge {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .messages-badge-mobile {
    display: none !important;
  }
}

.navbar-kicm {
  background-color: var(--kicm-navy);
}

.navbar-kicm .nav-link {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-kicm .nav-link:hover,
.navbar-kicm .nav-link.active {
  color: var(--kicm-gold);
}

.footer-kicm {
  background-color: var(--kicm-navy);
  color: rgba(255, 255, 255, 0.75);
}

.footer-kicm a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.footer-kicm a:hover {
  color: var(--kicm-gold);
}

.hero {
  padding: 4rem 1rem;
  text-align: center;
}

.hero img {
  width: 96px;
  height: 96px;
  margin-bottom: 1.5rem;
}

.hero .motto {
  color: var(--kicm-gold);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 1rem;
}

.auth-card {
  max-width: 420px;
  width: 100%;
}

.auth-logo {
  width: 64px;
  height: 64px;
}

.btn-kicm {
  background-color: var(--kicm-navy);
  border-color: var(--kicm-navy);
  color: #fff;
}

.btn-kicm:hover,
.btn-kicm:focus {
  background-color: #142140;
  border-color: #142140;
  color: var(--kicm-gold);
}

.dashboard-card i {
  color: var(--kicm-navy);
}

.chart-wrap {
  position: relative;
  max-width: 320px;
  height: 260px;
}

.profile-card {
  max-width: 560px;
}

.content-card {
  max-width: 760px;
  width: 100%;
}

.device-card i {
  color: var(--kicm-navy);
}

.partner-card i {
  color: var(--kicm-navy);
}

.connect-avatar-icon {
  color: var(--kicm-navy);
}

.lock-status-banner {
  border: none;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}

.lock-status-banner-locked {
  background-color: var(--kicm-gold);
  color: var(--kicm-navy);
}

.lock-status-banner-unlocked {
  background-color: #e9ecef;
  color: var(--kicm-navy);
}

.timeline-entry {
  margin-bottom: 1rem;
}

.message-entry-received {
  display: flex;
  justify-content: flex-start;
}

.message-entry-sent {
  display: flex;
  justify-content: flex-end;
}

.message-bubble {
  max-width: 75%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}

.message-bubble-received {
  background-color: #e9ecef;
  color: var(--kicm-navy);
}

.message-bubble-sent {
  background-color: var(--kicm-navy);
  color: #fff;
}

.message-bubble-sent .message-receipt {
  color: rgba(255, 255, 255, 0.75);
}

.message-image {
  max-width: 220px;
  max-height: 220px;
  /* The <img> also carries width/height HTML attributes (the image's real
     stored pixel size) so the browser can reserve layout space before it
     loads - but that also makes both dimensions "specified" rather than
     "auto", which stops the browser from preserving aspect ratio when
     max-width/max-height clamp each axis independently (same fix as
     Bootstrap's .img-fluid: force both back to auto so only the max-*
     constraints - correctly ratio-preserving - apply). */
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  display: block;
}

#composeImagePreview .message-image {
  max-width: 140px;
  max-height: 140px;
}

.notification-entry .alert {
  border-left: 4px solid #0dcaf0;
}

.history-release-row {
  background-color: rgba(164, 36, 59, 0.08);
}

.history-release-row td:first-child {
  color: #a4243b;
  font-weight: 600;
  box-shadow: inset 4px 0 0 0 #a4243b;
}

/* Bootstrap's typography/spacing utilities are all rem-based, so scaling
   down the root font-size on small screens shrinks headings, buttons,
   badges, table text, etc. proportionally instead of just the body copy. */
@media (max-width: 576px) {
  html {
    font-size: 15px;
  }

  .display-4 {
    font-size: 2.5rem;
  }

  .hero .motto {
    font-size: 1.25rem;
  }

  #historyTableBody {
    font-size: 0.8rem;
  }
}