* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-family-base);
  width: 100%;
  min-height: 100vh;
  background-color: var(--background);
  color: var(--text-primary);
}

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

/* Reliable <summary> reset for iOS Safari (hides the native disclosure marker) */
details>summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

details>summary::-webkit-details-marker {
  display: none;
}

details>summary::marker {
  display: none;
}

/* Force inline SVGs inside a summary to render at their explicit size
   (WebKit sometimes collapses SVGs without width/height inside flex summaries) */
details>summary svg {
  display: block;
  flex-shrink: 0;
}

/* Home Container */
.home-container {
  flex: 1;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 6rem 2rem;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 2rem;
}

.hero-description {
  font-size: 1.1rem;
  opacity: 0.9;
}

/* Features Section */
.features {
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 3rem;
  color: var(--primary-color);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.feature-description {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* CTA Section */
.cta {
  background-color: var(--card-bg);
  padding: 4rem 2rem;
  text-align: center;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.cta p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-family-base);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* Dashboard */
.dashboard-container {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--primary-color);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.stat-card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-icon {
  font-size: 2.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.recent-section,
.actions-section {
  margin-bottom: 3rem;
}

.recent-section h2,
.actions-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.pets-list {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.action-btn {
  background: var(--primary-color);
  color: white;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-family-base);
}

.action-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* =============================================================== */
/* Dashboard shell (used on /dashboard/**)                           */
/* =============================================================== */

.qt-dash-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F4F5F7;
  color: #1F2937;
  font-family: Manrope, system-ui, sans-serif;
}

.qt-dash-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #E5E7EB;
}

/* Hamburger menu button (mobile only) */
.qt-dash-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 140ms ease;
}

.qt-dash-hamburger:hover {
  background: #F8FAFC;
}

.qt-dash-hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: #475569;
  border-radius: 2px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.qt-dash-shell--menu-open .qt-dash-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.qt-dash-shell--menu-open .qt-dash-hamburger-line:nth-child(2) {
  opacity: 0;
}

.qt-dash-shell--menu-open .qt-dash-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile overlay */
.qt-dash-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 19;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.qt-dash-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.qt-dash-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #FCD9B6 0%, #F59E0B 100%);
  box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.2),
    0 2px 4px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qt-dash-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-dash-avatar-fallback {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.qt-dash-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qt-dash-brand-eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 700;
}

.qt-dash-brand-name {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.qt-dash-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qt-dash-admin {
  text-align: right;
  margin-right: 4px;
}

.qt-dash-admin-eyebrow {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 700;
}

.qt-dash-admin-name {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.qt-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease,
    color 140ms ease, border-color 140ms ease,
    box-shadow 140ms ease;
}

.qt-icon-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(15, 23, 42, 0.18);
}

.qt-icon-btn:active {
  transform: translateY(0);
}

.qt-icon-btn--danger:hover {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #B91C1C;
}

/* Body grid: sidebar + main content. The first column animates between
   the expanded width (248px) and the collapsed icon-only width (72px). */
.qt-dash-body {
  flex: 1;
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 0;
  transition: grid-template-columns 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.qt-dash-shell--collapsed .qt-dash-body {
  grid-template-columns: 72px 1fr;
}

.qt-dash-sidebar {
  background: #fff;
  border-right: 1px solid #E5E7EB;
  padding: 18px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: calc(100vh - 73px);
  position: sticky;
  top: 73px;
  max-height: calc(100vh - 73px);
}

.qt-dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.qt-dash-navlink {
  display: block;
  text-decoration: none;
  border-radius: 10px;
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 140ms ease, color 140ms ease,
    transform 140ms ease;
}

.qt-dash-navlink-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}

.qt-dash-navlink:hover {
  background: #F8FAFC;
  color: #0F172A;
  transform: translateX(2px);
}

.qt-dash-navlink--active {
  background: #FFF7ED;
  color: #9A3412;
  position: relative;
}

/* Left accent bar marking the active screen — reads at a glance even in
   collapsed (icons-only) mode. */
.qt-dash-navlink--active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #F59E0B, #D97706);
}

.qt-dash-navlink--active:hover {
  background: #FFEDD5;
  color: #7C2D12;
  transform: none;
}

.qt-dash-navlink--accent {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  box-shadow: 0 8px 22px -12px rgba(217, 119, 6, 0.7);
}

.qt-dash-navlink--accent:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  color: #fff;
  transform: translateY(-1px);
}

.qt-dash-navlink--accent.qt-dash-navlink--active {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  color: #fff;
}

.qt-dash-navlink--soon {
  appearance: none;
  position: relative;
  width: 100%;
  border: 1px solid #FDBA74;
  background: #FFF7ED;
  color: #9A3412;
  cursor: not-allowed;
  font: inherit;
  margin-top: 8px;
  opacity: 1;
  padding: 0;
  text-align: left;
}

.qt-dash-navlink--soon:hover {
  background: #FFF7ED;
  color: #9A3412;
  transform: none;
}

.qt-dash-navlink--soon:disabled {
  color: #9A3412;
}

.qt-dash-navlink--soon .qt-dash-navlink-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}

.qt-dash-navlink--soon .qt-dash-navicon,
.qt-dash-navlink--soon .qt-dash-navlabel {
  color: #9A3412;
}

.qt-dash-navbadge {
  position: absolute;
  top: -7px;
  right: 12px;
  border-radius: 999px;
  border: 1px solid #FED7AA;
  background: #FFF7ED;
  box-shadow: 0 4px 10px -8px rgba(217, 119, 6, 0.45);
  color: #C2410C;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  pointer-events: none;
}

/* External link (QuickyTail Adopt) — distinct styling */
.qt-dash-navlink--external {
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  margin-top: 8px;
}

.qt-dash-navlink--external:hover {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #F59E0B;
  transform: translateX(2px) translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(245, 158, 11, 0.3);
}

/* Image icon in nav (logo) */
.qt-dash-navicon--img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.qt-dash-navicon--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sparkle effect removed - keeping class for compatibility */
.qt-dash-navlabel--sparkle {
  font-weight: 700;
  color: #1F2937;
}

.qt-dash-navicon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qt-dash-navlabel {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qt-svg svg {
  display: block;
}

.qt-dash-sidebar-foot {
  margin-top: 12px;
  padding: 14px 14px 4px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qt-dash-sidebar-version {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qt-dash-sidebar-version-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 700;
}

.qt-dash-sidebar-version-value {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.qt-dash-main {
  display: block;
  min-width: 0;
  padding: 28px 32px 48px;
}

.qt-dash-content {
  max-width: 1100px;
  margin: 0 auto;
}

/* The case-detail Kanban needs the full main-area width to fit 5
   columns. Without this override, `.qt-dash-content`'s 1100px cap
   leaves a wide empty strip on the right (the user noticed it). */
.qt-dash-content:has(.qt-case-page) {
  max-width: none;
}

/* Smooth fade-in for page transitions inside the dashboard. */
.qt-fade-in {
  animation: qtFadeIn 240ms ease-out both;
}

/*
 * Opacity-only fade-in. Deliberately NOT using `transform: translateY(...)`
 * here: any non-`none` transform on an ancestor creates a containing block
 * for `position: fixed` descendants, which was pulling `.qt-drawer` out of
 * the viewport coordinate space — the intake modal opened off-screen /
 * cropped depending on how far the page had been scrolled. Since
 * `.qt-fade-in` is applied to `.qt-dash-content` (ancestor of the drawer),
 * we restrict it to opacity so the fixed-position centering is preserved.
 */
@keyframes qtFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =============================================================== */
/* Page placeholder (empty state)                                    */
/* =============================================================== */

.qt-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.qt-page-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-page-title {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 0;
}

.qt-page-subtitle {
  font-size: 14px;
  color: #64748B;
  margin: 0;
}

.qt-empty-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 18px;
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  box-shadow: 0 18px 48px -28px rgba(15, 23, 42, 0.18);
}

.qt-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  color: #B45309;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -16px rgba(217, 119, 6, 0.5);
}

.qt-empty-title {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.qt-empty-sub {
  font-size: 14px;
  color: #64748B;
  max-width: 480px;
  line-height: 1.5;
}

.qt-empty-spinner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.qt-empty-pill {
  font-size: 12px;
  font-weight: 700;
  color: #B45309;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.qt-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid #FED7AA;
  border-top-color: #D97706;
  animation: qtSpin 700ms linear infinite;
}

@keyframes qtSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {

  /* Show hamburger menu */
  .qt-dash-hamburger {
    display: flex;
  }

  /* Hide admin name on mobile */
  .qt-dash-admin {
    display: none;
  }

  /* Sidebar becomes fixed overlay */
  .qt-dash-body {
    grid-template-columns: 1fr;
    position: relative;
  }

  .qt-dash-sidebar {
    position: fixed;
    top: 73px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-height: calc(100vh - 73px);
    min-height: calc(100vh - 73px);
    border-right: 1px solid #E5E7EB;
    border-bottom: none;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 4px 0 16px rgba(15, 23, 42, 0.1);
  }

  /* Show sidebar when menu is open */
  .qt-dash-shell--menu-open .qt-dash-sidebar {
    transform: translateX(0);
  }

  /* Show overlay when menu is open */
  .qt-dash-shell--menu-open .qt-dash-overlay {
    display: block;
  }

  .qt-dash-nav {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .qt-dash-sidebar-foot {
    width: 100%;
    border-top: 1px solid #F1F5F9;
    margin-top: 4px;
  }

  /* Hide collapse button on mobile */
  .qt-dash-collapse-btn {
    display: none;
  }

  .qt-dash-admin {
    display: none;
  }
}

/* =============================================================== */
/* Cases & pets (forms + lists)                                      */
/* Brand accents: orange #F59E0B / navy #0F172A                      */
/* =============================================================== */

.qt-page-eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #B45309;
  font-weight: 800;
  margin-bottom: 4px;
}

/* =============================================================== */
/* Foster homes                                                     */
/* =============================================================== */

.qt-foster-homes-page {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
}

.qt-foster-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.qt-foster-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px 0 12px;
  border: 1px solid #FDBA74;
  border-radius: 14px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 16px 32px -26px rgba(194, 65, 12, 0.55);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qt-foster-link-btn:hover {
  background: #FFEDD5;
  box-shadow: 0 20px 38px -26px rgba(194, 65, 12, 0.68);
  transform: translateY(-1px);
}

.qt-foster-link-btn--copied {
  border-color: #86EFAC;
  background: #DCFCE7;
  color: #166534;
}

.qt-foster-link-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #fff;
  color: currentColor;
  font-size: 15px;
}

.qt-foster-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.qt-foster-summary-card {
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 38px -30px rgba(15, 23, 42, 0.22);
}

.qt-foster-summary-label {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-foster-summary-value {
  margin-top: 8px;
  color: #0F172A;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.qt-foster-summary-helper {
  margin-top: 8px;
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

.qt-foster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.qt-foster-card-link {
  display: flex;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.qt-foster-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.24);
}

.qt-foster-filter-label {
  color: #64748B;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-foster-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qt-foster-filter-chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  background: #F8FAFC;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.qt-foster-filter-chip--active {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
}

.qt-foster-empty {
  padding: 28px;
  border: 1px dashed #CBD5E1;
  border-radius: 20px;
  background: #F8FAFC;
}

.qt-foster-empty h2 {
  margin: 0;
  color: #0F172A;
  font-size: 20px;
  font-weight: 900;
}

.qt-foster-empty p {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 14px;
  font-weight: 700;
}

.qt-foster-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 310px;
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 46px -32px rgba(15, 23, 42, 0.3);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qt-foster-card-link:hover .qt-foster-card {
  border-color: #FDBA74;
  box-shadow: 0 24px 52px -32px rgba(245, 158, 11, 0.5);
  transform: translateY(-2px);
}

.qt-foster-card--featured {
  border-color: #FDBA74;
  box-shadow: 0 24px 52px -32px rgba(245, 158, 11, 0.55);
}

.qt-foster-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.qt-foster-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #FED7AA;
  border-radius: 16px;
  background: #FFF7ED;
  color: #C2410C;
  font-weight: 900;
}

.qt-foster-card-title h2 {
  margin: 0;
  color: #0F172A;
  font-size: 20px;
  font-weight: 900;
}

.qt-foster-card-title p {
  margin: 3px 0 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

.qt-foster-status {
  align-self: start;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.qt-foster-status--available {
  background: #DCFCE7;
  color: #166534;
}

.qt-foster-status--review {
  background: #FEF3C7;
  color: #92400E;
}

.qt-foster-status--full {
  background: #E2E8F0;
  color: #475569;
}

.qt-foster-status--occupied {
  background: #DBEAFE;
  color: #1D4ED8;
}

.qt-foster-card-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.qt-foster-capacity-pill {
  padding: 8px 11px;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.qt-foster-note {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.45;
}

.qt-foster-quickfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qt-foster-quickfact {
  height: 58px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #F8FAFC;
  overflow: hidden;
}

.qt-foster-quickfact strong {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.qt-foster-quickfact span {
  display: block;
  margin-top: 4px;
  color: #0F172A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.qt-foster-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qt-foster-tag {
  padding: 7px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.qt-foster-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 68px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #CBD5E1;
}

.qt-foster-contact div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qt-foster-contact span {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-foster-contact strong,
.qt-foster-contact a {
  color: #0F172A;
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.qt-foster-contact a {
  color: #B45309;
}

.qt-foster-contact small {
  color: #64748B;
  font-size: 12px;
  font-weight: 800;
}

.qt-foster-back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  background: #F8FAFC;
  color: #475569;
  font-weight: 900;
  text-decoration: none;
}

.qt-foster-detail-page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.qt-foster-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qt-foster-detail-layout--compact {
  gap: 16px;
}

/* Compact Foster Hero */
.qt-foster-compact-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 20px 24px;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-foster-compact-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qt-foster-compact-hero-main {
  min-width: 0;
}

.qt-foster-compact-hero-main h1 {
  margin: 4px 0 8px;
  font-size: 24px;
  font-weight: 900;
  color: #0F172A;
}

.qt-foster-compact-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}

.qt-compact-contact-item {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.qt-foster-compact-date {
  margin: 0;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 700;
}

.qt-foster-compact-hero-actions {
  display: flex;
  align-items: center;
}

/* Compact 2-column grid */
.qt-foster-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.qt-foster-compact-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qt-foster-compact-section {
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 18px;
  box-shadow: 0 20px 48px -36px rgba(15, 23, 42, 0.32);
}

.qt-foster-compact-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.qt-foster-compact-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-foster-compact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
}

.qt-foster-compact-row:last-child {
  border-bottom: none;
}

.qt-foster-compact-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qt-foster-compact-value {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  text-align: right;
}

.qt-foster-compact-note {
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
}

.qt-foster-compact-note--danger {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #991B1B;
}

/* Responsive compact layout */
@media (max-width: 1024px) {
  .qt-foster-compact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .qt-foster-compact-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .qt-foster-compact-hero-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .qt-foster-compact-hero-actions {
    width: 100%;
  }

  .qt-foster-card-compact {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 16px;
  }

  .qt-foster-card-compact-left {
    flex-direction: row;
    gap: 10px;
  }

  .qt-foster-avatar-compact {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }

  .qt-foster-card-compact-info {
    min-width: 0;
  }

  .qt-foster-card-compact-info h3 {
    font-size: 14px;
  }

  .qt-foster-card-compact-contact {
    flex-direction: column;
    gap: 4px;
  }

  .qt-foster-card-compact-contact span {
    font-size: 10px;
  }

  .qt-foster-card-compact-meta {
    gap: 10px;
  }

  .qt-foster-compact-meta-item {
    font-size: 11px;
  }

  .qt-foster-card-compact-status {
    align-self: flex-start;
  }
}

.qt-foster-detail-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-foster-detail-avatar {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid #FED7AA;
  border-radius: 20px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 24px;
  font-weight: 900;
}

.qt-foster-detail-title {
  min-width: 0;
}

.qt-foster-detail-title h1 {
  margin: 4px 0 0;
  color: #0F172A;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
}

.qt-foster-detail-title p {
  margin: 8px 0 0;
  color: #64748B;
  font-size: 15px;
  font-weight: 800;
}

.qt-foster-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.qt-foster-detail-tile,
.qt-foster-detail-panel {
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 42px -34px rgba(15, 23, 42, 0.28);
}

.qt-foster-detail-tile {
  padding: 16px;
}

.qt-foster-detail-tile span,
.qt-foster-detail-field span {
  display: block;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-foster-detail-tile strong,
.qt-foster-detail-field strong {
  display: block;
  margin-top: 5px;
  color: #0F172A;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.qt-foster-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.qt-foster-detail-panel {
  padding: 20px;
}

.qt-foster-detail-panel--wide {
  grid-column: 1 / -1;
}

.qt-foster-detail-panel h2 {
  margin: 0 0 16px;
  color: #0F172A;
  font-size: 20px;
  font-weight: 900;
}

.qt-foster-detail-field+.qt-foster-detail-field {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}

.qt-foster-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.qt-foster-review-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px -34px rgba(15, 23, 42, 0.3);
}

.qt-foster-review-actions--rejected {
  grid-template-columns: 1fr;
  border-color: #FECACA;
  background: #FEF2F2;
}

.qt-foster-review-actions--rejected .qt-foster-review-copy p {
  color: #7F1D1D;
}

.qt-foster-review-copy h2 {
  margin: 0;
  color: #0F172A;
  font-size: 19px;
  font-weight: 900;
}

.qt-foster-review-copy p,
.qt-foster-review-error {
  margin: 6px 0 0;
  color: #64748B;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.qt-foster-review-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.qt-foster-review-buttons--end {
  margin-top: 12px;
}

.qt-foster-review-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
}

.qt-foster-review-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.qt-foster-review-btn--approve {
  background: #16A34A;
  color: #fff;
}

.qt-foster-review-btn--reject {
  background: #FEE2E2;
  color: #991B1B;
}

.qt-foster-review-btn--ghost {
  border-color: #E2E8F0;
  background: #fff;
  color: #475569;
}

.qt-foster-reject-box {
  grid-column: 1 / -1;
  padding-top: 16px;
  border-top: 1px dashed #CBD5E1;
}

.qt-foster-reject-box label {
  display: block;
  margin-bottom: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.qt-foster-reject-textarea {
  width: 100%;
  min-height: 118px;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  background: #F8FAFC;
  color: #0F172A;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  resize: vertical;
  outline: none;
}

.qt-foster-reject-textarea:focus {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.qt-foster-review-error {
  grid-column: 1 / -1;
  color: #B91C1C;
}

/* =============================================================== */
/* Adoption applications                                            */
/* =============================================================== */

.qt-applications-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.qt-applications-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.qt-applications-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.24);
  margin: 24px 0;
}

.qt-applications-filter-label {
  color: #64748B;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-applications-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qt-applications-filter-chip {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  background: #F8FAFC;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: all 180ms ease;
}

.qt-applications-filter-chip:hover {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
}

.qt-applications-filter-chip--active {
  border-color: #FDBA74;
  background: #FFF7ED;
  color: #C2410C;
}

.qt-applications-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qt-application-card-link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

/* Applications Table */
.qt-applications-table-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.qt-applications-table-header {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(260px, 1.6fr) minmax(120px, 0.7fr) 72px 118px;
  gap: 16px;
  padding: 12px 20px;
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  border-bottom: 1px solid #E2E8F0;
}

.qt-applications-table-row-link {
  text-decoration: none;
  color: inherit;
}

.qt-applications-table-row-link:hover .qt-applications-table-row {
  background: #FAFAF9;
}

.qt-applications-table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(260px, 1.6fr) minmax(120px, 0.7fr) 72px 118px;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid #E2E8F0;
  transition: background 120ms ease;
  cursor: pointer;
}

.qt-applications-table-row:last-child {
  border-bottom: none;
}

.qt-applications-table-cell {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-applications-table-cell--pet {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.qt-applications-table-pet-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.qt-applications-table-pet-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-applications-table-pet-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-applications-table-applicant-name {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.qt-applications-table-applicant-email {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .qt-applications-table-header {
    display: none;
  }

  .qt-applications-table-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  .qt-applications-table-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .qt-applications-table-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin-bottom: 2px;
  }

  .qt-applications-table-cell--pet::before {
    content: 'Mascota';
  }

  .qt-applications-table-cell--pet+.qt-applications-table-cell::before {
    content: 'Postulante';
  }

  .qt-applications-table-cell--pet+.qt-applications-table-cell+.qt-applications-table-cell::before {
    content: 'Celular';
  }

  .qt-applications-table-cell--pet+.qt-applications-table-cell+.qt-applications-table-cell+.qt-applications-table-cell::before {
    content: 'Patio';
  }

  .qt-applications-table-cell--pet+.qt-applications-table-cell+.qt-applications-table-cell+.qt-applications-table-cell+.qt-applications-table-cell::before {
    content: 'Estado';
  }
}

/* Compact application cards for list view */
.qt-application-card-compact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px -32px rgba(15, 23, 42, 0.3);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  align-items: start;
}

.qt-application-card-link:hover .qt-application-card-compact {
  border-color: #FDBA74;
  box-shadow: 0 24px 52px -32px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.qt-application-card-compact-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qt-application-card-compact-media {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #FFF7ED;
  display: grid;
  place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}

.qt-application-card-compact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-card-compact-pet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
}

.qt-application-card-compact-label {
  font-size: 9px;
  font-weight: 800;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qt-application-card-compact-pet strong {
  font-size: 14px;
  font-weight: 800;
  color: #0F172A;
}

.qt-application-card-compact-pet p {
  margin: 0;
  font-size: 11px;
  color: #64748B;
  font-weight: 600;
}

.qt-application-card-compact-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.qt-application-card-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.qt-application-card-compact-header h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 900;
  color: #0F172A;
}

.qt-application-card-compact-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.qt-application-card-compact-contact span {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
}

.qt-application-card-compact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.qt-application-card-compact-fact {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.qt-application-card-compact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-application-card-compact-badges span {
  padding: 4px 10px;
  border-radius: 8px;
  background: #F0FDF4;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
}

.qt-application-card-compact-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2px;
}

.qt-application-card-compact-date-row .qt-application-card-compact-fact {
  font-size: 11px;
  color: #94A3B8;
}

.qt-application-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  width: 100%;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 46px -32px rgba(15, 23, 42, 0.3);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qt-application-card--applicant {
  min-height: 260px;
}

.qt-application-card-link:hover .qt-application-card {
  border-color: #FDBA74;
  box-shadow: 0 24px 52px -32px rgba(245, 158, 11, 0.5);
  transform: translateY(-2px);
}

.qt-application-pet-media,
.qt-application-detail-media {
  background: #FFF7ED;
}

.qt-application-card--applicant .qt-application-pet-media {
  min-height: 260px;
}

.qt-application-pet-media img,
.qt-application-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-pet-empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: #C2410C;
  font-size: 42px;
}

.qt-application-card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  min-width: 0;
}

.qt-application-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.qt-application-card-head h2 {
  margin: 0;
  color: #0F172A;
  font-size: 22px;
  font-weight: 900;
}

.qt-application-card-head p {
  margin: 5px 0 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
}

.qt-application-count-pill {
  align-self: flex-start;
  padding: 8px 11px;
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  background: #DCFCE7;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.qt-application-quickfacts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qt-application-fact {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #F8FAFC;
}

.qt-application-fact strong {
  display: block;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.qt-application-fact span {
  display: block;
  margin-top: 4px;
  color: #0F172A;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.qt-application-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qt-application-badges span {
  padding: 7px 10px;
  border: 1px solid #FED7AA;
  border-radius: 999px;
  background: #FFF7ED;
  color: #9A3412;
  font-size: 11px;
  font-weight: 900;
}

.qt-application-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #CBD5E1;
  color: #B45309;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.qt-application-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qt-application-detail-layout--review {
  gap: 18px;
}

.qt-application-detail-hero {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-application-detail-hero--review {
  align-items: start;
}

.qt-application-detail-media {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  overflow: hidden;
  border: 1px solid #FED7AA;
  border-radius: 22px;
  color: #C2410C;
  font-size: 42px;
}

.qt-application-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qt-application-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.qt-application-review-btn {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.qt-application-review-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.qt-application-review-btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.qt-application-review-btn--approve {
  background: #166534;
  color: #fff;
  box-shadow: 0 14px 26px -18px rgba(22, 101, 52, 0.75);
}

.qt-application-review-btn--reject {
  background: #991B1B;
  color: #fff;
  box-shadow: 0 14px 26px -18px rgba(153, 27, 27, 0.72);
}

.qt-application-review-btn--ghost {
  border-color: #CBD5E1;
  background: #fff;
  color: #334155;
}

.qt-application-reject-panel {
  padding: 18px;
  border: 1px solid #FECACA;
  border-radius: 22px;
  background: #FEF2F2;
}

.qt-application-reject-panel label {
  display: block;
  color: #7F1D1D;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-application-reject-textarea {
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid #FCA5A5;
  border-radius: 16px;
  background: #fff;
  color: #0F172A;
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: vertical;
}

.qt-application-reject-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16);
}

.qt-application-reject-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.qt-application-review-error,
.qt-application-review-success {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 900;
}

.qt-application-review-error {
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  color: #991B1B;
}

.qt-application-review-success {
  border: 1px solid #BBF7D0;
  background: #F0FDF4;
  color: #166534;
}

.qt-application-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.qt-application-detail-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qt-application-detail-section,
.qt-application-pet-side-card {
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 48px -36px rgba(15, 23, 42, 0.32);
}

.qt-application-detail-section {
  padding: 20px;
}

.qt-application-detail-section h2 {
  margin: 0 0 14px;
  color: #0F172A;
  font-size: 17px;
  font-weight: 950;
}

.qt-application-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qt-application-commitments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.qt-application-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #F8FAFC;
  color: #64748B;
}

.qt-application-check span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #E2E8F0;
  color: #475569;
  font-weight: 950;
}

