/* ==========================================================================
   CARENOTE DASHBOARD — CLEAN JELLY GLASS QUICK STATS & QUICK LINKS
   Exact Visual Reference Implementation:
   - Subtle jelly-glass effect inspired by flowing water
   - Soft pastel palettes: light blue, lavender, mint green, peach, pale pink
   - Translucent card surfaces, rounded corners, soft glossy highlights
   - Clean, modern, professional healthcare SaaS interface
   - Minimal and uncluttered; respects reduced motion settings
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DASHBOARD STATS LAYOUT & SECTION HEADERS
   -------------------------------------------------------------------------- */
.dashboard-stats {
  margin-top: 0.5rem !important;
}

.dashboard-stats .header-card-title {
  margin-bottom: 0.9rem !important;
}

.dashboard-stats .header-card-title h5,
.dashboard-stats h5.page-name {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f2d37 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0 !important;
}

/* Clear outer card containers from Bootstrap to prevent double-border box nesting */
.dashboard-stats .col-xl-7 > .card,
.dashboard-stats .col-lg-7 > .card,
.dashboard-stats .col-xl-7 .row > div > .card,
.dashboard-stats .col-lg-7 .row > div > .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 1.25rem !important;
  border-radius: 26px !important;
}

.dashboard-stats .col-xl-7 .card .card-body,
.dashboard-stats .col-lg-7 .card .card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   2. QUICK STATS CARDS (FLOWING WATER JELLY GLASS)
   -------------------------------------------------------------------------- */
.dashboard-stats .stats-card {
  position: relative !important;
  min-height: 132px !important;
  width: 100% !important;
  border-radius: 26px !important;
  padding: 1.1rem 1.4rem !important;
  background-color: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 28px -6px rgba(15, 23, 42, 0.06),
              inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.98),
              inset 0 -2px 6px 0 rgba(255, 255, 255, 0.35) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  background-repeat: no-repeat !important;
  background-position: right bottom !important;
  background-size: 100% 100% !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease,
              background-color 0.28s ease !important;
}

/* Subtle gloss sheen overlay on stat cards */
.dashboard-stats .stats-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 48% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Gentle Liquid Wave Movement */
@keyframes cnJellyWaveShift {
  0% {
    background-position: 100% 100%;
  }
  50% {
    background-position: 98% 98%;
  }
  100% {
    background-position: 100% 100%;
  }
}

.dashboard-stats .stats-card {
  animation: cnJellyWaveShift 10s ease-in-out infinite !important;
}

