/*
 * MidCove app-layer overrides, loaded after the real Metronic theme
 * (public/assets/metronic/). Metronic's Bootstrap 5 CSS already covers
 * grid/buttons/forms/cards/badges/tables/dropdowns/sidebar/navbar — this
 * file only styles the handful of MidCove-specific components that aren't
 * part of the stock template (dashboard welcome banner, stat tiles, login
 * attempts timeline).
 */

/* Sidebar nav-badge counters (e.g. Enquiries unread count) — match the
   logo's teal accent instead of the navy brand-primary, which reads too
   dark against the dark sidebar background. */
/* Unread-notification indicator dot: teal, with a soft pulsing ring to
   draw the eye without being a jarring red "alert" color. */
.bullet-unread {
  background-color: #1fc8b3;
  box-shadow: 0 0 0 rgba(31, 200, 179, 0.6);
  animation: mcUnreadPulse 1.8s infinite;
}
@keyframes mcUnreadPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31, 200, 179, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(31, 200, 179, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 200, 179, 0); }
}

.badge-brand-accent {
  background-color: #1fc8b3;
  color: #0e2a47;
}

.welcome-card {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0.775rem;
  background: linear-gradient(120deg, #0e2a47, #16416d 60%, #0e2a47);
  color: #fff;
  box-shadow: 0 8px 24px rgba(14, 42, 71, 0.25);
}
.welcome-card .card-body { padding: 2.25rem 2.5rem; }
.welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(31, 200, 179, 0.28), transparent 45%),
    radial-gradient(circle at 92% 88%, rgba(31, 200, 179, 0.18), transparent 45%);
  pointer-events: none;
}
.welcome-card__eyebrow {
  position: relative;
  color: #6fe6d6;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.welcome-card h2 { position: relative; margin: 0 0 0.4rem; font-size: 1.6rem; font-weight: 800; color: #fff; }
.welcome-card p { position: relative; margin: 0; color: #c3d3e3; font-size: 0.95rem; max-width: 48ch; }

.card-description {
  font-size: 0.85rem;
  color: var(--bs-gray-600);
  margin-bottom: 0.5rem;
}

.stat-tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14, 42, 71, 0.1), rgba(31, 200, 179, 0.14));
  color: #0e2a47;
  flex-shrink: 0;
}

/* Login attempts timeline */
.login-timeline { list-style: none; margin: 0; padding: 0; }
.login-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 140px 24px 1fr auto;
  gap: 0 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--bs-border-color);
}
.login-timeline-item:last-child { border-bottom: none; }
.login-timeline-user { display: flex; flex-direction: column; gap: 0.3rem; }
.login-timeline-name { font-weight: 700; font-size: 0.85rem; color: var(--bs-gray-900); line-height: 1.25; }
.login-timeline-rolebadge { align-self: flex-start; text-transform: none; }

.login-timeline-marker {
  display: flex;
  justify-content: center;
  position: relative;
}
.login-timeline-marker::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: -1rem;
  left: 50%;
  width: 2px;
  background: var(--bs-border-color);
  transform: translateX(-50%);
}
.login-timeline-item:last-child .login-timeline-marker::before { display: none; }
.login-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--bs-body-bg);
}

.login-timeline-content { min-width: 0; }
.login-timeline-title { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.25rem; }
.login-timeline-detail { font-size: 0.8rem; color: var(--bs-gray-600); margin: 0; line-height: 1.6; }
.login-timeline-time { font-size: 0.78rem; color: var(--bs-gray-600); text-align: right; white-space: nowrap; }

/* Icon-bearing variant of the timeline dot (activity log), instead of a
   plain color dot (login attempts) */
.login-timeline-dot--icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  box-shadow: 0 0 0 3px var(--bs-body-bg);
  overflow: hidden;
}
.login-timeline-dot--icon i { line-height: 1; }

@media (max-width: 768px) {
  .login-timeline-item { grid-template-columns: 20px 1fr; }
  .login-timeline-user { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .login-timeline-time { grid-column: 1 / -1; text-align: left; }
}

/* Password show/hide toggle, injected by auth-common.js into .auth-form password fields */
.field__input-wrap { position: relative; }
.field__input-wrap .form-control { padding-right: 2.75rem; }
.field__toggle-password {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 0.475rem;
  background: none;
  color: var(--bs-gray-500);
  cursor: pointer;
  padding: 0;
}
.field__toggle-password:hover { color: var(--bs-gray-700); background: var(--bs-gray-100); }

.field--error .form-control { border-color: var(--bs-danger) !important; background-color: var(--bs-danger-bg-subtle); }
.field__error { display: block; color: var(--bs-danger); font-size: 0.8rem; font-weight: 600; margin-top: 0.35rem; }

.btn.is-loading { cursor: progress; opacity: 0.92; }
.btn-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  display: inline-block;
  animation: mcSpin 0.7s linear infinite;
}
@keyframes mcSpin { to { transform: rotate(360deg); } }

.auth-form-light.shake { animation: mcShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes mcShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}