.qt-application-check strong {
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.qt-application-check--yes {
  border-color: #BBF7D0;
  background: #F0FDF4;
}

.qt-application-check--yes span {
  background: #DCFCE7;
  color: #166534;
}

.qt-application-detail-note {
  padding: 14px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #F8FAFC;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.qt-application-detail-note--danger {
  border-color: #FECACA;
  background: #FEF2F2;
  color: #7F1D1D;
}

.qt-application-muted {
  margin: 0;
  color: #64748B;
  font-size: 14px;
  font-weight: 700;
}

.qt-application-attachments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.qt-application-attachment {
  overflow: hidden;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qt-application-attachment:hover {
  border-color: #FDBA74;
  box-shadow: 0 18px 36px -28px rgba(245, 158, 11, 0.55);
  transform: translateY(-1px);
}

.qt-application-attachment-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFF7ED;
  color: #9A3412;
  font-size: 18px;
  font-weight: 950;
}

.qt-application-attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-attachment-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  min-width: 0;
}

.qt-application-attachment-body span,
.qt-application-pet-side-meta span {
  color: #94A3B8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-application-attachment-body strong,
.qt-application-pet-side-meta strong {
  color: #0F172A;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.qt-application-attachment-body small {
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}

.qt-application-attachment--btn {
  background: #fff;
  border: 1px solid #E2E8F0;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.qt-application-attachment--btn:hover {
  border-color: #FDBA74;
  box-shadow: 0 18px 36px -28px rgba(245, 158, 11, 0.55);
  transform: translateY(-1px);
}

/* Large status badge (shown when application is resolved) */
.qt-application-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
}

.qt-application-status-badge--available {
  background: #DCFCE7;
  color: #166534;
}

.qt-application-status-badge--review {
  background: #FEF3C7;
  color: #92400E;
}

.qt-application-status-badge--full {
  background: #F1F5F9;
  color: #475569;
}

/* ---- Compact layout ------------------------------------------------ */

.qt-application-detail-layout--compact {
  gap: 16px;
}

.qt-application-compact-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 20px 24px;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-application-compact-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.qt-application-compact-media {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: #FFF7ED;
  display: grid;
  place-items: center;
  font-size: 32px;
  flex-shrink: 0;
}

.qt-application-compact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-compact-pet-info h3 {
  margin: 4px 0 2px;
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
}

.qt-application-compact-pet-info p {
  margin: 0;
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
}

.qt-application-compact-hero-main {
  min-width: 0;
}

.qt-application-compact-hero-main h1 {
  margin: 4px 0 8px;
  font-size: 24px;
  font-weight: 900;
  color: #0F172A;
}

.qt-application-compact-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}

.qt-compact-contact-item {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.qt-application-compact-date {
  margin: 0;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 700;
}

.qt-application-compact-hero-actions {
  display: flex;
  align-items: center;
}

/* Compact 2-column grid */
.qt-application-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.qt-application-compact-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qt-application-compact-section {
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 18px;
  box-shadow: 0 20px 48px -36px rgba(15, 23, 42, 0.32);
}

.qt-application-compact-section-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.qt-application-compact-section-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-application-compact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #F1F5F9;
}

.qt-application-compact-row:last-child {
  border-bottom: none;
}

.qt-application-compact-label {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qt-application-compact-value {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  text-align: right;
}

.qt-application-compact-note {
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
}

.qt-application-compact-note--danger {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #991B1B;
}

.qt-application-attachments--compact {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.qt-application-attachments--compact .qt-application-attachment {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.qt-application-attachments--compact .qt-application-attachment:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(15, 23, 42, 0.2);
}

.qt-application-attachments--compact .qt-application-attachment-preview {
  aspect-ratio: 1 / 1;
  font-size: 14px;
  border-radius: 0;
}

.qt-application-attachments--compact .qt-application-attachment-body {
  padding: 8px;
  gap: 0;
}

/* Ocultar label y tamaño en vista compacta; solo nombre */
.qt-application-attachments--compact .qt-application-attachment-body span,
.qt-application-attachments--compact .qt-application-attachment-body small {
  display: none;
}

.qt-application-attachments--compact .qt-application-attachment-body strong {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Responsive compact layout */
@media (max-width: 1024px) {
  .qt-application-compact-grid {
    grid-template-columns: 1fr;
  }
}

/* Two-card hero (pet + applicant) */
.qt-application-detail-hero-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.qt-application-detail-pet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-application-detail-pet-thumb {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: #FFF7ED;
  display: grid;
  place-items: center;
  font-size: 36px;
  flex-shrink: 0;
  margin-bottom: 12px;
}

.qt-application-detail-pet-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-detail-pet-info h3 {
  margin: 4px 0 2px;
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
}

.qt-application-detail-pet-info p {
  margin: 0;
  font-size: 13px;
  color: #64748B;
  font-weight: 600;
}

.qt-application-detail-applicant-card {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 22px 52px -34px rgba(15, 23, 42, 0.34);
}

.qt-application-detail-applicant-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.qt-application-detail-applicant-head h1 {
  margin: 4px 0 8px;
  font-size: 24px;
  font-weight: 900;
  color: #0F172A;
}

.qt-application-detail-applicant-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .qt-application-detail-hero-grid {
    grid-template-columns: 1fr;
  }

  .qt-application-detail-applicant-head {
    flex-direction: column;
  }

  .qt-application-detail-applicant-actions {
    width: 100%;
  }

  .qt-application-compact-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .qt-application-compact-hero-left {
    flex-direction: column;
    align-items: flex-start;
  }

  .qt-application-compact-hero-actions {
    width: 100%;
  }

  .qt-application-review-actions {
    width: 100%;
    flex-direction: column;
  }

  .qt-application-card-compact {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .qt-application-card-compact-left {
    flex-direction: row;
  }

  .qt-application-card-compact-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.qt-application-detail-side {
  position: sticky;
  top: 92px;
}

.qt-application-pet-side-card {
  padding: 16px;
}

.qt-application-pet-side-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 14px;
  border-radius: 20px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 38px;
  font-weight: 950;
}

.qt-application-pet-side-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-application-pet-side-card h2 {
  margin: 8px 0 4px;
  color: #0F172A;
  font-size: 24px;
  font-weight: 950;
}

.qt-application-pet-side-card p {
  margin: 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.qt-application-pet-side-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #CBD5E1;
}

.qt-application-pet-side-meta div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qt-application-request-card {
  padding: 18px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px -34px rgba(15, 23, 42, 0.28);
}

.qt-application-request-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.qt-application-request-head h2 {
  margin: 0;
  color: #0F172A;
  font-size: 20px;
  font-weight: 900;
}

.qt-application-request-head p {
  margin: 4px 0 0;
  color: #64748B;
  font-size: 13px;
  font-weight: 800;
}

.qt-application-message {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #CBD5E1;
}

.qt-application-message span {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-application-message p {
  margin: 6px 0 0;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.qt-application-message--compact {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@media (max-width: 1100px) {
  .qt-foster-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qt-foster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qt-foster-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qt-foster-review-actions {
    grid-template-columns: 1fr;
  }

  .qt-foster-review-buttons {
    justify-content: flex-start;
  }

  .qt-applications-grid {
    grid-template-columns: 1fr;
  }

  .qt-application-detail-grid {
    grid-template-columns: 1fr;
  }

  .qt-application-detail-side {
    position: static;
  }

  .qt-application-attachments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .qt-foster-toolbar {
    flex-direction: column;
  }

  .qt-foster-filter-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .qt-foster-summary-grid,
  .qt-foster-grid {
    grid-template-columns: 1fr;
  }

  .qt-foster-card-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qt-foster-card-state {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .qt-foster-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .qt-foster-detail-hero,
  .qt-foster-detail-columns,
  .qt-foster-detail-summary {
    grid-template-columns: 1fr;
  }

  .qt-foster-detail-hero .qt-foster-status {
    grid-column: auto;
    justify-self: start;
  }

  .qt-foster-detail-title h1 {
    font-size: 28px;
  }

  .qt-applications-summary,
  .qt-application-quickfacts,
  .qt-application-detail-hero {
    grid-template-columns: 1fr;
  }

  .qt-application-card {
    grid-template-columns: 1fr;
  }

  .qt-application-pet-media {
    height: 180px;
  }

  .qt-application-card-head,
  .qt-application-request-head {
    grid-template-columns: 1fr;
  }

  .qt-application-review-actions {
    justify-content: flex-start;
  }

  .qt-application-info-grid,
  .qt-application-commitments,
  .qt-application-attachments {
    grid-template-columns: 1fr;
  }

  .qt-application-attachments--compact {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
}

.qt-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 14px 36px -28px rgba(15, 23, 42, 0.18);
}

.qt-section {
  display: flex;
  flex-direction: column;
}

.qt-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.qt-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}

.qt-section-sub {
  margin: 2px 0 0;
  color: #64748B;
  font-size: 13px;
}

/* Form fields */
.qt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-field-label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.qt-field-required {
  color: #DC2626;
}

.qt-field-hint {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}

.qt-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  box-sizing: border-box;
}

.qt-pet-data-grid .qt-input {
  min-height: 40px;
  padding: 10px 12px;
  font-size: 13px;
}

.qt-input:focus {
  border-color: #F59E0B;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.qt-textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.45;
}

/* Segmented (species/sex/age) */
.qt-segmented {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.qt-segmented-btn {
  flex: 1 1 0;
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 120ms ease, color 120ms ease,
    border-color 120ms ease, transform 120ms ease,
    box-shadow 120ms ease;
}

.qt-segmented-btn:hover {
  background: #F1F5F9;
  transform: translateY(-1px);
}

.qt-segmented-btn--active {
  background: #0F172A;
  color: #fff;
  border-color: #0F172A;
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.55);
}

.qt-segmented-btn--active:hover {
  background: #1E293B;
  border-color: #1E293B;
  transform: translateY(-1px);
}

.qt-segmented-icon {
  font-size: 16px;
  line-height: 1;
}

/* Action row */
.qt-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.qt-form-actions--two {
  justify-content: space-between;
}

/* Buttons */
.qt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 140ms ease, transform 140ms ease,
    background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
  white-space: nowrap;
}

.qt-btn:active {
  transform: translateY(1px);
}

.qt-btn--primary {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(217, 119, 6, 0.65);
}

.qt-btn--primary:hover {
  filter: brightness(1.05);
}

.qt-btn--secondary {
  background: #0F172A;
  color: #fff;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.55);
}

.qt-btn--secondary:hover {
  background: #1E293B;
}

.qt-btn--ghost {
  background: transparent;
  color: #475569;
  border-color: #E2E8F0;
}

.qt-btn--ghost:hover {
  background: #F8FAFC;
  color: #0F172A;
}

.qt-btn--disabled,
.qt-btn[disabled] {
  filter: grayscale(0.2) brightness(1);
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Form-level error */
.qt-form-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

/* Toast (inline, success) */
.qt-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 16px;
  animation: qtFadeIn 200ms ease-out both;
}

.qt-toast--success {
  background: #ECFDF5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.qt-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #10B981;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

/* Inline button spinner */
.qt-spinner--btn {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
}

/* Case detail hero */
.qt-breadcrumb {
  margin-bottom: 12px;
}

.qt-breadcrumb-link {
  color: #64748B;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.qt-breadcrumb-link:hover {
  color: #0F172A;
}

.qt-case-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-case-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.qt-case-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}

.qt-case-hero-date {
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
}

.qt-case-open-days {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #9A3412;
  font-size: 12px;
  font-weight: 800;
}

.qt-case-config-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #FED7AA;
  background: #FFFBF5;
  color: #9A3412;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px -22px rgba(154, 52, 18, 0.45);
  transition: transform 140ms ease, border-color 140ms ease,
    background-color 140ms ease, box-shadow 140ms ease;
}

.qt-case-config-btn:hover {
  transform: translateY(-1px);
  border-color: #FDBA74;
  background: #FFF7ED;
  box-shadow: 0 16px 28px -22px rgba(154, 52, 18, 0.55);
}

.qt-case-close-btn {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #86EFAC;
  background: #F0FDF4;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px -22px rgba(22, 101, 52, 0.35);
  transition: transform 140ms ease, border-color 140ms ease,
    background-color 140ms ease, box-shadow 140ms ease;
}

.qt-case-close-btn:hover {
  transform: translateY(-1px);
  border-color: #4ADE80;
  background: #DCFCE7;
  box-shadow: 0 16px 28px -22px rgba(22, 101, 52, 0.5);
}

.qt-case-close-icon {
  font-size: 14px;
  font-weight: 900;
}

.qt-case-close-label {
  white-space: nowrap;
}

.qt-btn--close-case {
  background: #166534;
  color: #fff;
  border-color: #166534;
}

.qt-btn--close-case:hover {
  background: #15803D;
  border-color: #15803D;
}

.qt-case-config-label {
  white-space: nowrap;
}

.qt-case-hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.qt-meta-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 12px;
}

.qt-meta-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 700;
  margin-bottom: 2px;
}

.qt-meta-value {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
}

.qt-case-hero-description {
  margin-top: 12px;
  color: #334155;
  line-height: 1.55;
  font-size: 14px;
  white-space: pre-wrap;
}

.qt-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.qt-pill--active {
  background: #DCFCE7;
  color: #166534;
}

.qt-pill--muted {
  background: #E5E7EB;
  color: #374151;
}

/* Pet grid */
.qt-pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.qt-pet-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.qt-pet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -22px rgba(15, 23, 42, 0.25);
  border-color: #FED7AA;
}