/* --- Card 1: Today's Appointments (Cyan / Sky-Blue Jelly Glass) --- */
.dashboard-stats .col-xl-7 .row > div:nth-child(1) .stats-card,
.dashboard-stats .stats-card[data-stat-type="appointments"] {
  background-image: url('/assets/jelly-icons/stat-card-appointments-bg.svg') !important;
}
.dashboard-stats .col-xl-7 .row > div:nth-child(1) .stats-card:hover,
.dashboard-stats .stats-card[data-stat-type="appointments"]:hover {
  transform: translateY(-4px) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 36px -8px rgba(56, 189, 248, 0.35),
              inset 0 1.5px 2px 0 #ffffff !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* --- Card 2: Total Residents (Lavender / Lilac / Purple Jelly Glass) --- */
.dashboard-stats .col-xl-7 .row > div:nth-child(2) .stats-card,
.dashboard-stats .stats-card[data-stat-type="residents"] {
  background-image: url('/assets/jelly-icons/stat-card-residents-bg.svg') !important;
}
.dashboard-stats .col-xl-7 .row > div:nth-child(2) .stats-card:hover,
.dashboard-stats .stats-card[data-stat-type="residents"]:hover {
  transform: translateY(-4px) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 36px -8px rgba(192, 132, 252, 0.35),
              inset 0 1.5px 2px 0 #ffffff !important;
  border-color: rgba(192, 132, 252, 0.65) !important;
}

/* --- Card 3: Total Shifts (Mint Green / Emerald / Aqua Jelly Glass) --- */
.dashboard-stats .col-xl-7 .row > div:nth-child(3) .stats-card,
.dashboard-stats .stats-card[data-stat-type="shifts"] {
  background-image: url('/assets/jelly-icons/stat-card-shifts-bg.svg') !important;
}
.dashboard-stats .col-xl-7 .row > div:nth-child(3) .stats-card:hover,
.dashboard-stats .stats-card[data-stat-type="shifts"]:hover {
  transform: translateY(-4px) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 36px -8px rgba(52, 211, 153, 0.35),
              inset 0 1.5px 2px 0 #ffffff !important;
  border-color: rgba(52, 211, 153, 0.65) !important;
}

/* --- Card 4: Performance Review (Warm Peach / Coral / Amber Jelly Glass) --- */
.dashboard-stats .col-xl-7 .row > div:nth-child(4) .stats-card,
.dashboard-stats .stats-card[data-stat-type="performance"] {
  background-image: url('/assets/jelly-icons/stat-card-performance-bg.svg') !important;
}
.dashboard-stats .col-xl-7 .row > div:nth-child(4) .stats-card:hover,
.dashboard-stats .stats-card[data-stat-type="performance"]:hover {
  transform: translateY(-4px) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 36px -8px rgba(251, 146, 60, 0.35),
              inset 0 1.5px 2px 0 #ffffff !important;
  border-color: rgba(251, 146, 60, 0.65) !important;
}

/* --------------------------------------------------------------------------
   3. STAT CARD 3D SQUIRCLE ICONS
   -------------------------------------------------------------------------- */
.dashboard-stats .stats-icon {
  width: 62px !important;
  height: 62px !important;
  border-radius: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  margin-right: 1.25rem !important;
  box-shadow: 0 8px 18px -4px rgba(15, 23, 42, 0.16) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 2 !important;
}

.dashboard-stats .stats-card:hover .stats-icon {
  transform: scale(1.06) translateY(-1px) !important;
}

/* Hide default inline SVG icon inside .stats-icon since high-res 3D SVG icon is rendered */
.dashboard-stats .stats-icon svg:not(.cn-custom-icon) {
  display: none !important;
}

/* Card 1 Icon - Calendar (Appointments) */
.dashboard-stats .stats-icon.blue-soft,
.dashboard-stats .col-xl-7 .row > div:nth-child(1) .stats-icon,
.dashboard-stats .stats-card[data-stat-type="appointments"] .stats-icon {
  background-image: url('/assets/jelly-icons/stat-appointments.svg') !important;
  background-color: transparent !important;
  border: none !important;
}

/* Card 2 Icon - Bar Chart (Residents) */
.dashboard-stats .stats-icon.purple-soft,
.dashboard-stats .col-xl-7 .row > div:nth-child(2) .stats-icon,
.dashboard-stats .stats-card[data-stat-type="residents"] .stats-icon {
  background-image: url('/assets/jelly-icons/stat-residents.svg') !important;
  background-color: transparent !important;
  border: none !important;
}

/* Card 3 Icon - Clock (Shifts) */
.dashboard-stats .stats-icon.green-soft,
.dashboard-stats .col-xl-7 .row > div:nth-child(3) .stats-icon,
.dashboard-stats .stats-card[data-stat-type="shifts"] .stats-icon {
  background-image: url('/assets/jelly-icons/stat-shifts.svg') !important;
  background-color: transparent !important;
  border: none !important;
}

/* Card 4 Icon - Star Speech Bubble (Performance) */
.dashboard-stats .stats-icon.yellow-soft,
.dashboard-stats .col-xl-7 .row > div:nth-child(4) .stats-icon,
.dashboard-stats .stats-card[data-stat-type="performance"] .stats-icon {
  background-image: url('/assets/jelly-icons/stat-performance.svg') !important;
  background-color: transparent !important;
  border: none !important;
}

/* --------------------------------------------------------------------------
   4. STAT CARD TYPOGRAPHY & NUMBERS
   -------------------------------------------------------------------------- */
.dashboard-stats .stats-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.dashboard-stats .stats-counter {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.025em !important;
}

.dashboard-stats .stats-title {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
  letter-spacing: -0.01em !important;
}

/* --------------------------------------------------------------------------
   5. QUICK LINKS CONTAINER
   -------------------------------------------------------------------------- */
.dashboard-stats .col-xl-5 > .card,
.dashboard-stats .col-lg-5 > .card {
  background: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 28px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.05),
              inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95) !important;
  padding: 0.6rem !important;
  margin-bottom: 1.25rem !important;
}

.dashboard-stats .col-xl-5 .card-body,
.dashboard-stats .col-lg-5 .card-body {
  padding: 0.4rem !important;
  background: transparent !important;
}

#scroll-vertically {
  max-height: 440px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
  padding-left: 2px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(203, 213, 225, 0.45) transparent !important;
}

/* Minimal Custom Scrollbar */
#scroll-vertically::-webkit-scrollbar {
  width: 4px !important;
}
#scroll-vertically::-webkit-scrollbar-track {
  background: transparent !important;
}
#scroll-vertically::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.45) !important;
  border-radius: 10px !important;
}
#scroll-vertically::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8) !important;
}

/* --------------------------------------------------------------------------
   6. INDIVIDUAL QUICK LINK BUTTON (ROUNDED JELLY GLASS PILL)
   -------------------------------------------------------------------------- */
