/*
 * Doctora UI/UX enhancement layer.
 * Loaded after each page's inline styles so it can refine shared behavior:
 * motion, hover/focus states, tables, badges, modals, scrollbars, toasts.
 */

::selection {
  background: rgba(14, 116, 144, 0.18);
}

html {
  scroll-behavior: smooth;
}

/* ---------- Page entry animation ---------- */

@keyframes enh-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.content-area,
.page-shell > .container {
  animation: enh-fade-up 0.4s ease both;
}

/* ---------- Buttons ---------- */

.btn-brand,
.btn-soft,
.btn-export,
.btn-delete,
.add-patient-btn,
.signup-btn,
.signin-btn,
.verify-btn,
.mobile-modal-btn {
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease,
    background-color 0.16s ease, color 0.16s ease;
}

.btn-brand:hover,
.add-patient-btn:hover,
.verify-btn:hover,
.mobile-modal-btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(14, 116, 144, 0.26);
  filter: brightness(1.05);
}

.btn-brand:active,
.add-patient-btn:active,
.signup-btn:active,
.signin-btn:active,
.verify-btn:active,
.mobile-modal-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(14, 116, 144, 0.2);
}

.btn-soft:hover,
.btn-export:hover {
  background: rgba(14, 116, 144, 0.14);
  color: var(--brand-primary, #0e7490);
  transform: translateY(-1px);
}

.btn-delete:hover {
  background: rgba(220, 38, 38, 0.16);
  color: #991b1b;
}

/* ---------- Focus visibility (keyboard accessibility) ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid rgba(14, 116, 144, 0.35);
  outline-offset: 2px;
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
  border-color: rgba(14, 116, 144, 0.32);
}

/* ---------- Tables ---------- */

.table {
  --bs-table-bg: transparent;
}

.table tbody tr {
  transition: background-color 0.15s ease;
}

.table tbody tr:hover {
  background-color: rgba(14, 116, 144, 0.05);
}

/* ---------- Links ---------- */

.action-link,
.details-link {
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.action-link:hover,
.details-link:hover {
  text-decoration: underline;
}

/* ---------- Status badges: leading state dot ---------- */

.status-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Cards ---------- */

.kpi-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(13, 45, 66, 0.18);
}

/* ---------- Modals ---------- */

.modal-content {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(13, 45, 66, 0.25);
}

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(14, 116, 144, 0.28);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(14, 116, 144, 0.45);
}

/* ---------- Toasts (used by commons/enhancements.js) ---------- */

.enh-toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

@keyframes enh-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.enh-toast {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: min(92vw, 360px);
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: #163047;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(13, 45, 66, 0.3);
  animation: enh-toast-in 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.enh-toast.is-leaving {
  opacity: 0;
  transform: translateY(8px);
}

.enh-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.22);
  color: #2dd4bf;
}

.enh-toast-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}