.qt-pet-card-avatar {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.qt-pet-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-card-icon {
  font-size: 36px;
}

.qt-pet-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-pet-card-name {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
}

.qt-pet-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-pet-chip {
  background: #F1F5F9;
  color: #334155;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.qt-pet-card-foot {
  font-size: 12px;
  color: #64748B;
  font-weight: 600;
}

/* =============================================================== */
/* Cases list (Casos activos)                                        */
/* =============================================================== */

.qt-page-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.qt-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 4px 12px;
  margin: 8px 0 4px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.qt-search:focus-within {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.qt-search-icon {
  font-size: 14px;
  color: #94A3B8;
  flex-shrink: 0;
}

.qt-search-icon--svg {
  width: 16px;
  height: 16px;
  font-size: unset;
}

.qt-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 14px;
  font-family: inherit;
  color: #0F172A;
}

.qt-search-input::placeholder {
  color: #94A3B8;
}

.qt-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-top: 4px;
}

.qt-case-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qt-case-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 220px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
  overflow: hidden;
}

.qt-case-card-link:hover .qt-case-card {
  transform: translateY(-3px);
  box-shadow: 0 24px 40px -28px rgba(15, 23, 42, 0.25);
  border-color: #FED7AA;
}

.qt-case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.qt-case-card-link:hover .qt-case-card::before {
  opacity: 1;
}

.qt-case-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.qt-case-card-date {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.qt-case-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #0F172A;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qt-case-card-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.qt-case-card-desc {
  margin: 4px 0 0;
  color: #64748B;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qt-case-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #E5E7EB;
}

.qt-case-card-empty-pets {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 600;
  height: 36px;
  display: flex;
  align-items: center;
  font-style: italic;
}

.qt-case-card-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.qt-case-card-count-num {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1;
}

.qt-case-card-count-label {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.qt-case-card-history-note {
  color: #94A3B8;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
}

/* Pet stack (overlapping avatars) */
.qt-pet-stack {
  display: flex;
  align-items: center;
}

.qt-pet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-left: -10px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.18);
  transition: transform 160ms ease;
}

.qt-pet-avatar:first-child {
  margin-left: 0;
}

.qt-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-avatar-emoji {
  font-size: 18px;
  line-height: 1;
}

.qt-pet-avatar--more {
  background: #0F172A;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.qt-case-card-link:hover .qt-pet-avatar {
  transform: translateY(-1px);
}

.qt-dash-content:has(.qt-profile-page) {
  max-width: none;
}

/* =============================================================== */
/* Pets list                                                        */
/* =============================================================== */

.qt-dash-content:has(.qt-pets-page) {
  max-width: none;
}

.qt-pets-page {
  --pets-bg: #FFF8F3;
  --pets-card: #FFFFFF;
  --pets-line: #E9D9C7;
  --pets-line-soft: #F4E7D9;
  --pets-line-strong: #D6C4AE;
  --pets-ink: #211B12;
  --pets-muted: #6B5E4C;
  --pets-primary: #8A5A00;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  gap: 26px;
  color: var(--pets-ink);
}

.qt-pets-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 18px;
  align-items: start;
}

.qt-pets-heading {
  grid-column: 1;
  grid-row: 1;
  min-width: 240px;
}

.qt-pets-view-toggle {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.qt-pets-controls {
  grid-column: 1 / -1;
  grid-row: 2;
}

.qt-pets-active-filters {
  grid-column: 1 / -1;
  grid-row: 3;
}

.qt-pets-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.14;
  font-weight: 900;
  letter-spacing: 0;
  color: #17120B;
}

.qt-pets-subtitle {
  margin: 8px 0 0;
  max-width: 420px;
  color: var(--pets-muted);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}

.qt-pets-controls {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  min-width: 0;
}

.qt-pets-search {
  position: relative;
  flex: 1 1 480px;
  min-width: 280px;
}

/* View Toggle */
.qt-pets-view-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--pets-line-soft);
  border: 1px solid #E8D8C3;
  border-radius: 12px;
  flex: 0 0 auto;
  box-shadow: 0 12px 28px -24px rgba(33, 27, 18, 0.45);
}

.qt-view-btn {
  min-width: 112px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  transition: all 160ms ease;
}

.qt-view-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--pets-primary);
}

.qt-view-btn--active {
  background: #FFFFFF;
  color: var(--pets-primary);
  border-color: #EBD5B8;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.2);
}

.qt-view-icon {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.qt-view-label {
  line-height: 1;
}

.qt-pets-search-input,
.qt-pets-select-trigger {
  height: 54px;
  width: 100%;
  border: 1px solid var(--pets-line-strong);
  border-radius: 10px;
  background: var(--pets-card);
  color: var(--pets-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.qt-pets-search-input {
  padding: 0 16px;
}

.qt-pets-search-input::placeholder {
  color: #8B7D6A;
}

.qt-pets-select-menu {
  position: relative;
  min-width: 150px;
  flex: 0 0 160px;
}

.qt-pets-select-menu--status {
  flex-basis: 220px;
}

.qt-pets-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 20px;
  cursor: pointer;
}

.qt-pets-select-menu--open .qt-pets-select-trigger {
  border-color: #D9961A;
  box-shadow: 0 0 0 3px rgba(217, 150, 26, 0.16);
}

.qt-pets-search-input:focus,
.qt-pets-select-trigger:focus {
  border-color: #D9961A;
  box-shadow: 0 0 0 3px rgba(217, 150, 26, 0.16);
}

.qt-pets-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-pets-select-chevron {
  color: #7C5A23;
  font-size: 18px;
  line-height: 1;
}

.qt-pets-select-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid #E8D8C3;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 18px 42px -26px rgba(33, 27, 18, 0.55);
}

.qt-pets-select-option {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pets-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.qt-pets-select-option:hover,
.qt-pets-select-option--selected {
  background: #FFF1E4;
  color: var(--pets-primary);
}

.qt-pets-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-pets-select-check {
  color: var(--pets-primary);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.qt-pets-filter-btn {
  min-width: 116px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid var(--pets-line-strong);
  background: var(--pets-card);
  color: var(--pets-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  flex: 0 0 auto;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.qt-pets-filter-btn:hover,
.qt-pets-filter-btn--active {
  background: #FFF1E4;
  border-color: #D9961A;
}

.qt-pets-filter-icon {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.qt-pets-filter-label {
  line-height: 1;
}

.qt-pets-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
}

.qt-pets-filter-chip,
.qt-pets-clear-all {
  min-height: 32px;
  border: 1px solid #E7D8C5;
  border-radius: 999px;
  background: #FFFFFF;
  color: #6B5E4C;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.qt-pets-filter-chip {
  max-width: 360px;
}

.qt-pets-filter-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-pets-filter-chip-x {
  color: #9A3412;
  font-size: 14px;
  line-height: 1;
}

.qt-pets-clear-all {
  border-color: transparent;
  background: transparent;
  color: var(--pets-primary);
}

.qt-adoptions-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px -30px rgba(15, 23, 42, 0.24);
}

.qt-adoptions-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.qt-adoptions-filter-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.qt-adoptions-filter-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.qt-adoptions-filter-input::placeholder {
  color: #94A3B8;
}

.qt-adoptions-filter-input:focus {
  border-color: #FDBA74;
  box-shadow: 0 0 0 3px rgba(253, 186, 116, 0.2);
}

.qt-adoptions-filter-select {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 28px 0 12px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.qt-adoptions-filter-select:focus {
  border-color: #FDBA74;
  box-shadow: 0 0 0 3px rgba(253, 186, 116, 0.2);
}

@media (max-width: 768px) {
  .qt-adoptions-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .qt-adoptions-filter-group {
    min-width: 0;
    width: 100%;
  }
}

.qt-pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 28px;
  align-items: start;
}

/* List View - Compact Rows */
.qt-pets-list-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qt-pet-row-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.qt-pet-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto 24px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--pets-card);
  border: 1px solid rgba(233, 217, 199, 0.82);
  border-radius: 16px;
  box-shadow: 0 12px 24px -20px rgba(33, 27, 18, 0.38);
  transition: all 160ms ease;
}

.qt-pet-row-link:hover .qt-pet-row {
  border-color: #D9961A;
  box-shadow: 0 16px 32px -20px rgba(33, 27, 18, 0.48);
  transform: translateX(4px);
}

.qt-pet-row-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF1E4, #EDE0D3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qt-pet-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-row-photo span {
  font-size: 28px;
}

.qt-pet-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.qt-pet-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qt-pet-row-name strong {
  font-size: 16px;
  font-weight: 900;
  color: var(--pets-ink);
}

.qt-pet-row-sex {
  font-size: 14px;
  opacity: 0.6;
}

.qt-pet-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #64748B;
}

.qt-pet-row-dot {
  opacity: 0.5;
}

.qt-pet-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qt-pet-row-intake {
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  white-space: nowrap;
}

.qt-pet-row-status {
  display: flex;
  align-items: center;
}

.qt-pet-row-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.qt-pet-row-badge--ready {
  background: #D2E4FF;
  color: #1E4974;
}

.qt-pet-row-badge--medical {
  background: #FFE2E2;
  color: #8B1E1E;
}

.qt-pet-row-badge--foster {
  background: #DCE2F6;
  color: #404756;
}

.qt-pet-row-badge--adopted {
  background: #DFF6E7;
  color: #166534;
}

.qt-pet-row-badge--intake {
  background: #F3E6D9;
  color: #624000;
}

.qt-pet-row-chevron {
  font-size: 20px;
  font-weight: 700;
  color: #CBD5E1;
  line-height: 1;
}

.qt-pet-list-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.qt-pet-list-card {
  background: var(--pets-card);
  border: 1px solid rgba(233, 217, 199, 0.82);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 26px -24px rgba(33, 27, 18, 0.42);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  display: flex;
  flex-direction: column;
}

/* Status accent: left border colored by case status */
.qt-pet-list-card--status-intake {
  border-left: 3px solid #D9961A;
}

.qt-pet-list-card--status-foster {
  border-left: 3px solid #6B7AB5;
}

.qt-pet-list-card--status-medical {
  border-left: 3px solid #E05252;
}

.qt-pet-list-card--status-ready {
  border-left: 3px solid #3B82F6;
}

.qt-pet-list-card--status-adopted {
  border-left: 3px solid #22C55E;
}

.qt-pet-list-card-link:hover .qt-pet-list-card {
  transform: translateY(-3px);
  box-shadow: 0 22px 34px -24px rgba(33, 27, 18, 0.5);
}

/* Hover border matches the status accent color */
.qt-pet-list-card-link:hover .qt-pet-list-card--status-intake {
  border-color: #D9961A;
}

.qt-pet-list-card-link:hover .qt-pet-list-card--status-foster {
  border-color: #6B7AB5;
}

.qt-pet-list-card-link:hover .qt-pet-list-card--status-medical {
  border-color: #E05252;
}

.qt-pet-list-card-link:hover .qt-pet-list-card--status-ready {
  border-color: #3B82F6;
}

.qt-pet-list-card-link:hover .qt-pet-list-card--status-adopted {
  border-color: #22C55E;
}

.qt-pet-list-media {
  position: relative;
  height: 190px;
  background: #F9ECDE;
  overflow: hidden;
}

.qt-pet-list-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms ease;
}

.qt-pet-list-card-link:hover .qt-pet-list-media img {
  transform: scale(1.045);
}

.qt-pet-list-media-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF1E4, #EDE0D3);
}

.qt-pet-list-media-empty span {
  font-size: 76px;
}

.qt-pet-list-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  max-width: calc(100% - 28px);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: 0 10px 22px -16px rgba(33, 27, 18, 0.55);
  white-space: nowrap;
}

.qt-pet-list-badge--ready {
  background: #D2E4FF;
  color: #1E4974;
}

.qt-pet-list-badge--medical {
  background: #FFE2E2;
  color: #8B1E1E;
}

.qt-pet-list-badge--foster {
  background: #DCE2F6;
  color: #404756;
}

.qt-pet-list-badge--adopted {
  background: #DFF6E7;
  color: #166534;
}

.qt-pet-list-badge--intake {
  background: #F3E6D9;
  color: #624000;
}

.qt-pet-list-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Fixed body height so all cards align even with long names */
  min-height: 128px;
}

.qt-pet-list-name-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* Reserve space for up to 2 lines of name */
  min-height: 52px;
}

.qt-pet-list-name {
  margin: 0;
  color: #211B12;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
  /* Cap at 2 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qt-pet-list-sex {
  color: #6B5E4C;
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  flex: 0 0 auto;
}

.qt-pet-list-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: #6B5E4C;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.qt-pet-list-meta-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

.qt-pet-list-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #D6C4AE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qt-pet-list-intake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6B5E4C;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.qt-pet-list-calendar {
  color: #6B5E4C;
  font-size: 22px;
  line-height: 1;
}

.qt-pet-list-chevron {
  color: var(--pets-primary);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  flex: 0 0 auto;
}

.qt-pet-list-card--skel {
  pointer-events: none;
}

.qt-pet-list-card--skel .qt-pet-list-media {
  height: 190px;
}

@media (max-width: 980px) {
  .qt-pets-toolbar {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .qt-pets-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .qt-pets-view-toggle {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
  }

  .qt-pets-controls {
    grid-column: 1;
    grid-row: 3;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .qt-pets-active-filters {
    grid-column: 1;
    grid-row: 4;
  }

  .qt-pets-search {
    flex-basis: 100%;
  }

  .qt-pet-row {
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    padding: 10px 12px;
  }

  .qt-pet-row-photo {
    width: 48px;
    height: 48px;
  }

  .qt-pet-row-info {
    display: none;
  }

  .qt-pet-row-chevron {
    font-size: 18px;
  }

  .qt-pet-row-meta {
    font-size: 12px;
    gap: 8px;
  }

  .qt-pets-select-menu,
  .qt-pets-select-menu--status {
    flex: 1 1 180px;
  }

  .qt-pets-filter-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .qt-pets-title {
    font-size: 28px;
  }

  .qt-pets-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .qt-pets-controls {
    gap: 10px;
  }

  .qt-pets-select-menu,
  .qt-pets-select-menu--status {
    flex-basis: 100%;
  }

  /* Hide grid toggle on mobile — always show list */
  .qt-pets-view-toggle {
    display: none !important;
  }

  /* Always show list view on mobile regardless of JS state */
  .qt-pets-grid {
    display: none !important;
  }

  .qt-pets-list-view {
    display: flex !important;
    flex-direction: column;
  }

  .qt-pets-filter-btn {
    width: 100%;
  }

  .qt-pets-filter-chip {
    max-width: 100%;
  }
}

/* ── Mobile list row: clean compact style ─────────────────────── */
@media (max-width: 560px) {
  .qt-pet-row {
    grid-template-columns: 48px 1fr auto 20px;
    padding: 14px 16px;
    gap: 12px;
    border-radius: 14px;
  }

  .qt-pet-row-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .qt-pet-row-photo img {
    border-radius: 50%;
  }

  .qt-pet-row-name {
    font-size: 15px;
    gap: 6px;
  }

  .qt-pet-row-meta {
    font-size: 12px;
    gap: 4px;
  }

  /* On mobile show only: breed · status — hide age, color and extra dots */
  .qt-pet-row-meta span:nth-child(n+4) {
    display: none;
  }

  /* Hide intake date column entirely on mobile */
  .qt-pet-row-info {
    display: none;
  }

  .qt-pet-row-status {
    flex-shrink: 0;
  }

  .qt-pet-row-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* =============================================================== */
/* Pet profile                                                       */
/* =============================================================== */

.qt-profile-page {
  --profile-bg: #FFF8F3;
  --profile-card: #FFFFFF;
  --profile-line: #E9D9C7;
  --profile-muted: #756A5D;
  --profile-ink: #211B12;
  --profile-primary: #8A5A00;
  --profile-primary-strong: #6F4800;
  gap: 22px;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  color: var(--profile-ink);
}

.qt-profile-loading {
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-weight: 700;
}

.qt-profile-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--profile-line);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 22px 44px -34px rgba(33, 27, 18, 0.42);
}

.qt-profile-header-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qt-profile-header-side {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.qt-profile-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.qt-profile-back {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--profile-line);
  background: #FFFFFF;
  color: #514535;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 12px 24px -18px rgba(33, 27, 18, 0.36);
}

.qt-profile-back:hover {
  border-color: #D6C4AE;
  background: #FFF1E4;
}

.qt-profile-title-block {
  min-width: 0;
  padding-top: 1px;
}

.qt-profile-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.qt-profile-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
  color: #17120B;
}

.qt-profile-summary-line {
  margin-top: 5px;
  color: var(--profile-muted);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.qt-profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-left: 56px;
}

.qt-profile-meta-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  padding-left: 56px;
}

.qt-profile-meta-item {
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid #EFE2D1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qt-profile-meta-item:hover {
  border-color: #D6C4AE;
  box-shadow: 0 4px 12px -6px rgba(33, 27, 18, 0.12);
}

.qt-profile-meta-item--compact {
  /* compact style no longer restricts width in grid layout */
}

.qt-profile-meta-label {
  color: #9A8CA2;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qt-profile-meta-value {
  min-width: 0;
  color: #1E293B;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-profile-id {
  margin-top: 4px;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  row-gap: 2px;
}

.qt-profile-id-hash {
  color: #CBD5E1;
  font-weight: 700;
}

.qt-profile-id-sep {
  color: #CBD5E1;
  font-weight: 700;
  margin: 0 2px;
}

/* ID inline discreto debajo del nombre */
.qt-profile-id-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #B0A8BB;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

.qt-profile-id-inline-value {
  color: #C9C0D1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.qt-profile-case-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid #FED7AA;
  border-radius: 999px;
  background: #FFF7ED;
  color: #B45309;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.qt-profile-case-link:hover {
  border-color: #FDBA74;
  background: #FFEDD5;
  color: #92400E;
  text-decoration: none;
}

.qt-profile-case-link-icon {
  font-size: 10px;
  line-height: 1;
  opacity: 0.75;
}

.qt-profile-case-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  background: #F8FAFC;
  color: #64748B;
  font-size: 12px;
  font-weight: 850;
}

.qt-profile-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.qt-profile-status--adopted {
  background: #DCFCE7;
  color: #166534;
}

.qt-profile-status--adopted .qt-profile-status-dot {
  background: #22C55E;
}

.qt-profile-status--ready {
  background: #DBEAFE;
  color: #1D4ED8;
}

.qt-profile-status--ready .qt-profile-status-dot {
  background: #3B82F6;
}

.qt-profile-status--treatment {
  background: #FEF3C7;
  color: #92400E;
}

.qt-profile-status--treatment .qt-profile-status-dot {
  background: #F59E0B;
}

.qt-profile-status--intake {
  background: #F1F5F9;
  color: #475569;
}

.qt-profile-status--intake .qt-profile-status-dot {
  background: #64748B;
}

.qt-profile-status--default {
  background: #F1F5F9;
  color: #475569;
}

.qt-profile-status--default .qt-profile-status-dot {
  background: #94A3B8;
}

.qt-profile-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.qt-profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.qt-profile-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* Icon inside buttons */
.qt-btn-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.qt-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.qt-profile-btn--ghost {
  background: transparent;
  border-color: #D6C4AE;
  color: #6B5E4C;
}

.qt-profile-btn--ghost:hover {
  background: #FFF7ED;
  border-color: #B89878;
  color: #211B12;
}

.qt-profile-btn--edit {
  background: transparent;
  border-color: #D6A76A;
  color: #8A5A00;
}

.qt-profile-btn--edit:hover {
  background: #FFF7ED;
  border-color: #8A5A00;
  color: #5A3800;
  box-shadow: 0 4px 14px -6px rgba(138, 90, 0, 0.3);
  transform: translateY(-1px);
}

.qt-profile-btn--danger {
  background: transparent;
  border: 1px solid #FECACA;
  color: #C0392B;
}

.qt-profile-btn--danger:hover {
  background: #FEF2F2;
  border-color: #F87171;
  color: #991B1B;
  box-shadow: 0 4px 14px -6px rgba(185, 28, 28, 0.25);
  transform: translateY(-1px);
}

.qt-profile-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.qt-adopted-edit-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #92400E;
}

.qt-adopted-edit-toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.qt-adopted-edit-toast-msg {
  flex: 1;
  line-height: 1.4;
}