.quick-links-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
  border-radius: 24px !important;
  padding: 0.4rem 0.85rem 0.4rem 0.55rem !important;
  margin: 0.5rem 0 !important;
  background-color: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035),
              inset 0 1px 1.5px rgba(255, 255, 255, 0.98) !important;
  text-decoration: none !important;
  position: relative !important;
  overflow: hidden !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: auto 100% !important;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.24s ease,
              background-color 0.24s ease !important;
}

.quick-links-btn:hover {
  background-color: #ffffff !important;
  transform: translateY(-2px) scale(1.008) !important;
  box-shadow: 0 8px 22px -3px rgba(14, 165, 233, 0.18),
              inset 0 1px 1.5px #ffffff !important;
  border-color: rgba(56, 189, 248, 0.65) !important;
}

/* Inner content alignment */
.quick-links-btn > div {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  z-index: 2 !important;
}

.quick-links-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
}

/* 3D Squircle Icon for Quick Links */
.quick-link-jelly-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12) !important;
  transition: transform 0.22s ease !important;
}

.quick-links-btn:hover .quick-link-jelly-icon {
  transform: scale(1.08) !important;
}

/* Quick Links Typography */
.quick-links-name {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: #0c5c75 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Circular Right Arrow Pill Button */
.quick-link-arrow-circle {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08),
              inset 0 1px 1px #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  flex-shrink: 0 !important;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease !important;
}

.quick-link-arrow-circle svg,
.quick-links-btn .arrow-icon {
  width: 17px !important;
  height: 17px !important;
  color: #0c5c75 !important;
  fill: none !important;
  stroke: #0c5c75 !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform 0.22s ease !important;
}

.quick-links-btn:hover .quick-link-arrow-circle {
  transform: translateX(3px) !important;
  background: #ffffff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25) !important;
}

/* --------------------------------------------------------------------------
   7. ACTIVE LINK HIGHLIGHT (Exact match to "Activity Schedule" in reference)
   -------------------------------------------------------------------------- */
.quick-links-btn.active,
.quick-links-btn[data-active="true"] {
  border: 2px solid #38bdf8 !important;
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.42),
              0 6px 18px rgba(56, 189, 248, 0.16),
              inset 0 1.5px 2px #ffffff !important;
}

/* --------------------------------------------------------------------------
   8. SPECIFIC WAVE BACKGROUNDS PER QUICK LINK
   -------------------------------------------------------------------------- */
.quick-links-btn[data-link-key="shift-progress-note"],
#scroll-vertically > div:nth-child(1) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-pink.svg') !important;
}

.quick-links-btn[data-link-key="discharge"],
#scroll-vertically > div:nth-child(2) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-cyan.svg') !important;
}

.quick-links-btn[data-link-key="art-meeting"],
#scroll-vertically > div:nth-child(3) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-amber.svg') !important;
}

.quick-links-btn[data-link-key="activity-schedule"],
#scroll-vertically > div:nth-child(4) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-purple.svg') !important;
}

.quick-links-btn[data-link-key="clinical-oversight"],
#scroll-vertically > div:nth-child(5) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-mint.svg') !important;
}

.quick-links-btn[data-link-key="receipts"],
#scroll-vertically > div:nth-child(6) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-rose.svg') !important;
}

.quick-links-btn[data-link-key="special-notes"],
#scroll-vertically > div:nth-child(7) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-purple.svg') !important;
}

.quick-links-btn[data-link-key="tb-risk"],
#scroll-vertically > div:nth-child(8) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-mint.svg') !important;
}

.quick-links-btn[data-link-key="active-residents"],
#scroll-vertically > div:nth-child(9) .quick-links-btn {
  background-image: url('/assets/jelly-icons/link-bg-cyan.svg') !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE OPTIMIZATION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .dashboard-stats .stats-card {
    min-height: 115px !important;
    padding: 0.9rem 1.1rem !important;
    margin-bottom: 0.85rem !important;
  }
  .dashboard-stats .stats-icon {
    width: 52px !important;
    height: 52px !important;
    margin-right: 0.95rem !important;
  }
  .dashboard-stats .stats-counter {
    font-size: 1.85rem !important;
  }
  .dashboard-stats .stats-title {
    font-size: 0.88rem !important;
  }
  #scroll-vertically {
    max-height: 320px !important;
  }
}

@media (max-width: 576px) {
  .dashboard-stats .stats-card {
    min-height: 105px !important;
    padding: 0.8rem 1rem !important;
  }
  .quick-links-name {
    font-size: 0.90rem !important;
  }
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY & REDUCED MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dashboard-stats .stats-card,
  .quick-links-btn,
  .quick-link-jelly-icon,
  .quick-link-arrow-circle,
  .quick-link-arrow-circle svg,
  .quick-links-btn .arrow-icon {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}