.qt-adopted-edit-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #B45309;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 150ms;
}

.qt-adopted-edit-toast-close:hover {
  opacity: 1;
}

/* ── Delete confirm modal ──────────────────────────────────────── */
.qt-delete-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.qt-delete-modal {
  width: min(460px, 100%);
  border-radius: 20px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  box-shadow: 0 32px 80px -24px rgba(15, 23, 42, 0.42);
  overflow: hidden;
}

.qt-delete-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 0;
}

.qt-delete-modal-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #FEF2F2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-delete-modal-icon {
  width: 26px;
  height: 26px;
  color: #EF4444;
}

.qt-delete-modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease;
}

.qt-delete-modal-close:hover {
  background: #E2E8F0;
  color: #1E293B;
}

.qt-delete-modal-body {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-delete-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
}

.qt-delete-modal-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #64748B;
  line-height: 1.55;
}

.qt-delete-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 22px 24px;
}

.qt-profile-delete-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
  padding: 10px 16px;
  color: #B91C1C;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ── Adoptante tab ───────────────────────────────────────────── */
.qt-profile-adoptante-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qt-profile-adoptante-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #FFF8F0 0%, #FEF3E2 100%);
  border: 1px solid #F0D9B5;
  border-radius: 14px;
  padding: 18px 20px;
}

.qt-profile-adoptante-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F0D9B5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.qt-profile-adoptante-hero-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.qt-profile-adoptante-name {
  font-size: 18px;
  font-weight: 900;
  color: #211B12;
}

.qt-profile-adoptante-badge {
  display: inline-flex;
  align-items: center;
  background: #DCFCE7;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 10px;
}

.qt-profile-adoptante-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px) {
  .qt-profile-adoptante-grid {
    grid-template-columns: 1fr;
  }
}

.qt-profile-adoptante-kv {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #FAFAF9;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 14px;
}

.qt-profile-adoptante-kv-label {
  font-size: 11px;
  font-weight: 800;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qt-profile-adoptante-kv-value {
  font-size: 14px;
  font-weight: 700;
  color: #211B12;
}

.qt-profile-adoptante-note {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-profile-adoptante-note-label {
  font-size: 11px;
  font-weight: 900;
  color: #92400E;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.qt-profile-adoptante-note p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #78350F;
  line-height: 1.5;
}

.qt-profile-adoptante-info-notice {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.4;
}

.qt-profile-btn--primary {
  background: #8A5A00;
  color: #FFFFFF;
  box-shadow: 0 12px 24px -16px rgba(138, 90, 0, 0.8);
}

.qt-profile-action-icon {
  font-size: 16px;
  line-height: 1;
}

.qt-profile-grid {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* New 2-column layout: 35% left / 65% right */
.qt-profile-grid-2col {
  display: grid;
  grid-template-columns: minmax(320px, 35fr) minmax(0, 65fr);
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.qt-profile-col-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Summary card (photo) fills ~80% of left column */
.qt-profile-col-left .qt-profile-summary {
  flex: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Photo fills the full card */
.qt-profile-col-left .qt-profile-photo {
  flex: 1;
  aspect-ratio: unset;
  min-height: 0;
  margin-bottom: 0;
}

/* Gallery card takes ~20% of left column height */
.qt-profile-col-left .qt-profile-gallery-left {
  flex: 1;
  min-height: 0;
}

.qt-profile-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Health card fills available space in right column */
.qt-profile-col-right .qt-health-card {
  flex: 1;
}

/* Responsive 2-column layout */
@media (max-width: 1024px) {
  .qt-profile-grid-2col {
    grid-template-columns: 40% 60%;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .qt-profile-grid-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .qt-profile-col-right .qt-health-card {
    min-height: auto;
  }
}

/* Legacy 3-column layout (kept for compatibility) */
.qt-profile-grid-3col {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  align-items: start;
}

.qt-profile-sidebar-left,
.qt-profile-sidebar-right,
.qt-profile-main-center {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.qt-profile-main-center {
  min-height: 600px;
}

/* Responsive 3-column layout */
@media (max-width: 1199px) {
  .qt-profile-grid-3col {
    grid-template-columns: 250px 1fr;
    gap: 24px;
  }

  .qt-profile-sidebar-right {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (max-width: 767px) {
  .qt-profile-grid-3col {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .qt-profile-sidebar-right {
    grid-column: 1;
    grid-row: auto;
  }
}

.qt-profile-side,
.qt-profile-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.qt-profile-card {
  background: var(--profile-card);
  border: 1px solid rgba(214, 196, 174, 0.8);
  border-radius: 14px;
  box-shadow: 0 14px 32px -26px rgba(33, 27, 18, 0.36);
}

.qt-profile-summary {
  padding: 12px;
}

/* Taller photo for non-adopted pets (with gallery below) */
.qt-profile-summary--with-gallery .qt-profile-photo {
  aspect-ratio: 3 / 2;
}

.qt-profile-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #F9ECDE;
  margin-bottom: 0;
}

.qt-profile-photo--clickable {
  cursor: pointer;
}

.qt-profile-photo--clickable:hover img {
  transform: scale(1.02);
}

.qt-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.qt-profile-photo-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: linear-gradient(135deg, #FFF1E4, #EDE0D3);
}

.qt-profile-photo-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #374151;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}

.qt-profile-photo-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

.qt-profile-photo-icon {
  width: 16px;
  height: 16px;
}

.qt-profile-photo-btn--loading {
  opacity: 0.72;
  cursor: progress;
}

.qt-profile-photo-error {
  margin: -6px 4px 10px;
  color: #B42318;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.qt-profile-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 2px;
}

.qt-profile-details-title {
  margin: 2px 2px 0;
  color: #6B5E4C;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qt-profile-fact {
  min-width: 0;
}

.qt-profile-fact--wide {
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px dashed rgba(214, 196, 174, 0.85);
}

.qt-profile-fact-label {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
}

.qt-profile-fact-value {
  color: #0F172A;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.qt-profile-microchip {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #0F172A;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.qt-profile-microchip--empty {
  background: #F8FAFC;
  color: #94A3B8;
  font-family: inherit;
}

.qt-profile-intake {
  padding: 14px;
}

.qt-profile-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.qt-profile-card-icon {
  color: var(--profile-primary);
  font-size: 20px;
}

.qt-profile-card-title,
.qt-profile-section-title {
  margin: 0;
  color: #211B12;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.qt-profile-intake-list {
  display: flex;
  flex-direction: column;
}

.qt-profile-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
}

.qt-profile-kv:last-child {
  border-bottom: none;
}

.qt-profile-kv-label {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 600;
}

.qt-profile-kv-value {
  color: #0F172A;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ── Adopter sidebar card ────────────────────────────────────── */
.qt-profile-adopter {
  padding: 12px;
  background: linear-gradient(180deg, #FFF8F3 0%, #FFFFFF 100%);
  border-color: #FED7AA;
}

.qt-profile-adopter-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.qt-profile-adopter-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #FFF1E4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.qt-profile-adopter-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-profile-adopter-avatar--empty {
  background: #F1F5F9;
}

.qt-profile-adopter-hero-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.qt-profile-adopter-name {
  color: #0F172A;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-profile-adopter-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-profile-adopter-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.qt-profile-adopter-row-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

.qt-profile-adopter-row-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qt-profile-adopter-row-label {
  color: #94A3B8;
  font-size: 10px;
  font-weight: 500;
}

.qt-profile-adopter-row-value {
  color: #0F172A;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── Left-side Gallery (non-adopted pets) ────────────────────── */
.qt-profile-gallery-left {
  padding: 12px;
}

.qt-profile-gallery-left-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.qt-profile-gallery-count-badge {
  background: #E2E8F0;
  color: #64748B;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.qt-profile-gallery-left-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: #94A3B8;
}

/* 6-column compact grid for small thumbnails */
.qt-profile-gallery-left-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

/* Thumbnail item - small and compact */
.qt-profile-gallery-mini-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: #F1F5F9;
}

.qt-profile-gallery-mini-item:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.qt-profile-gallery-mini-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Delete button on thumbnail */
.qt-profile-gallery-mini-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  line-height: 1;
  padding: 0;
}

.qt-profile-gallery-mini-item:hover .qt-profile-gallery-mini-delete {
  opacity: 1;
}

.qt-profile-gallery-mini-delete:hover {
  background: rgba(220, 38, 38, 1);
}

/* "+N more" indicator */
.qt-profile-gallery-left-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  aspect-ratio: 1;
}

.qt-profile-gallery-left-more:hover {
  transform: scale(1.04);
  background: rgba(0, 0, 0, 0.75);
}

/* Upload button slot */
.qt-profile-gallery-left-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px dashed #D1D5DB;
  background: #F8FAFC;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.qt-profile-gallery-left-upload:hover {
  border-color: var(--accent-color);
  background: #FFF7ED;
}

.qt-profile-gallery-left-upload-btn {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #9CA3AF;
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 0.15s ease;
}

.qt-profile-gallery-left-upload:hover .qt-profile-gallery-left-upload-btn {
  color: var(--accent-color);
}

.qt-profile-gallery-error {
  color: #DC2626;
  font-size: 12px;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #FEF2F2;
  border-radius: 8px;
}

.qt-profile-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid #E2E8F0;
  overflow-x: auto;
}

.qt-profile-tab {
  border: 0;
  background: transparent;
  color: #64748B;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-bottom-color 200ms ease;
}

.qt-profile-tab:hover {
  color: #0F172A;
}

.qt-profile-tab--active {
  color: #0F172A;
  border-bottom-color: #3B82F6;
}

.qt-profile-timeline-card {
  padding: 28px 30px 30px;
}

.qt-profile-empty-panel {
  min-height: 360px;
  padding: 42px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.qt-profile-empty-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #FFF1E4;
  color: #8A5A00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 900;
}

.qt-profile-empty-panel p {
  margin: 0;
  max-width: 420px;
  color: var(--profile-muted);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.qt-profile-timeline {
  position: relative;
  margin-top: 24px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.qt-profile-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(214, 196, 174, 0.75);
}

.qt-profile-timeline-item {
  position: relative;
}

.qt-profile-timeline-dot {
  position: absolute;
  left: -27px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid #FFFFFF;
  background: #B8AA98;
  box-shadow: 0 0 0 1px rgba(214, 196, 174, 0.75);
}

.qt-profile-timeline-item--active .qt-profile-timeline-dot {
  background: #D9961A;
}

.qt-profile-timeline-body {
  min-width: 0;
}

.qt-profile-timeline-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.qt-profile-timeline-title {
  margin: 0;
  color: #211B12;
  font-size: 15px;
  font-weight: 900;
}

.qt-profile-timeline-date {
  color: var(--profile-muted);
  font-size: 13px;
  font-weight: 700;
}

.qt-profile-timeline-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #FFF8F3;
  border: 1px solid #F1DFCC;
}

.qt-profile-timeline-note p {
  margin: 0;
  color: #514535;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

.qt-profile-timeline-media {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #334155;
  color: #FF9F1C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}

.qt-profile-timeline-tags {
  margin-top: 12px;
}

.qt-profile-timeline-tag {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 7px;
  background: #F3E6D9;
  color: #514535;
  font-size: 12px;
  font-weight: 800;
}

.qt-profile-medical-panel {
  padding: 22px;
  background: #FFFFFF;
}

.qt-profile-medical-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.qt-profile-medical-head p {
  margin: 4px 0 0;
  color: #94A3B8;
  font-size: 13px;
  font-weight: 500;
}

.qt-profile-medical-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.qt-profile-medical-count--limit {
  background: #FEE2E2;
  color: #991B1B;
}

/* Empty state */
.qt-profile-medical-empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 42px 30px;
}

.qt-profile-medical-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #F8FAFC;
  color: #CBD5E1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.qt-profile-medical-empty h2 {
  margin: 0;
  color: #0F172A;
  font-size: 20px;
  font-weight: 800;
}

.qt-profile-medical-empty p {
  margin: 0;
  color: #94A3B8;
  font-size: 14px;
  line-height: 1.5;
  max-width: 360px;
}

/* Skeleton loaders */
.qt-profile-medical-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.qt-profile-medical-skeleton-row {
  height: 56px;
  border-radius: 10px;
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
  animation: qtSkeletonSlide 1.2s ease-in-out infinite;
}

@keyframes qtSkeletonSlide {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.qt-profile-medical-list {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 28px;
}

/* Timeline vertical line */
.qt-profile-medical-list::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #E2E8F0;
}

.qt-profile-medical-entry {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  cursor: default;
  transition: background-color 150ms ease;
  border-radius: 8px;
  margin-left: -8px;
  padding-left: 8px;
}

.qt-profile-medical-entry:hover {
  background: #FAFAF9;
}

/* Left accent bar on hover by type */
.qt-profile-medical-entry--vaccine:hover {
  box-shadow: inset 3px 0 0 0 #10B981;
}

.qt-profile-medical-entry--medication:hover {
  box-shadow: inset 3px 0 0 0 #F59E0B;
}

.qt-profile-medical-entry--sterilization:hover {
  box-shadow: inset 3px 0 0 0 #8B5CF6;
}

.qt-profile-medical-entry--weight:hover {
  box-shadow: inset 3px 0 0 0 #3B82F6;
}

.qt-profile-medical-entry--lab:hover {
  box-shadow: inset 3px 0 0 0 #64748B;
}

/* Expandable cursor */
.qt-profile-medical-entry:has(.qt-profile-medical-entry-chevron) {
  cursor: pointer;
}

.qt-profile-medical-entry-timeline {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.qt-profile-medical-entry-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #CBD5E1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

.qt-profile-medical-entry-dot-icon {
  font-size: 14px;
  line-height: 1;
}

/* Type-specific dot colors */
.qt-profile-medical-entry--vaccine .qt-profile-medical-entry-dot {
  border-color: #10B981;
}

.qt-profile-medical-entry--medication .qt-profile-medical-entry-dot {
  border-color: #F59E0B;
}

.qt-profile-medical-entry--sterilization .qt-profile-medical-entry-dot {
  border-color: #8B5CF6;
}

.qt-profile-medical-entry--weight .qt-profile-medical-entry-dot {
  border-color: #3B82F6;
}

.qt-profile-medical-entry--lab .qt-profile-medical-entry-dot {
  border-color: #64748B;
}

.qt-profile-medical-entry-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-profile-medical-entry-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.qt-profile-medical-entry-title {
  margin: 0;
  color: #0F172A;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

.qt-profile-medical-entry-date {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.qt-profile-medical-entry-meta {
  color: #64748B;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.qt-profile-medical-entry-chevron {
  display: flex;
  justify-content: flex-end;
  color: #CBD5E1;
  font-size: 12px;
  margin-top: 2px;
  transition: color 150ms ease;
}

.qt-profile-medical-entry:hover .qt-profile-medical-entry-chevron {
  color: #94A3B8;
}

.qt-profile-medical-entry--expanded .qt-profile-medical-entry-chevron {
  color: #94A3B8;
}

/* Expandable content */
.qt-profile-medical-entry-expand {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 250ms ease, opacity 200ms ease, margin-top 200ms ease;
}

.qt-profile-medical-entry-expand--open {
  max-height: 800px;
  opacity: 1;
  margin-top: 8px;
}

.qt-profile-medical-description {
  margin: 8px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
}

.qt-profile-medical-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

.qt-profile-medical-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.qt-profile-medical-detail-label {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.qt-profile-medical-detail-value {
  color: #0F172A;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.qt-profile-medical-attachments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.qt-profile-medical-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 5px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: none;
}

.qt-profile-medical-attachment--btn {
  font-family: inherit;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.qt-profile-medical-attachment:hover {
  background: #F1F5F9;
}

.qt-profile-medical-attachment-icon {
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.qt-profile-medical-attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-profile-gallery-panel {
  padding: 22px;
}

/* Compact gallery for new layout */
.qt-profile-gallery-compact {
  padding: 20px;
}

.qt-profile-gallery-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.qt-profile-gallery-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.qt-profile-gallery-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.qt-profile-gallery-upload {
  min-height: 38px;
  border: 1px solid #D9961A;
  border-radius: 999px;
  padding: 0 14px;
  background: #FFF7ED;
  color: #8A5A00;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.qt-profile-gallery-upload:hover {
  background: #FFEDD5;
  border-color: #F59E0B;
  box-shadow: 0 10px 18px -14px rgba(129, 86, 0, 0.45);
  transform: translateY(-1px);
}

.qt-profile-gallery-upload:disabled,
.qt-profile-gallery-upload--loading {
  opacity: 0.72;
  cursor: progress;
  transform: none;
}

.qt-profile-gallery-error {
  margin: 0 0 14px;
  border: 1px solid #FECACA;
  border-radius: 12px;
  background: #FEF2F2;
  color: #B91C1C;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 850;
}

.qt-profile-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.qt-profile-gallery-item {
  margin: 0;
  padding: 10px;
  border: 1px solid #F1DFCC;
  border-radius: 12px;
  background: #FFF8F3;
  position: relative;
}

.qt-profile-gallery-item--primary {
  border-color: #D9961A;
  box-shadow: 0 14px 26px -24px rgba(129, 86, 0, 0.6);
}

.qt-profile-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.qt-profile-gallery-delete-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.9);
  color: #D93B3B;
  border: 1px solid rgba(217, 59, 59, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  z-index: 2;
  padding: 0;
  padding-bottom: 2px;
}

.qt-profile-gallery-delete-btn:hover {
  background: #D93B3B;
  color: white;
  transform: scale(1.1);
}

.qt-profile-gallery-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.qt-profile-gallery-img-wrap {
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 6px;
}

.qt-profile-gallery-img-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.qt-profile-gallery-img-zoom-icon {
  font-size: 22px;
  opacity: 0;
  transition: opacity 200ms ease;
  transform: scale(0.8);
  transition: opacity 200ms ease, transform 200ms ease;
}

.qt-profile-gallery-img-wrap:hover .qt-profile-gallery-img-overlay {
  background: rgba(0, 0, 0, 0.28);
}

.qt-profile-gallery-img-wrap:hover .qt-profile-gallery-img-zoom-icon {
  opacity: 1;
  transform: scale(1);
}

.qt-profile-gallery-delete-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.qt-profile-gallery-delete-tooltip {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  padding: 2px 6px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 150ms ease;
}

.qt-profile-gallery-delete-wrap:hover .qt-profile-gallery-delete-tooltip {
  opacity: 1;
}

.qt-profile-gallery-item figcaption {
  margin-top: 8px;
  color: #514535;
  font-size: 12px;
  font-weight: 900;
}

.qt-profile-gallery-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #6B5E4C;
  text-align: center;
  background: #FFF8F3;
  border: 1px dashed #D6C4AE;
  border-radius: 12px;
}

/* ── Lightbox / photo viewer ─────────────────────────────────── */
.qt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: qtFadeIn 180ms ease;
  cursor: zoom-out;
}

.qt-lightbox-inner {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.qt-lightbox-inner img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
  display: block;
}

.qt-lightbox-close {
  position: absolute;
  top: -44px;
  right: -8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, transform 150ms ease;
}

.qt-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.1);
}

.qt-profile-load-more {
  width: 100%;
  margin-top: 16px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid #D6C4AE;
  background: #FFFFFF;
  color: #8A5A00;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
}

.qt-profile-load-more:hover {
  background: #FFF1E4;
}

@media (max-width: 980px) {
  .qt-profile-grid {
    grid-template-columns: 1fr;
  }

  .qt-profile-side {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }
}

@media (max-width: 900px) {
  .qt-profile-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .qt-profile-header {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
    border-radius: 14px;
  }

  /* Actions move inline next to the title area on mobile */
  .qt-profile-header-side {
    justify-content: flex-start;
  }

  .qt-profile-actions {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .qt-profile-actions .qt-profile-btn {
    flex: 1;
    min-height: 36px;
    font-size: 13px;
  }

  .qt-profile-title-wrap {
    gap: 10px;
  }

  .qt-profile-title {
    font-size: 26px;
    line-height: 1.15;
  }

  .qt-profile-summary-line {
    font-size: 13px;
  }

  .qt-profile-id-inline {
    font-size: 10px;
  }

  .qt-profile-chip-row,
  .qt-profile-meta-row {
    padding-left: 0;
  }

  .qt-profile-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .qt-profile-meta-item {
    min-height: 52px;
    padding: 9px 12px;
    border-radius: 12px;
  }

  /* On mobile, left column doesn't need to stretch — stack naturally */
  .qt-profile-col-left .qt-profile-summary {
    flex: none;
  }

  .qt-profile-col-left .qt-profile-photo {
    aspect-ratio: 4 / 3;
    flex: none;
  }

  .qt-profile-col-left .qt-profile-gallery-left {
    flex: none;
  }

  .qt-profile-side {
    display: flex;
  }

  .qt-profile-facts {
    grid-template-columns: 1fr;
  }

  .qt-profile-timeline-card {
    padding: 22px 18px;
  }

  .qt-profile-medical-panel {
    padding: 20px 16px;
  }

  .qt-profile-medical-list {
    padding-left: 24px;
  }

  .qt-profile-medical-list::before {
    left: 9px;
  }

  .qt-profile-medical-entry {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    margin-left: -6px;
    padding-left: 6px;
  }

  .qt-profile-medical-entry-dot {
    width: 20px;
    height: 20px;
  }

  .qt-profile-medical-entry-dot-icon {
    font-size: 12px;
  }

  .qt-profile-medical-entry-title {
    font-size: 15px;
  }

  .qt-profile-medical-entry-meta {
    font-size: 11px;
  }

  .qt-profile-tab {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* =============================================================== */
/* Pet edit                                                         */
/* =============================================================== */

.qt-edit-page {
  max-width: 1320px;
}

.qt-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.qt-edit-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--profile-line);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 22px 44px -34px rgba(33, 27, 18, 0.42);
}

.qt-edit-back {
  align-self: start;
}

.qt-edit-hero-main {
  min-width: 0;
}

.qt-edit-hero-title {
  margin: 4px 0 8px;
  color: #17120B;
  font-size: 42px;
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: 0;
}

.qt-edit-hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: #756A5D;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.qt-edit-hero-dot {
  color: #C3B4A2;
}

.qt-edit-hero-case {
  color: #B45309;
}

.qt-edit-hero-meta {
  min-width: 220px;
  max-width: 320px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #EFE2D1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.qt-edit-hero-meta-label {
  color: #9A8CA2;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qt-edit-hero-meta-value {
  min-width: 0;
  color: #1E293B;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-edit-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.qt-edit-card {
  padding: 26px;
}

.qt-edit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.qt-edit-section-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #FFF1E4;
  color: #8A5A00;
  font-size: 12px;
  font-weight: 900;
}

.qt-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 20px;
  overflow: visible;
}

.qt-edit-readonly {
  min-height: 54px;
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 20px;
  font-size: 15px;
  font-weight: 800;
}

.qt-edit-readonly-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-edit-readonly-badge {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #E2E8F0;
  color: #64748B;
  font-size: 11px;
  font-weight: 900;
}

.qt-edit-select {
  position: relative;
  z-index: 1;
}

.qt-edit-select--open {
  z-index: 30;
}

.qt-edit-select-trigger {
  min-height: 54px;
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 0 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.qt-edit-select-trigger:hover {
  background: #FFFFFF;
  border-color: #D6C4AE;
}

.qt-edit-select--open .qt-edit-select-trigger,
.qt-edit-select-trigger:focus {
  background: #FFFFFF;
  border-color: #D9961A;
  box-shadow: 0 0 0 3px rgba(217, 150, 26, 0.16);
  outline: 0;
}

.qt-edit-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-edit-select-chevron {
  color: #7C5A23;
  font-size: 18px;
  line-height: 1;
}

.qt-edit-select-options {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 6px;
  border: 1px solid #E8D8C3;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 18px 42px -26px rgba(33, 27, 18, 0.55);
}

.qt-edit-select-option {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #211B12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.qt-edit-select-option:hover,
.qt-edit-select-option--selected {
  background: #FFF1E4;
  color: #8A5A00;
}

.qt-edit-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-edit-select-check {
  color: #8A5A00;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.qt-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.qt-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .qt-edit-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .qt-edit-hero-meta {
    grid-column: 2;
    justify-self: stretch;
    max-width: none;
  }

  .qt-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .qt-edit-hero {
    grid-template-columns: 1fr;
  }

  .qt-edit-hero-title {
    font-size: 32px;
  }

  .qt-edit-hero-meta {
    grid-column: 1;
  }

  .qt-edit-grid {
    grid-template-columns: 1fr;
  }

  .qt-edit-card {
    padding: 20px;
  }

  .qt-edit-actions .qt-btn {
    width: 100%;
  }
}

.qt-case-card--skel {
  background: #fff;
  pointer-events: none;
}

.qt-case-card--skel::before {
  display: none;
}

.qt-case-card--closed {
  background: #FAFAFA;
  border-color: #E5E7EB;
}

.qt-case-card--closed::before {
  background: linear-gradient(90deg, #9CA3AF 0%, #6B7280 100%);
}

.qt-case-card-link:hover .qt-case-card--closed {
  border-color: #D1D5DB;
}

.qt-case-card-duration {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 8px;
  width: fit-content;
}

.qt-case-card-duration-icon {
  font-size: 12px;
}

/* ================================================================
   Closed case summary page
   ================================================================ */

.qt-closed-summary {
  padding: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Hero banner ─────────────────────────────────────────────── */
.qt-closed-hero-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  border-radius: 18px;
  padding: 24px 28px;
}

.qt-closed-hero-icon {
  font-size: 40px;
  line-height: 1;
  flex-shrink: 0;
}

.qt-closed-hero-title {
  font-size: 20px;
  font-weight: 900;
  color: #064E3B;
  line-height: 1.2;
  margin-bottom: 6px;
}

.qt-closed-hero-sub {
  font-size: 14px;
  color: #047857;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Stats row ───────────────────────────────────────────────── */
.qt-closed-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.qt-closed-stat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.08);
}

.qt-closed-stat-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.qt-closed-stat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.qt-closed-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.qt-closed-stat-value {
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  word-break: break-word;
}

/* ── Section title ───────────────────────────────────────────── */
.qt-closed-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ── Pet grid ────────────────────────────────────────────────── */
.qt-closed-pets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}

.qt-closed-pet-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.qt-closed-pet-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 14px;
  gap: 12px;
  box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.qt-closed-pet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.14);
}

.qt-closed-pet-photo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}

.qt-closed-pet-photo img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #D1FAE5;
  display: block;
}

.qt-closed-pet-photo-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.qt-closed-pet-adopted-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #16A34A;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.qt-closed-pet-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  text-align: center;
}

.qt-closed-pet-name {
  font-size: 13px;
  font-weight: 800;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.qt-closed-pet-species {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
}

.qt-closed-pet-species-icon {
  font-size: 13px;
}

/* Skeletons (loading state) */
.qt-skeleton {
  background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: qtShimmer 1.4s ease-in-out infinite;
}

@keyframes qtShimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.qt-skeleton--pill {
  width: 90px;
  height: 18px;
  border-radius: 999px;
}

.qt-skeleton--title {
  width: 60%;
  height: 24px;
  margin-top: 6px;
}

.qt-skeleton--line {
  width: 100%;
  height: 12px;
  margin-top: 8px;
}

.qt-skeleton--short {
  width: 35%;
}

.qt-skeleton--avatar {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.qt-pet-card--skel {
  box-shadow: none;
}

/* Skeletons for drawer sections (foster, medical, comments) */
.qt-drawer-skeleton-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-drawer-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.qt-drawer-skeleton-title {
  width: 40%;
  height: 18px;
  border-radius: 6px;
}

.qt-drawer-skeleton-count {
  width: 70px;
  height: 14px;
  border-radius: 999px;
}

.qt-drawer-skeleton-line {
  width: 100%;
  height: 12px;
  border-radius: 6px;
}

.qt-drawer-skeleton-line--short {
  width: 65%;
}

.qt-drawer-skeleton-line--xshort {
  width: 40%;
}

.qt-drawer-skeleton-select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
}

.qt-drawer-skeleton-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-drawer-skeleton-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.qt-drawer-skeleton-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qt-drawer-skeleton-comment-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Skeleton for full pet profile page loading */
.qt-profile-skeleton-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0 16px;
}

.qt-profile-skeleton-title {
  width: 50%;
  height: 32px;
  border-radius: 8px;
}

.qt-profile-skeleton-meta {
  width: 35%;
  height: 14px;
  border-radius: 6px;
}

.qt-profile-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #fff;
}

.qt-profile-skeleton-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}

.qt-profile-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.qt-profile-skeleton-fact-label {
  width: 40%;
  height: 10px;
  border-radius: 4px;
}

.qt-profile-skeleton-fact-value {
  width: 80%;
  height: 16px;
  border-radius: 4px;
  margin-top: 4px;
}

/* Floating logos used in /pending screen */
.qt-float-badge {
  animation: qtFloat 4s ease-in-out infinite;
}

.qt-float-badge:nth-child(3) {
  animation-delay: 1s;
}

@keyframes qtFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================== */
/* Case detail — Kanban + slide-out drawer                          */
/* =============================================================== */

.qt-case-page {
  /* Give the board room to breathe and prevent horizontal jitter when
     the drawer mounts/unmounts. */
  min-height: calc(100vh - 64px);
  position: relative;
  gap: 12px;
}

/* ---- Hero ---------------------------------------------------------- */

.qt-case-header-shell {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.qt-case-back-slot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

.qt-case-back-button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.32);
  transition: transform 140ms ease, border-color 140ms ease,
    color 140ms ease, box-shadow 140ms ease;
}

.qt-case-back-button:hover {
  color: #0F172A;
  border-color: #CBD5E1;
  transform: translateX(-1px);
  box-shadow: 0 16px 32px -24px rgba(15, 23, 42, 0.38);
}

.qt-case-header-body {
  flex: 1 1 auto;
  min-width: 0;
}

.qt-case-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 32px 26px;
  border-color: #E2E8F0;
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.58) 0%, rgba(255, 255, 255, 0) 38%),
    #FFFFFF;
  box-shadow: 0 20px 48px -34px rgba(15, 23, 42, 0.35);
}

.qt-case-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #F59E0B, #FBBF24);
}

.qt-case-hero-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.qt-case-inline-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
}

.qt-case-inline-back:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.qt-case-inline-back>span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qt-case-inline-back-icon {
  font-size: 15px;
  line-height: 1;
}

.qt-case-inline-back-label {
  font-size: 11px;
}

.qt-case-hero-main {
  flex: 1 1 480px;
  min-width: 280px;
}

/* Progress bar — dual segment */
.qt-progress-wrap {
  margin-top: 22px;
}

.qt-progress-track-dual {
  display: flex;
  height: 8px;
  background: #E5E7EB;
  border-radius: 999px;
  overflow: hidden;
  gap: 2px;
}

.qt-progress-fill-adopted {
  height: 100%;
  background: linear-gradient(90deg, #16A34A, #4ADE80);
  border-radius: 999px 0 0 999px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.qt-progress-fill-ready {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 0 999px 999px 0;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

/* When only one segment exists, give it full rounded corners */
.qt-progress-fill-adopted:only-child,
.qt-progress-fill-ready:only-child {
  border-radius: 999px;
}

.qt-progress-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.qt-progress-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qt-progress-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.qt-progress-legend-dot--adopted {
  background: #16A34A;
}

.qt-progress-legend-dot--ready {
  background: #F59E0B;
}

.qt-progress-legend-label {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  white-space: nowrap;
}

.qt-progress-legend-label--adopted {
  color: #15803D;
  font-weight: 700;
}

/* ---- Bubbles row --------------------------------------------------- */

.qt-pet-filter {
  border: 1px solid #E6EAF0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
  padding: 8px;
  box-shadow: 0 10px 26px -24px rgba(15, 23, 42, 0.28);
}

.qt-pet-filter--collapsed {
  padding: 6px 8px;
}

.qt-pet-filter-head {
  display: flex;
  align-items: center;
}

.qt-pet-filter-toggle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.qt-pet-filter-chevron {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: #64748B;
  background: #F1F5F9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.qt-pet-filter-title {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qt-pet-filter-count {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.qt-pet-filter-focus {
  margin-left: auto;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-bubbles {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px 0;
  scrollbar-width: thin;
}

.qt-bubble {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  background: #FFFFFF;
  border: 1px solid #E6EAF0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  color: #1F2937;
  box-shadow: none;
}

.qt-bubble:hover {
  border-color: #D7DCE3;
  background: #F8FAFC;
  transform: none;
}

.qt-bubble--active {
  border-color: #FF9F1C;
  background: #FFFBF2;
  box-shadow: inset 0 0 0 1px rgba(255, 159, 28, 0.12);
}

.qt-bubble img,
.qt-bubble-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #1B2A4E;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.qt-bubble-name {
  font-size: 12px;
  font-weight: 600;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-bubble-all {
  padding-left: 11px;
}

.qt-bubble-all-label {
  font-size: 12px;
  font-weight: 600;
}

.qt-bubble--add {
  padding: 6px 12px;
  background: #FFF7ED;
  border-color: #FED7AA;
  color: #B45309;
  box-shadow: none;
}

.qt-bubble--add:hover {
  background: #FFEDD5;
  border-color: #FDBA74;
  filter: none;
  box-shadow: none;
}

.qt-bubble-add-label {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .qt-case-header-shell {
    gap: 10px;
  }

  .qt-case-back-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .qt-case-hero {
    padding: 24px 20px 22px;
  }

  .qt-case-hero-main {
    min-width: 0;
  }

  .qt-progress-track-dual {
    width: 100%;
  }
}

/* ---- Kanban board -------------------------------------------------- */

.qt-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  align-items: stretch;
  gap: 12px;
  height: clamp(440px, calc(100vh - 430px), 720px);
  min-height: 440px;
}

/* On smaller laptops, 5 cols × 200px would force horizontal scroll. Drop
   to a horizontally-scrolling row of fixed-width columns instead — the
   user can swipe through them while still seeing the case meta above. */
@media (max-width: 1280px) {
  .qt-kanban {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .qt-kanban-col {
    flex: 0 0 248px;
  }
}

.qt-kanban-col {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease, background 0.18s ease,
    box-shadow 0.18s ease;
}

.qt-kanban-col--hot {
  border-color: #F59E0B;
  background: #FFF8EE;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.16);
}

/* Active drop target while a card is being dragged over it. Distinct
   from `--hot` (which is reserved for server-driven states). Uses a
   dashed accent border + tinted fill so it's obvious without being
   loud, and a subtle "breathing" pulse to telegraph drop-ability. */
.qt-kanban-col--drag-over {
  border-color: #10B981;
  border-style: dashed;
  background: #ECFDF5;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25),
    0 6px 18px -14px rgba(16, 185, 129, 0.5);
  animation: qtColPulse 1.2s ease-in-out infinite;
}

@keyframes qtColPulse {

  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.22),
      0 6px 18px -14px rgba(16, 185, 129, 0.4);
  }

  50% {
    box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.35),
      0 10px 22px -14px rgba(16, 185, 129, 0.6);
  }
}

/* While a drag is active, the column body and its empty state should
   feel more "receptive". Pointer-events on descendants are forwarded
   to the column so dragleave/dragenter work consistently regardless
   of which child the cursor happens to be over. */
.qt-kanban-col--drag-over .qt-kanban-col-empty {
  border-color: #10B981;
  color: #065F46;
  background: rgba(16, 185, 129, 0.06);
}

.qt-kanban-col-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid #DDE3EA;
}

.qt-kanban-col-icon {
  display: none;
}

/* icons removed by request */
.qt-kanban-col-title {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qt-kanban-col-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  background: #FFFFFF;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qt-kanban-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.qt-kanban-col-empty {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9CA3AF;
  text-align: center;
  padding: 18px 8px;
  font-style: italic;
}

/* ---- Kanban card --------------------------------------------------- */

.qt-kanban-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 12px;
  cursor: grab;
  border: 1px solid #E6E8EC;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, opacity 0.15s ease;
  user-select: none;
  /* "Landing" animation — fires every time Jaspr inserts the card DOM
     node (i.e. on initial render AND on every move between columns,
     since a new parent triggers a reinsertion). Kept short + snappy so
     dragging a bunch of cards in rapid succession doesn't get noisy. */
  animation: qtCardLanding 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes qtCardLanding {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.94);
  }

  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.qt-kanban-card:hover {
  transform: translateY(-1px);
  border-color: #D7DCE3;
  box-shadow: 0 8px 20px -16px rgba(15, 23, 42, 0.26);
}

.qt-kanban-card:active {
  cursor: grabbing;
}

/* Source card while being dragged. Stronger ghost so the operator
   clearly sees the origin while the browser also renders its native
   drag image. Transitions are suppressed during the drag to avoid
   jittery tilt/scale interpolation on every dragover tick. */
.qt-kanban-card--dragging {
  opacity: 0.4;
  transform: rotate(-1.8deg) scale(0.97);
  box-shadow: 0 10px 22px -14px rgba(15, 23, 42, 0.35);
  transition: none;
  animation: none;
}

.qt-kanban-card--skel {
  pointer-events: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {

  .qt-kanban-card,
  .qt-kanban-col--drag-over {
    animation: none !important;
  }
}

.qt-kanban-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qt-kanban-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #FFF1DC;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.qt-kanban-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-kanban-card-icon {
  font-size: 22px;
}

.qt-kanban-card-title-block {
  min-width: 0;
  flex: 1;
}

.qt-kanban-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-kanban-card-sub {
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
}

.qt-kanban-card-foot {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1B2A4E;
  background: #F4F5F7;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* ---- Case configuration modal -------------------------------------- */

.qt-case-config-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
}

.qt-case-config-modal {
  width: min(620px, 100%);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  box-shadow: 0 30px 80px -36px rgba(15, 23, 42, 0.48);
}

.qt-case-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #E5E7EB;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.74)),
    #FFFFFF;
}

.qt-case-config-eyebrow {
  color: #EA580C;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qt-case-config-title {
  margin: 3px 0 0;
  color: #0F172A;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.qt-case-config-sub {
  max-width: 440px;
  margin: 6px 0 0;
  color: #64748B;
  font-size: 13px;
  line-height: 1.5;
}

.qt-case-config-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
  cursor: pointer;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.qt-case-config-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.qt-case-config-body {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
}

.qt-case-config-error {
  border: 1px solid #FECACA;
  border-radius: 12px;
  background: #FEF2F2;
  color: #991B1B;
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 800;
}

.qt-case-delete-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  border: 1px solid #FECACA;
  border-radius: 14px;
  background: #FFF7F7;
  padding: 14px;
}

.qt-case-delete-copy {
  min-width: 0;
}

.qt-case-delete-title {
  color: #991B1B;
  font-size: 13px;
  font-weight: 900;
}

.qt-case-delete-sub {
  margin: 3px 0 0;
  color: #7F1D1D;
  font-size: 12px;
  line-height: 1.45;
}

.qt-case-delete-btn {
  flex-shrink: 0;
  border-color: #FCA5A5;
  background: #FFFFFF;
  color: #B91C1C;
}

.qt-case-delete-btn:hover:not(:disabled) {
  background: #FEF2F2;
  border-color: #F87171;
}

.qt-case-delete-btn--confirm {
  background: #DC2626;
  border-color: #DC2626;
  color: #FFFFFF;
}

.qt-case-delete-btn--confirm:hover:not(:disabled) {
  background: #B91C1C;
  border-color: #B91C1C;
}

.qt-case-config-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 22px;
  border-top: 1px solid #E5E7EB;
  background: #FFFFFF;
}

/* ---- Slide-out drawer + overlay ----------------------------------- */

.qt-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.qt-drawer-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

/*
 * Centered modal (was a right-side drawer). Switched away from the
 * slide-in pattern because `transform: translateX(100%)` on a
 * `right: 0` fixed element parks the bounding box outside the viewport,
 * which the browser counts toward document scroll size — produced a
 * persistent phantom horizontal scrollbar / white strip that took 3
 * rounds of CSS hacks to even partially mitigate. A centered modal has
 * the panel always within the viewport (just hidden via opacity), so
 * the off-canvas math never happens.
 *
 * Kept the `.qt-drawer*` class names so the Dart side doesn't change.
 */
.qt-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Always centered. When closed we just dial down opacity + scale. */
  transform: translate(-50%, -50%) scale(0.96);
  width: min(980px, 94vw);
  max-width: 980px;
  height: min(84vh, 820px);
  max-height: min(84vh, 820px);
  background: #FFFFFF;
  border-radius: 24px;
  z-index: 100;
  box-shadow: 0 32px 80px -20px rgba(15, 23, 42, 0.36),
    0 8px 24px -8px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-drawer--open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.qt-drawer-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.qt-drawer-header {
  flex: 0 0 auto;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #FFFFFF;
}

.qt-drawer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: #FF9F1C;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-drawer-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1B2A4E;
  line-height: 1.2;
}

.qt-drawer-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.qt-drawer-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qt-pet-view-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #D97706;
  text-decoration: none;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #FDBA74;
  background: #FFF7ED;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  margin-left: 4px;
}

.qt-pet-view-profile-link:hover {
  background: #FFEDD5;
  border-color: #F59E0B;
  color: #B45309;
}

.qt-status-select-wrap,
.qt-status-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid #FDBA74;
  background: linear-gradient(180deg, #FFF7ED, #FFEDD5);
  color: #9A3412;
  box-shadow: 0 10px 20px -16px rgba(245, 158, 11, 0.9);
}

.qt-status-display-icon {
  flex-shrink: 0;
  color: #C2410C;
}

.qt-status-select-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #C2410C;
}

.qt-status-select {
  max-width: 188px;
  border: 0;
  background-color: transparent;
  color: #111827;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  outline: none;
  cursor: pointer;
}

.qt-status-select:focus {
  color: #7C2D12;
}

.qt-status-display-value {
  max-width: 190px;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-drawer-close {
  background: #F4F5F7;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6B7280;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.qt-drawer-close:hover {
  background: #E5E7EB;
  color: #1F2937;
  transform: rotate(90deg);
}

.qt-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
}

/* ── 2-column body layout ──────────────────────────────────────── */
.qt-drawer-body-2col {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  overflow: hidden;
}

.qt-drawer-col-left {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 22px 28px 26px;
  border-right: 1px solid #F1F5F9;
  /* Subtle custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}

.qt-drawer-col-left::-webkit-scrollbar {
  width: 5px;
}

.qt-drawer-col-left::-webkit-scrollbar-track {
  background: transparent;
}

.qt-drawer-col-left::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 10px;
}

.qt-drawer-col-right {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 22px 28px 22px;
  background: #FAFBFC;
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}

.qt-drawer-col-right::-webkit-scrollbar {
  width: 5px;
}

.qt-drawer-col-right::-webkit-scrollbar-track {
  background: transparent;
}

.qt-drawer-col-right::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 10px;
}

@media (max-width: 760px) {
  .qt-drawer-body-2col {
    grid-template-columns: 1fr;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .qt-drawer-col-left,
  .qt-drawer-col-right {
    overflow: unset;
    padding: 18px 18px 20px;
    border-right: none;
  }

  .qt-drawer-col-right {
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
  }
}

.qt-drawer-footer {
  flex: 0 0 auto;
  position: relative;
  padding: 14px 24px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  background: #FFFFFF;
  flex-wrap: wrap;
  box-shadow: 0 -8px 16px -8px rgba(15, 23, 42, 0.08);
  z-index: 1;
}

.qt-drawer-footer .qt-btn {
  flex: 0 1 auto;
  min-width: 160px;
}

/* Segmented buttons inside the drawer get tight — with 5 status options
   the default flex row wraps awkwardly (4 + 1 lonely button on row 2).
   A grid with auto-fit gives a balanced 3+2 layout at ~440px width. */
.qt-drawer-pane .qt-segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.qt-drawer-pane .qt-segmented-btn {
  margin: 0;
  justify-content: center;
}

/* ── Bio edit mini-button ──────────────────────────────────────── */
.qt-bio-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: transparent;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  margin-top: 8px;
}

.qt-bio-edit-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #334155;
}

.qt-bio-edit-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.qt-bio-edit-label {
  line-height: 1;
}

/* ── Foster coming-soon placeholder ───────────────────────────── */
.qt-foster-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  border: 1.5px dashed #E2E8F0;
  border-radius: 12px;
  background: #FAFAFA;
  text-align: center;
}

.qt-foster-cs-icon {
  width: 28px;
  height: 28px;
  color: #94A3B8;
}

.qt-foster-cs-title {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.01em;
}

.qt-foster-cs-sub {
  font-size: 12px;
  color: #94A3B8;
  font-weight: 400;
}

/* ── Kanban drawer header (qt-kdh) ─────────────────────────────── */
.qt-kdh {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #F8F9FF;
  /* matches prototipo surface-container */
  border-bottom: 1px solid #E5E7EB;
}

.qt-kdh-avatar {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.qt-kdh-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qt-kdh-info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-kdh-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qt-kdh-name {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: #0B1C30;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* status pill inline with name */
.qt-kdh-name-row .qt-status-display {
  flex-shrink: 0;
}

/* "Mestizo · Macho · 2 Años" subtitle */
.qt-kdh-subtitle {
  margin: 0;
  font-size: 14px;
  color: #534434;
  font-weight: 400;
}

.qt-kdh-foster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.qt-kdh-foster-label {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}

.qt-kdh-foster-remove {
  border: none;
  background: none;
  color: #EF4444;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 130ms ease;
}

.qt-kdh-foster-remove:hover {
  background: #FEF2F2;
}

/* Right slot: "Ver perfil" button + close */
.qt-kdh-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

/* "Ver perfil" — amber filled button, like prototype "Guardar Cambios" */
.qt-kdh-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #855300;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px -2px rgba(133, 83, 0, 0.35);
  transition: background 130ms ease, box-shadow 130ms ease;
  white-space: nowrap;
}

.qt-kdh-save-btn:hover {
  background: #6D4300;
  box-shadow: 0 4px 14px -4px rgba(133, 83, 0, 0.45);
}

.qt-kdh-save-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.qt-kdh-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #D8C3AD;
  background: #FFFFFF;
  color: #534434;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 130ms ease, color 130ms ease;
}

.qt-kdh-close:hover {
  background: #F1F5F9;
  color: #0F172A;
}

/* ── Panel label + edit button (shared across bio, medical, comments) */
.qt-panel-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #534434;
}

.qt-panel-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qt-panel-label-icon {
  width: 15px;
  height: 15px;
  color: #F59E0B;
  flex-shrink: 0;
}

/* "✏ Editar" button — top-right of section cards */
.qt-panel-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: #855300;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease;
  margin-left: auto;
}

.qt-panel-edit-btn:hover {
  color: #F59E0B;
  text-decoration: underline;
}

.qt-panel-edit-btn .qt-bio-edit-icon {
  width: 14px;
  height: 14px;
}

/* ---- Pet identity strip in edit drawer ---------------------------- */

.qt-pet-header-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.qt-pet-header-mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #FFF1DC;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  overflow: hidden;
}

.qt-pet-header-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-foster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.qt-pet-foster-inline {
  flex: 1;
  padding: 6px 12px;
  background: #F0FDF4;
  border: 1px solid #D1FAE5;
  border-radius: 6px;
  color: #065F46;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-btn-remove-foster-inline {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  color: #DC2626;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.qt-btn-remove-foster-inline:hover:not(:disabled) {
  background: #FEE2E2;
  border-color: #FCA5A5;
  transform: translateY(-1px);
}

.qt-btn-remove-foster-inline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.qt-pet-identity {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 10px;
}

.qt-pet-identity-avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #FFF1DC;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.qt-pet-identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-identity-icon {
  font-size: 28px;
}

.qt-pet-identity-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- Medical history stub ----------------------------------------- */

.qt-history-stub {
  border: 1px dashed #E5E7EB;
  border-radius: 10px;
  padding: 16px;
  background: #FAFBFC;
}

.qt-history-stub-title {
  font-size: 14px;
  font-weight: 700;
  color: #1B2A4E;
  margin-bottom: 4px;
}

.qt-history-stub-sub {
  font-size: 12px;
  color: #6B7280;
}

/* Lock body scroll while drawer is open (CSS-only via :has where supported,
   otherwise the page just keeps its scroll, which is acceptable). */
body:has(.qt-drawer--open) {
  overflow: hidden;
}

/* (Earlier this file had `html, body { overflow-x: clip }` to mask the
   off-screen drawer's bounding box. The centered-modal pattern keeps
   every element inside the viewport so no clipping is required.) */

/* =============================================================== */
/* Sidebar — collapsible (icons-only) mode                          */
/* =============================================================== */

/* Collapse toggle button: small chevron in the sidebar footer. */
.qt-dash-collapse-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  color: #6B7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.qt-dash-collapse-btn:hover {
  background: #F8FAFC;
  color: #1F2937;
  border-color: #D1D5DB;
}

/* Collapsed sidebar: only icons, no text. The aside itself is narrowed
   via the grid-template-columns transition on .qt-dash-body. */
.qt-dash-sidebar--collapsed {
  padding: 18px 8px 24px;
  align-items: center;
}

.qt-dash-sidebar--collapsed .qt-dash-nav {
  width: 100%;
}

.qt-dash-sidebar--collapsed .qt-dash-navlink-inner {
  padding: 11px 0;
  justify-content: center;
}

.qt-dash-sidebar--collapsed .qt-dash-navlabel {
  display: none;
}

.qt-dash-sidebar--collapsed .qt-dash-navbadge {
  display: none;
}

.qt-dash-sidebar--collapsed .qt-dash-navlink:hover {
  /* Disable horizontal slide-in hover when there's no label to slide. */
  transform: none;
}

.qt-dash-sidebar--collapsed .qt-dash-navlink--active::before {
  /* Keep the accent bar visible (left:4px) — confirms which screen is open. */
  left: 2px;
}

.qt-dash-sidebar--collapsed .qt-dash-sidebar-version {
  display: none;
}

.qt-dash-sidebar--collapsed .qt-dash-sidebar-foot {
  width: 100%;
  padding: 8px 0 0;
  display: flex;
  justify-content: center;
}

/* New Pet Details Redesign Styles */

.qt-drawer-header-main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.qt-pet-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #F8FAFC;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.qt-pet-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #FFF1DC;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.qt-pet-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pet-header-icon {
  font-size: 24px;
}

.qt-pet-header-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-pet-chip--weight {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #DBEAFE;
}

.qt-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qt-section-label-sm {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}

.qt-section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qt-section-timestamp {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 600;
}

.qt-activity-container {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.qt-comments-panel {
  box-shadow: none;
}

.qt-comments-sub {
  margin-top: 4px;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
}

.qt-comments-actions {
  display: flex;
  justify-content: flex-end;
}

.qt-comments-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-comments-empty {
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  padding: 16px;
  color: #94A3B8;
  font-size: 13px;
  font-style: italic;
  text-align: center;
  background: #F8FAFC;
}

.qt-comment-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #FFFFFF;
  transition: border-color 120ms ease, background 120ms ease;
}

.qt-comment-item:hover {
  border-color: #CBD5E1;
  background: #FAFBFC;
}

.qt-comment-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.28);
  overflow: hidden;
  flex-shrink: 0;
}

.qt-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-comment-body {
  min-width: 0;
}

.qt-comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}

.qt-comment-author {
  color: #0F172A;
  font-size: 13px;
  font-weight: 900;
}

.qt-comment-date {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 700;
}

.qt-comment-text {
  margin: 6px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.qt-comment-success {
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  background: #F0FDF4;
  color: #166534;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  animation: qtCommentSuccess 0.22s ease-out;
}

@keyframes qtCommentSuccess {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qt-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.qt-attachment-btn-add {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #F8FAFC;
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.qt-attachment-btn-add:hover {
  background: #F1F5F9;
  border-color: #F59E0B;
  transform: translateY(-1px);
}

.qt-attachment-add-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #F59E0B;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.qt-attachment-add-title {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}

.qt-attachment-add-sub {
  font-size: 11px;
  color: #64748B;
}

.qt-attachment-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #F8FAFC;
  border-radius: 10px;
  border: 1px solid #F1F5F9;
  font-size: 12px;
  color: #94A3B8;
  font-style: italic;
}

.qt-medical-actions-panel {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 14px 30px -28px rgba(15, 23, 42, 0.42);
}

.qt-medical-actions-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.qt-medical-actions-head-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qt-medical-actions-sub {
  margin-top: 4px;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
}

.qt-medical-actions-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 11px;
  font-weight: 800;
}

.qt-medical-collapse-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.qt-medical-collapse-btn:hover {
  border-color: #FDBA74;
  color: #C2410C;
  background: #FFF7ED;
}

.qt-medical-action-grid {
  display: grid;
  /* 4 equal-width columns on wide panels, auto-wrap on narrow */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.qt-medical-action-btn {
  width: 100%;
  /* Vertical card layout (icon top, label bottom) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #FFFFFF;
  color: #1E293B;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px -8px rgba(15, 23, 42, 0.18);
  transition: transform 130ms ease, border-color 130ms ease,
    box-shadow 130ms ease, background 130ms ease;
}

.qt-medical-action-btn:hover {
  transform: translateY(-2px);
  border-color: #FCD34D;
  background: #FFFBEB;
  box-shadow: 0 8px 20px -10px rgba(245, 158, 11, 0.40);
}

.qt-medical-action-icon,
.qt-medical-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFF7ED;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9A3412;
  flex-shrink: 0;
}

.qt-medical-action-icon svg,
.qt-medical-modal-icon svg {
  width: 22px;
  height: 22px;
}

.qt-medical-action-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.qt-medical-action-title {
  color: #0F172A;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  padding: 0 2px;
  word-break: break-word;
  hyphens: auto;
}

.qt-medical-action-subtitle {
  display: none;
  /* hidden in compact 5-col layout */
}

.qt-medical-action-plus {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}

/* Per-type icon colors (matches prototipo) */
.qt-medical-action-btn--vaccine .qt-medical-action-icon {
  background: #FFF7ED;
  color: #F97316;
  /* orange */
}

.qt-medical-action-btn--exam .qt-medical-action-icon {
  background: #F0FDF4;
  color: #22C55E;
  /* green */
}

.qt-medical-action-btn--sterilization .qt-medical-action-icon {
  background: #FEF2F2;
  color: #EF4444;
  /* red */
}

.qt-medical-action-btn--deworming .qt-medical-action-icon {
  background: #FEFCE8;
  color: #CA8A04;
  /* yellow */
}

.qt-medical-action-btn--treatment .qt-medical-action-icon {
  background: #EFF6FF;
  color: #3B82F6;
  /* blue */
}

.qt-medical-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.qt-medical-modal {
  width: min(620px, 100%);
  max-height: min(640px, calc(100dvh - 96px));
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 28px 70px -24px rgba(15, 23, 42, 0.48);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-medical-modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.qt-medical-modal-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qt-medical-modal-eyebrow {
  color: #F59E0B;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qt-medical-modal-title {
  margin: 1px 0 0;
  color: #0F172A;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 900;
}

.qt-medical-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.qt-medical-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.qt-medical-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 20px;
}

.qt-medical-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.qt-medical-attachments-box {
  padding: 14px;
  border: 1px dashed #CBD5E1;
  border-radius: 14px;
  background: #F8FAFC;
}

.qt-medical-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qt-medical-attachments-title {
  color: #15213A;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.qt-medical-attachments-sub {
  margin-top: 2px;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}

.qt-medical-attachment-add {
  flex-shrink: 0;
  border: 1px solid #FDBA74;
  border-radius: 999px;
  background: #FFF7ED;
  color: #9A3412;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.qt-medical-attachment-add:hover {
  background: #FFEDD5;
}

.qt-medical-attachment-add:disabled,
.qt-medical-attachment-add--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.qt-medical-attachments-empty {
  color: #94A3B8;
  font-size: 13px;
  font-weight: 750;
}

.qt-medical-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qt-medical-attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 8px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  background: #FFFFFF;
}

.qt-medical-attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #15213A;
  text-decoration: none;
  font-weight: 850;
}

.qt-medical-attachment-link:hover {
  color: #9A3412;
}

.qt-medical-attachment-kind {
  font-size: 15px;
  line-height: 1;
}

.qt-medical-attachment-name {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.qt-medical-attachment-pending {
  padding: 3px 6px;
  border-radius: 999px;
  background: #DBEAFE;
  color: #2563EB;
  font-size: 10px;
  font-weight: 900;
}

.qt-medical-attachment-remove {
  border: 0;
  border-radius: 999px;
  background: #FEE2E2;
  color: #991B1B;
  padding: 4px 7px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.qt-medical-attachment-remove:hover {
  background: #FECACA;
}

.qt-medical-modal-footer {
  flex: 0 0 auto;
  border-top: 1px solid #E5E7EB;
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #FFFFFF;
}

.qt-medical-modal-footer .qt-btn {
  min-width: 150px;
}

/* History list under the medical actions grid -------------------------- */
.qt-medical-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dashed #E5E7EB;
  padding-top: 14px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 6px;
}

.qt-medical-history::-webkit-scrollbar {
  width: 6px;
}

.qt-medical-history::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

.qt-medical-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.qt-medical-history-row:hover {
  border-color: #FCD34D;
  box-shadow: 0 4px 12px -8px rgba(245, 158, 11, 0.22);
}

/* actions cluster on the right of each history row */
.qt-medical-history-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* icon in a colored round box — matches prototipo */
.qt-medical-history-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #FFF7ED;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #F97316;
  /* default orange, overridden per-type below */
}

.qt-medical-history-icon svg {
  width: 18px;
  height: 18px;
}

/* Per-type history icon colors */
.qt-medical-history-row--vaccine .qt-medical-history-icon {
  background: #FFF7ED;
  color: #F97316;
}

.qt-medical-history-row--exam .qt-medical-history-icon {
  background: #F0FDF4;
  color: #22C55E;
}

.qt-medical-history-row--sterilization .qt-medical-history-icon {
  background: #FEF2F2;
  color: #EF4444;
}

.qt-medical-history-row--deworming .qt-medical-history-icon {
  background: #FEFCE8;
  color: #CA8A04;
}

.qt-medical-history-row--treatment .qt-medical-history-icon {
  background: #EFF6FF;
  color: #3B82F6;
}

.qt-medical-history-text {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.qt-medical-history-title {
  font-size: 13px;
  font-weight: 500;
  color: #0F172A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qt-medical-history-date {
  font-size: 10.5px;
  color: #94A3B8;
  flex-shrink: 0;
  font-weight: 400;
}

.qt-medical-history-edit,
.qt-medical-history-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.qt-medical-history-edit svg,
.qt-medical-history-delete svg {
  width: 16px;
  height: 16px;
}

.qt-medical-history-edit {
  border: 1px solid #FDBA74;
  background: #FFF7ED;
  color: #B45309;
}

.qt-medical-history-edit:hover:not(:disabled) {
  background: #FFEDD5;
  border-color: #F59E0B;
  transform: scale(1.08);
}

.qt-medical-history-delete {
  border: 1px solid #FECACA;
  background: #FEF2F2;
  color: #DC2626;
}

.qt-medical-history-delete:hover:not(:disabled) {
  background: #FEE2E2;
  border-color: #F87171;
  transform: scale(1.08);
}

.qt-medical-history-edit--disabled,
.qt-medical-history-edit:disabled,
.qt-medical-history-delete--disabled,
.qt-medical-history-delete:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qt-medical-history-more {
  font-size: 12px;
  color: #7A6F61;
  margin-top: 6px;
  text-align: center;
}

/* Attachment thumbnails strip in history row --------------------------- */
.qt-medical-history-thumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.qt-medical-thumb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  color: #64748B;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
  line-height: 1;
}

.qt-medical-thumb-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.qt-medical-thumb-btn:hover {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #3B82F6;
  transform: scale(1.1);
}

.qt-medical-thumb-btn--pdf:hover {
  background: #FFF7ED;
  border-color: #FDBA74;
  color: #F97316;
}

.qt-medical-thumb-more {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  padding: 0 4px;
}

/* Attachment item in modal — clickable to open viewer */
.qt-medical-attachment-link--btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
}

.qt-medical-attachment-view-hint {
  font-size: 10px;
  font-weight: 700;
  color: #3B82F6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.qt-medical-attachment-item:hover .qt-medical-attachment-view-hint {
  opacity: 1;
}

/* Attachment Viewer (Lightbox) ---------------------------------------- */
.qt-attach-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: qt-fadeIn 0.18s ease;
}

.qt-attach-viewer-box {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  animation: qt-slideUpFade 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.qt-attach-viewer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
  flex-shrink: 0;
}

.qt-attach-viewer-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.qt-attach-viewer-name {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.qt-attach-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.qt-attach-viewer-external {
  font-size: 12px;
  font-weight: 600;
  color: #3B82F6;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #BFDBFE;
  background: #EFF6FF;
  transition: background 0.15s;
}

.qt-attach-viewer-external:hover {
  background: #DBEAFE;
}

.qt-attach-viewer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
  font-size: 18px;
  cursor: pointer;
  color: #6B7280;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.qt-attach-viewer-close:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.qt-attach-viewer-body {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  min-height: 200px;
}

.qt-attach-viewer-img {
  max-width: 100%;
  max-height: calc(100dvh - 130px);
  object-fit: contain;
  display: block;
}

.qt-attach-viewer-iframe {
  width: 100%;
  height: calc(100dvh - 130px);
  min-height: 400px;
  border: none;
  display: block;
  background: #fff;
  flex: 1 1 auto;
}

@keyframes qt-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes qt-slideUpFade {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sterilization permanent-record warning ------------------------------- */
.qt-medical-modal-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #FFF7E6;
  border: 1px solid #F5C97A;
  border-radius: 10px;
  font-size: 13px;
  color: #6B4A14;
  line-height: 1.45;
}

.qt-medical-modal-warning-icon {
  font-size: 18px;
  line-height: 1;
}

/* Save error banner ---------------------------------------------------- */
.qt-medical-modal-error {
  padding: 10px 14px;
  background: #FEECEC;
  border: 1px solid #F5B5B5;
  color: #7A1F1F;
  border-radius: 10px;
  font-size: 13px;
}

@media (max-width: 640px) {
  .qt-drawer {
    width: min(96vw, 840px);
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    border-radius: 14px;
  }

  .qt-medical-action-grid,
  .qt-medical-modal-grid {
    grid-template-columns: 1fr;
  }

  .qt-medical-modal-footer {
    flex-direction: column-reverse;
  }

  .qt-medical-modal-footer .qt-btn {
    width: 100%;
  }
}

/* Adoption Confirmation Modal */
.qt-adoption-confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.qt-adoption-confirm-modal {
  width: min(480px, 100%);
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 28px 70px -24px rgba(15, 23, 42, 0.48);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.qt-adoption-confirm-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #F1F5F9;
}

.qt-adoption-confirm-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FEF3C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.qt-adoption-confirm-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.qt-adoption-confirm-modal-body {
  padding: 20px 24px;
}

.qt-adoption-confirm-modal-message {
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 12px;
}

.qt-adoption-confirm-modal-pet-name {
  font-weight: 700;
  color: #0F172A;
}

.qt-adoption-confirm-modal-warning {
  padding: 12px 14px;
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1E40AF;
  line-height: 1.4;
}

.qt-adoption-confirm-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid #F1F5F9;
}

.qt-adoption-confirm-modal-footer .qt-btn {
  flex: 1;
  justify-content: center;
}

/* ---- Adopted-blocked banner ---------------------------------------- */

.qt-adopted-block-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.qt-adopted-block-banner {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
  width: 100%;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.18);
  animation: qt-slide-up 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes qt-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.qt-adopted-block-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.qt-adopted-block-content {
  flex: 1;
  min-width: 0;
}

.qt-adopted-block-title {
  font-size: 13px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qt-adopted-block-body {
  font-size: 14px;
  color: #78350F;
  line-height: 1.5;
}

.qt-adopted-block-name {
  font-weight: 700;
  color: #451A03;
}

.qt-adopted-block-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #92400E;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 120ms ease;
}

.qt-adopted-block-close:hover {
  opacity: 1;
}

/* Advanced Info Collapsible */
.qt-details-advanced {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  overflow: hidden;
}

.qt-details-advanced--primary {
  background: #FFFFFF;
  box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.4);
}

.qt-details-advanced summary {
  padding: 12px 16px;
  background: #F8FAFC;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.qt-details-count {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #EEF2F7;
  color: #64748B;
  font-size: 11px;
  font-weight: 800;
}

.qt-details-advanced summary:hover {
  background: #F1F5F9;
}

.qt-details-arrow {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.qt-details-advanced[open] .qt-details-arrow {
  transform: rotate(180deg);
}

.qt-details-content {
  padding: 0 16px 16px;
  background: #fff;
}

.qt-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.qt-pet-data-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.qt-pet-data-grid .qt-field {
  gap: 5px;
}

.qt-pet-data-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 8 10 13 15 8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.qt-color-select-shell {
  position: relative;
}

.qt-color-select {
  padding-left: 52px;
  text-indent: 10px;
}

.qt-color-swatch {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.qt-color-swatch--empty {
  background: linear-gradient(135deg, #F8FAFC 0 50%, #E2E8F0 50% 100%);
}

/* ---- Photo picker ------------------------------------------------- */

.qt-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.qt-photo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qt-photo-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px dashed #CBD5E1;
  border-radius: 10px;
  background: #F8FAFC;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  width: fit-content;
}

.qt-photo-upload-btn:hover {
  border-color: #FF9F1C;
  background: #FFF7ED;
  color: #92400E;
}

.qt-photo-upload-icon::before {
  content: '📷';
  font-size: 18px;
}

.qt-photo-preview-shell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qt-photo-preview-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.qt-photo-remove-btn {
  padding: 6px 12px;
  border: 1px solid #FECACA;
  border-radius: 6px;
  background: #FEF2F2;
  color: #991B1B;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.qt-photo-remove-btn:hover {
  background: #FEE2E2;
}

@media (max-width: 900px) {
  .qt-pet-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .qt-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .qt-pet-data-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
 * FOSTER ASSIGNMENT SECTION STYLES
 * ========================================================================= */

.qt-foster-section {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.qt-foster-sub {
  margin-top: 4px;
  color: #64748B;
  font-size: 12px;
  font-weight: 600;
}

.qt-foster-status-badge {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(16, 185, 129, 0.4);
}

.qt-foster-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: #64748B;
  font-size: 13px;
  font-weight: 600;
}

.qt-foster-empty {
  padding: 16px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  color: #64748B;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.qt-foster-hint {
  color: #94A3B8;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
}

/* Foster Table */
.qt-foster-table-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.qt-foster-table-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr 80px 120px;
  gap: 16px;
  padding: 12px 20px;
  background: #F8FAFC;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  border-bottom: 1px solid #E2E8F0;
}

.qt-foster-table-row-link {
  text-decoration: none;
  color: inherit;
}

.qt-foster-table-row-link:hover .qt-foster-table-row {
  background: #FAFAF9;
}

.qt-foster-table-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr 80px 120px;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid #E2E8F0;
  transition: background 120ms ease;
  cursor: pointer;
}

.qt-foster-table-row:last-child {
  border-bottom: none;
}

.qt-foster-table-cell {
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-foster-table-cell--name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.qt-foster-table-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

.qt-foster-table-patio {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.qt-foster-table-patio--yes {
  background: #F0FDF4;
  color: #15803D;
}

.qt-foster-table-patio--no {
  background: #F1F5F9;
  color: #64748B;
}

@media (max-width: 768px) {
  .qt-foster-table-header {
    display: none;
  }

  .qt-foster-table-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }

  .qt-foster-table-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .qt-foster-table-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94A3B8;
    margin-bottom: 2px;
  }

  .qt-foster-table-cell--name::before {
    content: 'Postulante';
  }

  .qt-foster-table-cell--name+.qt-foster-table-cell::before {
    content: 'Teléfono';
  }

  .qt-foster-table-cell--name+.qt-foster-table-cell+.qt-foster-table-cell::before {
    content: 'Correo';
  }

  .qt-foster-table-cell--name+.qt-foster-table-cell+.qt-foster-table-cell+.qt-foster-table-cell::before {
    content: 'Patio';
  }

  .qt-foster-table-cell--name+.qt-foster-table-cell+.qt-foster-table-cell+.qt-foster-table-cell+.qt-foster-table-cell::before {
    content: 'Estado';
  }
}

/* Foster List - Vertical Stack */
.qt-foster-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Foster Card - Compact Horizontal Layout */
.qt-foster-card-compact {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 46px -32px rgba(15, 23, 42, 0.3);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  align-items: start;
}

.qt-foster-card-link:hover .qt-foster-card-compact {
  border-color: #FDBA74;
  box-shadow: 0 24px 52px -32px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.qt-foster-card-compact-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qt-foster-avatar-compact {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.4);
}

.qt-foster-card-compact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}

.qt-foster-card-compact-info h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0F172A;
}

.qt-foster-card-compact-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.qt-foster-card-compact-contact span {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
}

.qt-foster-card-compact-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.qt-foster-card-compact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.qt-foster-compact-meta-item {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.qt-foster-card-compact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qt-foster-card-compact-badges span {
  padding: 4px 10px;
  border-radius: 8px;
  background: #F0FDF4;
  color: #166534;
  font-size: 11px;
  font-weight: 800;
}

.qt-foster-card-compact-status {
  display: flex;
  align-items: flex-start;
}

.qt-foster-remove-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 5px;
  background: #F1F5F9;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.qt-foster-remove-btn:hover:not(:disabled) {
  background: #FEE2E2;
  color: #DC2626;
}

.qt-foster-remove-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Kanban Foster Badge */
.qt-kanban-card-foster-badge {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px -2px rgba(16, 185, 129, 0.4);
  margin-left: auto;
}

/* Foster Select Dropdown Enhancement */
.qt-foster-select {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.qt-foster-select:focus {
  border-color: #FF9F1C;
  box-shadow: 0 0 0 3px rgba(255, 159, 28, 0.15);
  outline: none;
}

.qt-foster-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #F1F5F9;
}

/* ============================================================================
   QT PUBLIC ADOPTION — Premium UI
   Palette: warm orange/brown (primary #904d00, accent #e67e00)
   ============================================================================ */

.qt-pub-page {
  --qt-pub-bg: #f9f9ff;
  --qt-pub-surface: #ffffff;
  --qt-pub-surface-low: #f1f3ff;
  --qt-pub-surface-container: #e8eeff;
  --qt-pub-surface-warm: #fff8f1;
  --qt-pub-primary: #904d00;
  --qt-pub-primary-strong: #6e3900;
  --qt-pub-accent: #e67e00;
  --qt-pub-accent-soft: #ffdcc3;
  --qt-pub-secondary: #7a5826;
  --qt-pub-text: #151c29;
  --qt-pub-text-soft: #554335;
  --qt-pub-text-muted: #897363;
  --qt-pub-border: rgba(0, 0, 0, 0.06);
  --qt-pub-border-warm: #dcc2af;
  --qt-pub-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
  --qt-pub-shadow-md: 0 4px 16px rgba(144, 77, 0, 0.08);
  --qt-pub-shadow-lg: 0 12px 32px rgba(144, 77, 0, 0.12);
  --qt-pub-radius: 16px;
  --qt-pub-radius-sm: 10px;

  min-height: 100vh;
  background: var(--qt-pub-bg);
  color: var(--qt-pub-text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar ---------- */
.qt-pub-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--qt-pub-border);
  box-shadow: var(--qt-pub-shadow-sm);
}

.qt-pub-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 80px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qt-pub-brand {
  font-size: 22px;
  font-weight: 800;
  color: var(--qt-pub-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.qt-pub-brand-accent {
  color: var(--qt-pub-text);
  font-weight: 700;
}

.qt-pub-nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.qt-pub-nav-link {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s;
  letter-spacing: 0.02em;
}

.qt-pub-nav-link:hover {
  color: var(--qt-pub-primary);
}

.qt-pub-nav-link--active {
  color: var(--qt-pub-primary);
  border-bottom: 2px solid var(--qt-pub-primary);
}

.qt-pub-nav-actions {
  display: flex;
  gap: 12px;
}

.qt-pub-nav-login {
  font-size: 14px;
  font-weight: 700;
  color: var(--qt-pub-primary);
  padding: 10px 20px;
  border-radius: var(--qt-pub-radius-sm);
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

.qt-pub-nav-login:hover {
  background: var(--qt-pub-accent-soft);
}

@media (max-width: 768px) {
  .qt-pub-nav-links {
    display: none;
  }

  .qt-pub-nav-inner {
    padding: 0 16px;
  }
}

/* ---------- Hero ---------- */
.qt-pub-hero {
  position: relative;
  background: linear-gradient(135deg, #fff8f1 0%, #ffe8d2 50%, #ffd9b5 100%);
  overflow: hidden;
  padding: 80px 24px 100px;
}

.qt-pub-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.qt-pub-hero-text {
  max-width: 720px;
}

.qt-pub-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--qt-pub-primary);
  background: rgba(255, 255, 255, 0.7);
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid var(--qt-pub-accent-soft);
}

.qt-pub-hero-title {
  margin: 0 0 20px;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--qt-pub-text);
}

.qt-pub-hero-title-accent {
  background: linear-gradient(135deg, var(--qt-pub-primary), var(--qt-pub-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.qt-pub-hero-subtitle {
  margin: 0 0 40px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--qt-pub-text-soft);
  max-width: 600px;
}

.qt-pub-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.qt-pub-hero-stat {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 16px 24px;
  border-radius: var(--qt-pub-radius-sm);
  min-width: 110px;
}

.qt-pub-hero-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--qt-pub-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.qt-pub-hero-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--qt-pub-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qt-pub-hero-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.qt-pub-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}

.qt-pub-hero-blob--1 {
  width: 400px;
  height: 400px;
  background: #ffb77d;
  top: -100px;
  right: -50px;
}

.qt-pub-hero-blob--2 {
  width: 300px;
  height: 300px;
  background: #fecf92;
  bottom: -80px;
  right: 20%;
}

.qt-pub-hero-paw {
  position: absolute;
  font-size: 48px;
  opacity: 0.15;
}

.qt-pub-hero-paw--1 {
  top: 40px;
  right: 10%;
  transform: rotate(-15deg);
}

.qt-pub-hero-paw--2 {
  top: 60%;
  right: 35%;
  transform: rotate(20deg);
  font-size: 32px;
}

.qt-pub-hero-paw--3 {
  bottom: 30px;
  right: 5%;
  transform: rotate(-30deg);
  font-size: 64px;
}

/* ---------- Main ---------- */
.qt-pub-main {
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 48px 24px;
}

/* ---------- Filters ---------- */
.qt-pub-filters {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.qt-pub-search-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
}

.qt-pub-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}

.qt-pub-search-input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1px solid var(--qt-pub-border-warm);
  border-radius: var(--qt-pub-radius-sm);
  background: var(--qt-pub-surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--qt-pub-text);
  transition: all 0.2s;
  font-family: inherit;
}

.qt-pub-search-input:focus {
  outline: none;
  border-color: var(--qt-pub-primary);
  box-shadow: 0 0 0 4px rgba(144, 77, 0, 0.1);
}

.qt-pub-chips {
  display: flex;
  gap: 8px;
}

.qt-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border: 1px solid var(--qt-pub-border-warm);
  border-radius: var(--qt-pub-radius-sm);
  background: var(--qt-pub-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--qt-pub-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.qt-pub-chip:hover {
  border-color: var(--qt-pub-primary);
  color: var(--qt-pub-primary);
  transform: translateY(-1px);
}

.qt-pub-chip--active {
  background: var(--qt-pub-primary);
  border-color: var(--qt-pub-primary);
  color: white;
}

.qt-pub-chip-emoji {
  font-size: 16px;
}

/* ---------- Results ---------- */
.qt-pub-results-header {
  margin-bottom: 24px;
}

.qt-pub-results-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--qt-pub-text);
  letter-spacing: -0.01em;
}

.qt-pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ---------- Card ---------- */
.qt-pub-card {
  background: var(--qt-pub-surface);
  border-radius: var(--qt-pub-radius);
  overflow: hidden;
  box-shadow: var(--qt-pub-shadow-sm);
  border: 1px solid var(--qt-pub-border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.qt-pub-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--qt-pub-shadow-lg);
  border-color: var(--qt-pub-accent-soft);
}

.qt-pub-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--qt-pub-surface-warm);
  overflow: hidden;
}

.qt-pub-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.qt-pub-card:hover .qt-pub-card-img {
  transform: scale(1.06);
}

.qt-pub-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  background: linear-gradient(135deg, #fff8f1 0%, #ffdcc3 100%);
}

.qt-pub-card-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.qt-pub-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.qt-pub-badge--available {
  background: rgba(255, 255, 255, 0.92);
  color: var(--qt-pub-primary);
}

.qt-pub-badge--health {
  background: rgba(220, 252, 231, 0.92);
  color: #166534;
}

.qt-pub-badge--lg {
  padding: 8px 16px;
  font-size: 13px;
}

.qt-pub-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.qt-pub-card:hover .qt-pub-card-overlay {
  opacity: 1;
}

.qt-pub-card-cta {
  color: white;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.qt-pub-card-cta-arrow {
  display: inline-block;
  transition: transform 0.2s;
}

.qt-pub-card:hover .qt-pub-card-cta-arrow {
  transform: translateX(4px);
}

.qt-pub-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-pub-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.qt-pub-card-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--qt-pub-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.qt-pub-card-species {
  font-size: 24px;
  line-height: 1;
}

.qt-pub-card-breed {
  margin: 0;
  font-size: 14px;
  color: var(--qt-pub-text-soft);
  font-weight: 500;
}

.qt-pub-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.qt-pub-card-tag {
  background: var(--qt-pub-surface-warm);
  border: 1px solid var(--qt-pub-accent-soft);
  color: var(--qt-pub-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.qt-pub-card-foundation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--qt-pub-border);
}

.qt-pub-card-foundation-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--qt-pub-border);
}

.qt-pub-card-foundation-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--qt-pub-surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.qt-pub-card-foundation-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--qt-pub-text-muted);
}

/* ---------- States: loading / error / empty ---------- */
.qt-pub-loading,
.qt-pub-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  gap: 16px;
}

.qt-pub-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--qt-pub-accent-soft);
  border-top-color: var(--qt-pub-primary);
  border-radius: 50%;
  animation: qt-pub-spin 0.8s linear infinite;
}

@keyframes qt-pub-spin {
  to {
    transform: rotate(360deg);
  }
}

.qt-pub-state-icon {
  font-size: 64px;
}

.qt-pub-state-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--qt-pub-text);
}

.qt-pub-state-text {
  margin: 0;
  font-size: 16px;
  color: var(--qt-pub-text-soft);
  max-width: 480px;
}

.qt-pub-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--qt-pub-radius-sm);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  font-family: inherit;
}

.qt-pub-btn--primary {
  background: var(--qt-pub-primary);
  color: white;
}

.qt-pub-btn--primary:hover {
  background: var(--qt-pub-primary-strong);
  transform: translateY(-1px);
  box-shadow: var(--qt-pub-shadow-md);
}

/* ---------- Detail page ---------- */
.qt-pub-breadcrumb {
  margin-bottom: 24px;
}

.qt-pub-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--qt-pub-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.qt-pub-breadcrumb-link:hover {
  color: var(--qt-pub-primary);
}

.qt-pub-breadcrumb-link:hover .qt-pub-breadcrumb-arrow {
  transform: translateX(-3px);
}

.qt-pub-breadcrumb-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-weight: 700;
}

.qt-pub-detail-loading {
  align-items: center;
  justify-content: center;
}

.qt-pub-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}

.qt-pub-detail-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.qt-pub-detail-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Gallery */
.qt-pub-detail-gallery-card {
  background: var(--qt-pub-surface);
  border-radius: var(--qt-pub-radius);
  overflow: hidden;
  box-shadow: var(--qt-pub-shadow-md);
  border: 1px solid var(--qt-pub-border);
}

.qt-pub-detail-main-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--qt-pub-surface-warm);
  overflow: hidden;
}

.qt-pub-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qt-pub-detail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 140px;
  background: linear-gradient(135deg, #fff8f1, #ffdcc3);
}

.qt-pub-detail-img-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.qt-pub-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--qt-pub-text);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--qt-pub-shadow-md);
  font-family: inherit;
}

.qt-pub-gallery-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.08);
}

.qt-pub-gallery-nav--prev {
  left: 16px;
}

.qt-pub-gallery-nav--next {
  right: 16px;
}

.qt-pub-detail-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}

.qt-pub-detail-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--qt-pub-radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: border-color 0.2s;
}

.qt-pub-detail-thumb:hover {
  border-color: var(--qt-pub-border-warm);
}

.qt-pub-detail-thumb--active {
  border-color: var(--qt-pub-primary);
}

.qt-pub-detail-thumb--empty {
  background: var(--qt-pub-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qt-pub-text-muted);
  font-size: 24px;
  cursor: default;
}

.qt-pub-detail-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cards */
.qt-pub-detail-card,
.qt-pub-detail-action-card,
.qt-pub-detail-foundation-card {
  background: var(--qt-pub-surface);
  border-radius: var(--qt-pub-radius);
  padding: 24px;
  box-shadow: var(--qt-pub-shadow-md);
  border: 1px solid var(--qt-pub-border);
}

.qt-pub-detail-action-card {
  position: sticky;
  top: 100px;
  box-shadow: var(--qt-pub-shadow-lg);
}

.qt-pub-detail-foundation-card {
  background: var(--qt-pub-surface-low);
  border: 1px solid var(--qt-pub-border-warm);
}

/* Section title */
.qt-pub-detail-section-title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--qt-pub-text);
}

/* Story */
.qt-pub-detail-story {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--qt-pub-text-soft);
}

.qt-pub-detail-story:last-child {
  margin-bottom: 0;
}

/* Action card */
.qt-pub-detail-name-block {
  margin-bottom: 24px;
}

.qt-pub-detail-name {
  margin: 0 0 8px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--qt-pub-text);
}

.qt-pub-detail-breed {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--qt-pub-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.qt-pub-detail-breed-icon {
  color: var(--qt-pub-primary);
}

.qt-pub-detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.qt-pub-detail-info-cell {
  background: var(--qt-pub-surface-low);
  border: 1px solid var(--qt-pub-border);
  border-radius: var(--qt-pub-radius-sm);
  padding: 12px 14px;
}

.qt-pub-detail-info-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--qt-pub-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.qt-pub-detail-info-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--qt-pub-text);
  letter-spacing: 0.01em;
}

/* Medical */
.qt-pub-detail-medical {
  margin-bottom: 24px;
}

.qt-pub-detail-medical-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--qt-pub-text);
}

.qt-pub-detail-medical-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--qt-pub-surface-warm);
  border: 1px solid var(--qt-pub-accent-soft);
  border-radius: 8px;
  margin-bottom: 8px;
}

.qt-pub-detail-medical-row:last-child {
  margin-bottom: 0;
}

.qt-pub-detail-medical-icon {
  color: var(--qt-pub-primary);
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.qt-pub-detail-medical-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--qt-pub-text-soft);
}

/* CTA */
.qt-pub-detail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: var(--qt-pub-primary);
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--qt-pub-radius-sm);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  box-shadow: var(--qt-pub-shadow-md);
}

.qt-pub-detail-cta:hover {
  background: var(--qt-pub-primary-strong);
  transform: translateY(-2px);
  box-shadow: var(--qt-pub-shadow-lg);
}

.qt-pub-detail-cta-arrow {
  transition: transform 0.2s;
}

.qt-pub-detail-cta:hover .qt-pub-detail-cta-arrow {
  transform: translateX(4px);
}

.qt-pub-detail-cta-disclaimer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--qt-pub-text-muted);
}

/* Foundation card */
.qt-pub-detail-foundation-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--qt-pub-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.qt-pub-detail-foundation-content {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.qt-pub-detail-foundation-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: white;
  border: 2px solid white;
  box-shadow: var(--qt-pub-shadow-sm);
  flex-shrink: 0;
}

.qt-pub-detail-foundation-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid white;
  box-shadow: var(--qt-pub-shadow-sm);
  flex-shrink: 0;
}

.qt-pub-detail-foundation-info {
  flex: 1;
  min-width: 0;
}

.qt-pub-detail-foundation-name {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--qt-pub-text);
}

.qt-pub-detail-foundation-desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--qt-pub-text-soft);
  line-height: 1.5;
}

.qt-pub-detail-foundation-link {
  display: inline-flex;
  align-items: center;
  color: var(--qt-pub-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

.qt-pub-detail-foundation-link:hover {
  color: var(--qt-pub-primary-strong);
}

/* ---------- Footer ---------- */
.qt-pub-footer {
  background: #f8fafc;
  border-top: 1px solid var(--qt-pub-border);
  padding: 48px 24px;
  margin-top: 80px;
}

.qt-pub-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.qt-pub-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.qt-pub-footer-brand {
  font-size: 18px;
  font-weight: 800;
  color: var(--qt-pub-text);
}

.qt-pub-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.qt-pub-footer-link {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

.qt-pub-footer-link:hover {
  color: var(--qt-pub-primary);
  text-decoration: underline;
  text-decoration-color: var(--qt-pub-accent);
  text-underline-offset: 4px;
}

.qt-pub-footer-copy {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .qt-pub-detail-grid {
    grid-template-columns: 1fr;
  }

  .qt-pub-detail-action-card {
    position: static;
  }
}

@media (max-width: 640px) {
  .qt-pub-hero {
    padding: 48px 16px 64px;
  }

  .qt-pub-hero-stats {
    gap: 12px;
  }

  .qt-pub-hero-stat {
    flex: 1;
    min-width: 90px;
    padding: 12px 16px;
  }

  .qt-pub-hero-stat-value {
    font-size: 22px;
  }

  .qt-pub-main {
    padding: 32px 16px;
  }

  .qt-pub-detail-name {
    font-size: 32px;
  }

  .qt-pub-detail-section-title {
    font-size: 22px;
  }

  .qt-pub-detail-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .qt-pub-grid {
    gap: 16px;
  }
}

/* Navbar brand logo */
.qt-pub-brand-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  margin-right: 10px;
  flex-shrink: 0;
}

.qt-pub-brand {
  display: flex;
  align-items: center;
}

/* =============================================================== */
/* Public bio (drawer)                                               */
/* =============================================================== */

.qt-public-bio-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #FAFAFA;
  box-shadow: 0 4px 16px -12px rgba(15, 23, 42, 0.18);
  transition: background 140ms ease, border-color 140ms ease;
  cursor: default;
}

.qt-public-bio-panel:hover {
  background: #F8F9FC;
  border-color: #CBD5E1;
}

.qt-public-bio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qt-public-bio-sub {
  margin-top: 2px;
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.qt-public-bio-locked-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #94A3B8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.qt-public-bio-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qt-public-bio-empty {
  margin: 0;
  color: #94A3B8;
  font-size: 13px;
  font-style: italic;
}

.qt-public-bio-text {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.qt-public-bio-edit-btn {
  align-self: flex-start;
}

.qt-public-bio-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qt-public-bio-counter {
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
}

.qt-public-bio-counter--warn {
  color: #DC2626;
}

.qt-public-bio-actions {
  display: flex;
  gap: 8px;
}

/* =============================================================== */
/* Missing public bio modal (kanban)                                 */
/* =============================================================== */

.qt-missing-bio-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  animation: qtFadeIn 160ms ease both;
}

.qt-missing-bio-modal {
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 64px -28px rgba(15, 23, 42, 0.45);
  animation: qtFadeIn 200ms ease both;
}

.qt-missing-bio-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qt-missing-bio-modal-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FFF7ED;
  color: #C2410C;
  font-size: 20px;
}

.qt-missing-bio-modal-title {
  margin: 0;
  color: #0F172A;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.qt-missing-bio-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qt-missing-bio-modal-message {
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.qt-missing-bio-modal-pet-name {
  color: #0F172A;
  font-weight: 900;
}

.qt-missing-bio-modal-hint {
  color: #64748B;
  font-size: 12px;
  font-weight: 700;
}

.qt-missing-bio-modal-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-missing-bio-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  background: #F8FAFC;
  color: #0F172A;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.qt-missing-bio-textarea:focus {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.qt-missing-bio-counter-row {
  display: flex;
  justify-content: flex-end;
}

.qt-missing-bio-counter {
  font-size: 11px;
  font-weight: 800;
  color: #94A3B8;
}

.qt-missing-bio-counter--warn {
  color: #DC2626;
}

.qt-missing-bio-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Transfer animation modal ---------------------------------------- */

.qt-transfer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  animation: qt-fade-in 200ms ease;
}

.qt-transfer-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px 40px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 40px 100px -40px rgba(15, 23, 42, 0.6);
  animation: qt-scale-in 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qt-transfer-content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.qt-transfer-logo {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-transfer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Wagging tail animation for Shelter logo */
.qt-transfer-logo--shelter {
  animation: qt-wag-tail 600ms ease-in-out infinite;
  transform-origin: center bottom;
}

/* Wagging tail animation for QuickyTail logo */
.qt-transfer-logo--quickytail {
  animation: qt-wag-tail 600ms ease-in-out infinite;
  animation-delay: 300ms;
  transform-origin: center bottom;
}

@keyframes qt-wag-tail {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-8deg);
  }

  75% {
    transform: rotate(8deg);
  }
}

/* Infinite dots animation */
.qt-transfer-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qt-transfer-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F97316;
  animation: qt-dot-bounce 1.4s ease-in-out infinite;
}

.qt-transfer-dots span:nth-child(1) {
  animation-delay: 0s;
}

.qt-transfer-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.qt-transfer-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes qt-dot-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.qt-transfer-text {
  text-align: center;
}

.qt-transfer-text h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 900;
  color: #0F172A;
}

.qt-transfer-text p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #64748B;
}

/* ---- Approval confirm modal (page-level) --------------------------- */

.qt-approve-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  animation: qt-fade-in 180ms ease;
}

.qt-approve-confirm-modal {
  width: min(480px, 100%);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 30px 80px -36px rgba(15, 23, 42, 0.48);
  overflow: hidden;
  animation: qt-scale-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qt-approve-confirm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid #F1F5F9;
  background: linear-gradient(135deg, #ECFDF5, #FFFFFF);
}

.qt-approve-confirm-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.qt-approve-confirm-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
}

.qt-approve-confirm-body {
  padding: 20px 24px;
}

.qt-approve-confirm-message {
  font-size: 15px;
  font-weight: 500;
  color: #334155;
  line-height: 1.5;
  margin-bottom: 12px;
}

.qt-approve-confirm-name {
  font-weight: 700;
  color: #0F172A;
}

.qt-approve-confirm-warning {
  padding: 12px 14px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  color: #92400E;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.qt-approve-confirm-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid #F1F5F9;
}

.qt-approve-confirm-footer .qt-btn {
  flex: 1;
  justify-content: center;
}

@keyframes qt-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes qt-scale-in {
  from {
    transform: scale(0.96);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================================
   HEALTH SCORE CARD
   ============================================================================ */

.qt-health-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 32px;
  animation: qt-fade-in 0.35s ease;
  min-height: 400px;
}

.qt-health-card--loading {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-health-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #64748B;
  font-size: 14px;
  font-weight: 500;
}

/* Header */
.qt-health-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.qt-health-heart-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  animation: qt-heart-pulse 2s ease-in-out infinite;
}

@keyframes qt-heart-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.08);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.05);
  }

  60% {
    transform: scale(1);
  }
}

.qt-health-heart-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(251, 146, 60, 0.3));
}

.qt-health-heart-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qt-health-heart-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #0F172A;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.qt-health-header-text {
  flex: 1;
  min-width: 0;
}

.qt-health-header-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
  line-height: 1.3;
}

.qt-health-header-desc {
  font-size: 14px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.4;
}

/* Progress bar */
.qt-health-bar-wrap {
  margin-bottom: 20px;
}

.qt-health-bar-track {
  width: 100%;
  height: 10px;
  background: #EAECF0;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.qt-health-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  animation: qt-bar-glow 2s ease-in-out infinite;
  background-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
  background-size: 200% 100%;
  animation: qt-bar-shimmer 2.5s ease-in-out infinite;
}

@keyframes qt-bar-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Sections */
.qt-health-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-health-section {
  border-bottom: 1px solid #F1F5F9;
}

.qt-health-section:last-child {
  border-bottom: none;
}

.qt-health-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 2px;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
  border-radius: 8px;
}

/* Static (non-collapsible) variant — no hover/cursor */
.qt-health-section-header--static {
  cursor: default;
  pointer-events: none;
}

.qt-health-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.qt-health-section-icon svg {
  width: 20px;
  height: 20px;
}

.qt-health-section-name {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.qt-health-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 6px;
  background: #FEF2F2;
  color: #EF4444;
  font-size: 10px;
  font-weight: 700;
}

.qt-health-section-body {
  padding: 2px 2px 8px;
}

/* Items */
.qt-health-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.qt-health-item:hover {
  background: #F8FAFC;
}

.qt-health-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.qt-health-item-icon svg {
  width: 18px;
  height: 18px;
}

.qt-health-item-body {
  flex: 1;
  min-width: 0;
}

.qt-health-item-label {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}

.qt-health-item-sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.qt-health-item-doses {
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
}

.qt-health-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.qt-health-item-divider {
  height: 1px;
  background: #F1F5F9;
  margin-left: 30px;
}

/* Footer */
.qt-health-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

.qt-health-footer-icon {
  font-size: 12px;
  line-height: 1;
  color: #94A3B8;
}

.qt-health-footer-svg-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #B0BEC5;
}

.qt-health-footer-text {
  font-size: 11px;
  color: #B0BEC5;
  font-weight: 400;
  font-style: italic;
}

/* Spacer */
.qt-spacer {
  height: 16px;
}

/* ============================================================================
   Pagination Controls
   ============================================================================ */

.qt-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding: 20px 0;
}

.qt-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: white;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.qt-pagination-btn:hover:not(:disabled):not(.qt-pagination-btn--disabled) {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

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

.qt-pagination-btn:disabled,
.qt-pagination-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.qt-pagination-icon {
  font-size: 14px;
  line-height: 1;
}

.qt-pagination-label {
  font-size: 14px;
  font-weight: 500;
}

.qt-pagination-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.qt-pagination-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: white;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.qt-pagination-number:hover:not(:disabled):not(.qt-pagination-number--active) {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.qt-pagination-number:active:not(:disabled) {
  transform: translateY(1px);
}

.qt-pagination-number--active {
  background: #F59E0B;
  border-color: #F59E0B;
  color: white;
  cursor: default;
}

.qt-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  color: #94A3B8;
  font-size: 16px;
  font-weight: 600;
  user-select: none;
}

/* Responsive */
@media (max-width: 640px) {
  .qt-pagination {
    gap: 6px;
  }

  .qt-pagination-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .qt-pagination-label {
    display: none;
  }

  .qt-pagination-number {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ============================================================================
   Pagination Transitions
   ============================================================================ */

.qt-case-grid {
  animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth pagination button transitions */
.qt-pagination-btn,
.qt-pagination-number {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.qt-pagination-btn:hover:not(:disabled):not(.qt-pagination-btn--disabled),
.qt-pagination-number:hover:not(:disabled):not(.qt-pagination-number--active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qt-pagination-btn:active:not(:disabled),
.qt-pagination-number:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ============================================================================
   Smooth Page Transitions
   ============================================================================ */

/* Fade in animation for case grid */
.qt-case-grid {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth fade for loading state */
.qt-case-card {
  animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

/* Staggered animation for cards */
.qt-case-card:nth-child(1) {
  animation-delay: 0.05s;
}

.qt-case-card:nth-child(2) {
  animation-delay: 0.1s;
}

.qt-case-card:nth-child(3) {
  animation-delay: 0.15s;
}

.qt-case-card:nth-child(4) {
  animation-delay: 0.2s;
}

.qt-case-card:nth-child(5) {
  animation-delay: 0.25s;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Enhanced pagination button transitions */
.qt-pagination-btn,
.qt-pagination-number {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.qt-pagination-btn:hover:not(:disabled):not(.qt-pagination-btn--disabled),
.qt-pagination-number:hover:not(:disabled):not(.qt-pagination-number--active) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
  border-color: #F59E0B;
  color: #F59E0B;
}

.qt-pagination-btn:active:not(:disabled),
.qt-pagination-number:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
}

.qt-pagination-number--active {
  background: #F59E0B;
  border-color: #F59E0B;
  color: white;
  cursor: default;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.qt-pagination-number--active:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  color: white;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Loading skeleton animation */
.qt-case-card--skel {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Page transition overlay */
.qt-page-transition {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Searchable Select Modal --------------------------------------------- */

.qt-search-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 44px;
}

.qt-search-select-trigger:hover:not(.qt-search-select-trigger--disabled) {
  border-color: #9CA3AF;
}

.qt-search-select-trigger:focus-visible {
  outline: none;
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.qt-search-select-trigger--disabled {
  background: #F3F4F6;
  cursor: not-allowed;
  opacity: 0.6;
}

.qt-search-select-trigger--empty .qt-search-select-value {
  color: #9CA3AF;
}

.qt-search-select-value {
  font-size: 14px;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.qt-search-select-arrow {
  font-size: 10px;
  color: #9CA3AF;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Backdrop & modal box */
.qt-search-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: qtFadeIn 0.18s ease both;
}

.qt-search-modal {
  width: min(480px, 100%);
  max-height: min(640px, calc(100dvh - 64px));
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.qt-search-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.qt-search-modal-title-wrap {
  min-width: 0;
}

.qt-search-modal-title {
  margin: 0;
  color: #0F172A;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.qt-search-modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #F1F5F9;
  color: #64748B;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-search-modal-close:hover {
  background: #E2E8F0;
  color: #0F172A;
}

/* Search input */
.qt-search-modal-search-wrap {
  padding: 12px 20px 0;
  flex-shrink: 0;
}

.qt-search-modal-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  font-size: 14px;
  background: #FFFFFF;
  color: #1F2937;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qt-search-modal-input:focus {
  outline: none;
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

/* List */
.qt-search-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px 16px;
}

.qt-search-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.qt-search-modal-row:hover {
  background: #F3F4F6;
}

.qt-search-modal-row:active {
  background: #E5E7EB;
}

.qt-search-modal-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-origin: border-box;
}

.qt-search-modal-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.qt-search-modal-row-label {
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qt-search-modal-row-sub {
  font-size: 12px;
  color: #7A6F61;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state */
.qt-search-modal-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 14px;
  color: #9CA3AF;
}

/* Mobile */
@media (max-width: 640px) {
  .qt-search-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .qt-search-modal {
    width: 100%;
    max-height: 80dvh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
  }
}