/* ==========================================================================
   CARENOTE - ULTRA-PREMIUM MODERN HEALTHCARE DESIGN SYSTEM & THEME
   Replaces outdated reference design with an attractive, state-of-the-art,
   accessible, and distinctive healthcare clinical SaaS experience.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('smart-autofill.css');

:root {
  /* Core Brand Colors */
  --cn-navy-950: #060b17;
  --cn-navy-900: #0a1124;
  --cn-navy-850: #0f172a;
  --cn-navy-800: #1e293b;
  --cn-navy-700: #334155;
  
  --cn-blue-600: #2563eb;
  --cn-blue-500: #3b82f6;
  --cn-blue-400: #60a5fa;
  
  --cn-cyan-600: #0284c7;
  --cn-cyan-500: #0ea5e9;
  --cn-cyan-400: #38bdf8;
  --cn-cyan-100: #e0f2fe;
  --cn-cyan-50:  #f0f9ff;
  
  --cn-teal-600: #0d9488;
  --cn-teal-500: #14b8a6;
  --cn-emerald:  #10b981;
  
  --cn-surface:   #ffffff;
  --cn-bg:        #f8fafc;
  --cn-border:    #e2e8f0;
  --cn-text-main: #0f172a;
  --cn-text-muted:#64748b;
  
  /* Gradients */
  --cn-grad-primary: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #1d4ed8 100%);
  --cn-grad-hero:    linear-gradient(145deg, rgba(10, 17, 36, 0.92) 0%, rgba(20, 35, 75, 0.85) 50%, rgba(2, 132, 199, 0.75) 100%);
  --cn-grad-accent:  linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --cn-grad-badge:   linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
  
  /* Shadows */
  --cn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --cn-shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --cn-shadow-xl: 0 20px 40px -6px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(226, 232, 240, 0.8);
  --cn-shadow-glow: 0 0 25px rgba(2, 132, 199, 0.35);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & SMOOTHING
   ========================================================================== */
body, html {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f4f9 50%, #eaf0f8 100%) !important;
  background-attachment: fixed !important;
  color: var(--cn-text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   LOGIN SCREEN HERO SECTION (LEFT SIDE)
   ========================================================================== */
.login-carousel {
  background-image: url(/assets/background-DzvSxdmK.png) !important;
  background-position: center center !important;
  background-size: cover !important;
  position: relative !important;
  height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* High-Tech Sapphire & Deep Navy Overlay */
.login-carousel:before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--cn-grad-hero) !important;
  opacity: 0.92 !important;
  z-index: 1 !important;
}

/* Floating Light Rays Animation */
.login-carousel:after {
  content: "" !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(99, 102, 241, 0.12) 0%, transparent 45%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  animation: cnPulseLights 12s ease-in-out infinite alternate !important;
}

@keyframes cnPulseLights {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.1) rotate(5deg); }
}

/* Content Container Inside Left Carousel */
.login-carousel .carousel {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 580px !important;
  padding: 40px !important;
  margin: 0 auto !important;
}

.login-carousel .carousel-inner {
  margin-top: 0 !important;
}

/* Dedicated Frosted Glass Slide Card */
.login-carousel .carousel-item {
  background: rgba(10, 17, 36, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 28px !important;
  padding: 44px 36px 36px 36px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(56, 189, 248, 0.25) !important;
  color: #ffffff !important;
  transition: all 0.5s ease-in-out !important;
}

/* Prominent CareNote Website Logo in Carousel */
.carousel-hero-brand {
  text-align: center;
  margin-bottom: 24px;
}

.carousel-logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.98);
  padding: 14px 28px;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(56, 189, 248, 0.4);
  animation: cnFloat 4s ease-in-out infinite;
}

.carousel-logo-wrapper img {
  max-height: 46px;
  width: auto;
  display: block;
}

@keyframes cnFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.login-carousel h3 {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  margin-bottom: 16px !important;
}

.login-carousel p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #e2e8f0 !important;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}

/* Feature Badge Pill List under Carousel */
.login-carousel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.login-carousel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  backdrop-filter: blur(10px);
}

/* Modern Carousel Indicators */
.login-carousel .carousel-indicators {
  bottom: -35px !important;
}

.login-carousel .carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
  border: none !important;
  margin: 0 5px !important;
  transition: all 0.3s ease !important;
}

.login-carousel .carousel-indicators button.active {
  width: 28px !important;
  border-radius: 10px !important;
  background: var(--cn-cyan-400) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7) !important;
}

/* ==========================================================================
   LOGIN SCREEN FORM (RIGHT SIDE)
   ========================================================================== */
.login-cred {
  padding: 40px 20px !important;
}

/* Replace Harsh Red & Yellow Blobs with Smooth Ethereal Ambiance */
.bg-blur {
  filter: blur(90px) !important;
  opacity: 0.7 !important;
}

.bg-blur:before {
  background-color: rgba(56, 189, 248, 0.14) !important; /* Soft Sky Cyan */
  width: 380px !important;
  height: 380px !important;
}

.bg-blur .round-1 {
  background-color: rgba(99, 102, 241, 0.12) !important; /* Soft Indigo */
  width: 320px !important;
  height: 320px !important;
}

.bg-blur .round-2 {
  background-color: rgba(16, 185, 129, 0.1) !important; /* Soft Mint */
  width: 340px !important;
  height: 340px !important;
}

/* Login Logo on Right Form */
.login-logo {
  margin-bottom: 24px !important;
}

.login-logo img {
  max-height: 68px !important;
  filter: drop-shadow(0 6px 16px rgba(2, 132, 199, 0.18)) !important;
  transition: transform 0.3s ease !important;
}

.login-logo img:hover {
  transform: scale(1.03) !important;
}

/* Card Container */
.login-cred .card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: var(--cn-shadow-xl) !important;
  padding: 12px !important;
}

.right-div-login-page h4 {
  color: var(--cn-navy-850) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px !important;
}

/* Form Input Styling */
.right-div-login-page .form-control {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cn-navy-900) !important;
  background-color: #f8fafc !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.right-div-login-page .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--cn-cyan-600) !important;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15) !important;
  outline: none !important;
}

.right-div-login-page .form-label,
.right-div-login-page label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--cn-navy-700) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
}

/* Primary Login Button */
.login_btn {
  background: var(--cn-grad-primary) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 10px 20px -3px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login_btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 15px 25px -4px rgba(37, 99, 235, 0.55) !important;
  filter: brightness(1.05) !important;
}

.login_btn:active {
  transform: translateY(0) !important;
}

/* Links & Secondary Buttons */
.forget_password {
  color: var(--cn-cyan-600) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
}

.forget_password:hover {
  color: var(--cn-blue-600) !important;
  text-decoration: underline !important;
}

/* Credential Hint Card */
#carenote-credential-hint {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid #bae6fd !important;
  border-radius: 12px !important;
  color: #0369a1 !important;
  font-weight: 500 !important;
  box-shadow: var(--cn-shadow-sm) !important;
}

/* ==========================================================================
   GLOBAL IN-APP PORTAL STYLING (THE ENTIRE PLATFORM)
   ========================================================================== */

/* Top Navigation Bar */
.page-top-bar,
.navbar-custom,
.main-header,
nav.navbar {
  background: linear-gradient(135deg, #0a1124 0%, #0f172a 60%, #1e293b 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  color: #ffffff !important;
}

/* Sidebar Styling */
.sidebar,
.side-menu,
.nav-div-personal {
  background: #ffffff !important;
  border-right: 1px solid var(--cn-border) !important;
}

.sidebar .active,
.side-menu .active,
.nav-link.active {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%) !important;
  color: var(--cn-blue-600) !important;
  border-left: 3px solid var(--cn-cyan-600) !important;
  font-weight: 600 !important;
}

/* Primary Action Buttons across all forms */
.initalsubmit,
.initalsubmitRisistent,
.timesheetButton,
.upload-button,
.upload-button-complete-form,
.safetybutton,
.btn-primary,
button.primary-btn {
  background: var(--cn-grad-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.25s ease !important;
}

.initalsubmit:hover,
.initalsubmitRisistent:hover,
.timesheetButton:hover,
.upload-button:hover,
.safetybutton:hover,
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(2, 132, 199, 0.45) !important;
  filter: brightness(1.06) !important;
}

/* Secondary Cancel / Back Buttons */
.edit-time-btn-cancel,
.Cancel,
.btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--cn-navy-700) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.edit-time-btn-cancel:hover,
.Cancel:hover,
.btn-secondary:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: var(--cn-navy-900) !important;
}

/* Form Container & Cards */
.booking-section,
.profile-section,
.all-office-panel,
.bottom-part,
.single-part {
  background: #ffffff !important;
  border: 1px solid var(--cn-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--cn-shadow-md) !important;
}

/* Tables Modern Styling */
table.colored_table,
.needs-interventions-table {
  border-radius: 12px !important;
  overflow: hidden !important;
}

table.colored_table th,
.needs-interventions-table th {
  background: #f1f5f9 !important;
  color: var(--cn-navy-850) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 2px solid var(--cn-border) !important;
}

table.colored_table td {
  border-bottom: 1px solid #f1f5f9 !important;
  color: var(--cn-navy-800) !important;
  font-size: 14px !important;
}

/* Custom Radios & Checkboxes */
.custom-radio:checked {
  border-color: var(--cn-cyan-600) !important;
  background-color: var(--cn-cyan-600) !important;
}

.custom-radio:checked + label {
  color: var(--cn-cyan-600) !important;
  font-weight: 600 !important;
}

/* Badges & Pills */
.release-notes-version,
span.unread-msg {
  background: var(--cn-grad-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

/* Modals */
.modal-content {
  border: 1px solid var(--cn-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--cn-shadow-xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--cn-border) !important;
  background: #f8fafc !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

/* ==========================================================================
   HOMEPAGE / DASHBOARD TOP BANNER (TRANSPARENT PINK JELLY STYLE)
   ========================================================================== */
.HomePageDashboard,
.card.HomePageDashboard {
  position: relative !important;
  width: 100% !important;
  min-height: 150px !important;
  background-color: transparent !important;
  background-image: url('/assets/pink-jelly-banner.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  border-radius: 28px !important;
  border: none !important;
  box-shadow: 0 16px 36px -6px rgba(244, 63, 94, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.4) inset !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

/* Completely remove the old SVG pattern pseudo element */
.HomePageDashboard:after,
.card.HomePageDashboard:after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  background: none !important;
}

/* Completely remove old turquoise background */
.HomePageDashboard,
.HomePageDashboard.bg-primary-gt,
.HomePageDashboard.bg-secondary-subtle {
  background-color: transparent !important;
}

/* Completely remove the old doctor illustration */
.HomePageDashboard img[src*="doctor-appoint"],
.HomePageDashboard img[alt*="welcome-patient"],
.HomePageDashboard .align-self-end:has(img[src*="doctor-appoint"]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Banner Internal Grid / Flex Layout */
.HomePageDashboard .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 150px !important;
  padding: 16px 36px !important;
  margin: 0 !important;
}

/* Column 1: Left Welcome text */
.HomePageDashboard .row > div:nth-child(1) {
  flex: 0 0 auto !important;
  max-width: 38% !important;
  width: 38% !important;
  text-align: left !important;
  padding: 0 !important;
  z-index: 2 !important;
}

/* Column 2: Center Main Heading */
.HomePageDashboard .row > div:nth-child(2) {
  flex: 1 1 auto !important;
  width: 62% !important;
  max-width: 62% !important;
  text-align: center !important;
  padding: 0 20px !important;
  z-index: 2 !important;
}

/* Column 3: Old Doctor Illustration Container - hide so center text is balanced */
.HomePageDashboard .row > div:nth-child(3) {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Banner Typography */
.HomePageDashboard h4,
.HomePageDashboard h4 span {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(159, 18, 57, 0.45) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
}

.HomePageDashboard .row > div:nth-child(2) h4,
.HomePageDashboard .row > div:nth-child(2) h4 span {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.HomePageDashboard h6 {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  text-shadow: 0 1px 4px rgba(159, 18, 57, 0.4) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
}

.HomePageDashboard .card-body {
  padding: 8px 0 !important;
}

.HomePageDashboard .py-lg-7 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Responsive adjustments for Tablets & Mobile Screens */
@media screen and (max-width: 991px) {
  .HomePageDashboard,
  .card.HomePageDashboard {
    min-height: auto !important;
    background-size: cover !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px -4px rgba(244, 63, 94, 0.25) !important;
  }
  .HomePageDashboard .row {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 24px 20px !important;
    gap: 16px !important;
    min-height: auto !important;
  }
  .HomePageDashboard .row > div:nth-child(1) {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
  }
  .HomePageDashboard .row > div:nth-child(2) {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .HomePageDashboard h4,
  .HomePageDashboard .row > div:nth-child(2) h4,
  .HomePageDashboard .row > div:nth-child(2) h4 span {
    font-size: 1.15rem !important;
    text-align: center !important;
  }
  .HomePageDashboard h6 {
    font-size: 0.9rem !important;
    text-align: center !important;
  }
}

@media screen and (max-width: 576px) {
  .HomePageDashboard,
  .card.HomePageDashboard {
    border-radius: 16px !important;
  }
  .HomePageDashboard .row {
    padding: 18px 14px !important;
    gap: 12px !important;
  }
  .HomePageDashboard h4,
  .HomePageDashboard .row > div:nth-child(2) h4,
  .HomePageDashboard .row > div:nth-child(2) h4 span {
    font-size: 1.05rem !important;
  }
  .HomePageDashboard h6 {
    font-size: 0.85rem !important;
  }
}


/* ==========================================================================
   CARENOTE JELLY-GLASSMORPHISM & ANIMATED 3D ICONS DESIGN SYSTEM
   ========================================================================== */

/* Page Background Container */
.wrapper-content,
.content-wrappper,
.wcomp,
.dashboard-page,
.patient_chart_container {
  background: transparent !important;
}

/* ==========================================================================
   PASTEL JELLY-GLASSMORPHISM SIDEBAR (MATCHING REFERENCE DESIGN)
   Fluid blend of pastel pink, lavender, mint green, light cyan, peach & cream
/* ==========================================================================
   PASTEL JELLY-GLASSMORPHISM SIDEBAR & NAVIGATION SYSTEM
   Fluid blend of pastel pink, lavender, mint green, light cyan, peach & cream
   with 3D glossy reflections, translucent gradients, and dark navy typography.
   ========================================================================== */

/* Outer asidebar wrapper - fixed dock on desktop with full scrollability */
.asidebar,
div.asidebar {
  position: fixed !important;
  top: 70px !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 250px !important;
  height: calc(100vh - 70px) !important;
  z-index: 40 !important;
  background-color: #fdf2f8 !important;
  background-image:
    url('/assets/pastel-jelly-sidebar.svg'),
    linear-gradient(180deg, #fce7f3 0%, #ede9fe 25%, #fef3c7 50%, #ccfbf1 75%, #fbcfe8 100%) !important;
  background-size: cover, cover !important;
  background-position: center bottom, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow: 4px 0 28px rgba(244, 114, 182, 0.18), inset 0 0 1px rgba(255, 255, 255, 0.9) !important;
  border-right: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Custom Sleek Scrollbar for Sidebar */
.asidebar::-webkit-scrollbar {
  width: 5px !important;
}
.asidebar::-webkit-scrollbar-track {
  background: transparent !important;
}
.asidebar::-webkit-scrollbar-thumb {
  background: rgba(244, 114, 182, 0.35) !important;
  border-radius: 10px !important;
}
.asidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 114, 182, 0.65) !important;
}

/* Inner sidebar container */
.outer-sidebar,
aside.outer-sidebar {
  width: 100% !important;
  min-height: 100% !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 12px 6px 36px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Right content panel offset to accommodate 250px sidebar */
.right-content,
div.right-content {
  margin-left: 250px !important;
  width: calc(100% - 250px) !important;
  max-width: calc(100% - 250px) !important;
  box-sizing: border-box !important;
}

/* Specular edge highlight on sidebar */
.asidebar::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(244, 114, 182, 0.4) 100%) !important;
  pointer-events: none !important;
}

.outer-siderbar-nav {
  flex: 1 1 auto !important;
}

.outer-siderbar-nav ul {
  padding: 8px 6px !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Sidebar Menu Items - Dark Navy Typography for Strong Contrast */
.outer-sidebar .menu-item {
  color: #0f172a !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.93rem !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  margin: 4px 6px !important;
  padding: 11px 14px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  border: 1px solid transparent !important;
  gap: 12px !important;
  line-height: 1.3 !important;
}

.outer-sidebar .menu-item .text {
  color: #0f172a !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  transition: color 0.2s ease !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Icons, dropdown arrows, and SVGs */
.outer-sidebar .menu-item svg,
.outer-sidebar .menu-item i,
.outer-sidebar .menu-item .submenu-arrow {
  color: #0f172a !important;
  stroke: #0f172a !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease, stroke 0.2s ease !important;
}

.outer-sidebar .menu-item img {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  filter: brightness(0.2) saturate(1.8) !important;
  transition: filter 0.2s ease !important;
}

/* Submenu container alignment */
.outer-sidebar .has-submenu {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.outer-sidebar .has-submenu-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
}

.outer-sidebar .submenu-arrow {
  margin-left: auto !important;
}

/* Hover State - Soft Translucent Glass Lift */
.outer-sidebar .menu-item:hover {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 14px rgba(244, 114, 182, 0.14), inset 0 0 10px rgba(255, 255, 255, 0.75) !important;
  transform: translateX(3px) !important;
}

.outer-sidebar .menu-item:hover .text {
  color: #0284c7 !important;
}

.outer-sidebar .menu-item:hover svg,
.outer-sidebar .menu-item:hover .submenu-arrow {
  color: #0284c7 !important;
  stroke: #0284c7 !important;
}

.outer-sidebar .menu-item:hover img {
  filter: brightness(0.4) saturate(2) hue-rotate(180deg) !important;
}

/* ==========================================================================
   ACTIVE MENU ITEM - GENTLE JELLY-STYLE HIGHLIGHT
   ========================================================================== */
.outer-sidebar .menu-item.active,
.outer-sidebar .menu-item.has-submenu.active,
.outer-sidebar li.active > .menu-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(253, 232, 243, 0.9) 50%, rgba(243, 232, 255, 0.95) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 20px -3px rgba(244, 114, 182, 0.28),
    inset 0 0 12px rgba(255, 255, 255, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Top specular reflection arc on active jelly pill */
.outer-sidebar .menu-item.active::before,
.outer-sidebar .menu-item.has-submenu.active::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 10px !important;
  right: 10px !important;
  height: 38% !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  pointer-events: none !important;
}

.outer-sidebar .menu-item.active .text,
.outer-sidebar .menu-item.has-submenu.active .text {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.outer-sidebar .menu-item.active svg,
.outer-sidebar .menu-item.active i,
.outer-sidebar .menu-item.active .submenu-arrow,
.outer-sidebar .menu-item.has-submenu.active .submenu-arrow {
  color: #0f172a !important;
  stroke: #0f172a !important;
}

/* ==========================================================================
   SIDEBAR SUBMENU - TRANSLUCENT PASTEL GLASS ACCENTS
   ========================================================================== */
.outer-sidebar .sidebar-submenu {
  list-style: none !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 14px !important;
  margin: 4px 6px 8px 12px !important;
  padding: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-left: 3px solid #f472b6 !important;
  box-shadow: 0 4px 14px rgba(244, 114, 182, 0.12), inset 0 0 8px rgba(255, 255, 255, 0.65) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.outer-sidebar .sub-menu-item {
  padding: 8px 12px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  border-radius: 10px !important;
  margin: 2px 0 !important;
  gap: 10px !important;
  transition: all 0.2s ease !important;
}

.outer-sidebar .sub-menu-item .text {
  color: #1e293b !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
}

.outer-sidebar .sub-menu-item svg,
.outer-sidebar .sub-menu-item img.sub-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.outer-sidebar .sub-menu-item:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #0284c7 !important;
  transform: translateX(3px) !important;
}

.outer-sidebar .sub-menu-item:hover .text {
  color: #0284c7 !important;
}

.outer-sidebar .sub-menu-item.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 231, 243, 0.92) 100%) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 3px 10px rgba(244, 114, 182, 0.18) !important;
}

.outer-sidebar .sub-menu-item.active .text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* App version footer inside sidebar */
.outer-sidebar .app-verion-text {
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  padding: 10px 14px !important;
  text-align: center !important;
}

.outer-sidebar .app-verion-text a {
  color: #64748b !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  transition: all 0.2s ease !important;
}

.outer-sidebar .app-verion-text a:hover {
  color: #0f172a !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

/* Mobile & Tablet Drawer Responsive Rules */
@media screen and (max-width: 767px) {
  .asidebar,
  div.asidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -270px !important;
    width: 250px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2) !important;
  }
  .asidebar.left-0,
  div.asidebar.left-0,
  div.asidebar:not(.-left-full) {
    left: 0 !important;
  }
  .right-content,
  div.right-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Header / Top Navigation Bar (Clean Translucent White Glass) */
.page-top-bar,
.navbar-custom,
.main-header,
nav.navbar,
header.header-container {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1.5px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

/* ==========================================================================
   RESIDENT CHART & SERVICE CARDS (SOFT JELLY-GLASSMORPHISM GRID)
   ========================================================================== */

/* Grid item container */
.dashboard_cont {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
  perspective: 1000px !important;
}

/* The Jelly Glass Card */
.chart_images,
.small-card.chart_images {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 220px !important;
  height: 100% !important;
  padding: 28px 18px 46px 18px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 26px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: cnCardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

/* Card Hover Lift & Jelly Glow */
.chart_images:hover {
  transform: translateY(-8px) scale(1.018) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 24px 44px -8px rgba(14, 165, 233, 0.22), 0 0 26px rgba(56, 189, 248, 0.16), 0 0 0 1.5px rgba(255, 255, 255, 0.95) inset !important;
}

/* Glass Reflection Sheen Sweep */
.chart_images:before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -130% !important;
  width: 80% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent) !important;
  transform: skewX(-25deg) !important;
  transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.chart_images:hover:before {
  left: 150% !important;
}

/* Circular Translucent Glass Arrow Action Badge */
.chart_images:after {
  content: "→" !important;
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(240, 249, 255, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0284c7 !important;
  line-height: 1 !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 4 !important;
}

.chart_images:hover:after {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
  transform: translateX(3px) scale(1.12) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
}

/* 3D Jelly Icon Styling & Soft Floating Animation */
.chart_images img,
.chart_images .image img,
.small-card .card-icon {
  width: 90px !important;
  height: 90px !important;
  max-width: 90px !important;
  max-height: 90px !important;
  object-fit: contain !important;
  margin-bottom: 16px !important;
  background: radial-gradient(circle, rgba(224, 242, 254, 0.65) 0%, rgba(240, 249, 255, 0.25) 55%, transparent 75%) !important;
  border-radius: 50% !important;
  padding: 4px !important;
  filter: drop-shadow(0 10px 18px rgba(14, 165, 233, 0.24)) !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease !important;
  animation: cnJellyFloat 4.6s ease-in-out infinite !important;
  z-index: 2 !important;
}

.chart_images:hover img,
.chart_images:hover .image img,
.small-card:hover .card-icon {
  transform: translateY(-6px) scale(1.08) !important;
  filter: drop-shadow(0 16px 26px rgba(14, 165, 233, 0.38)) !important;
}

/* Service Card Typography */
.chart_images p,
.small-card p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: center !important;
  line-height: 1.35 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
  padding: 0 6px !important;
  max-width: 95% !important;
  z-index: 2 !important;
  transition: color 0.25s ease !important;
}

.chart_images:hover p,
.small-card:hover p {
  color: #0284c7 !important;
}

/* Disabled/Restricted State */
.chart_images.disabled-link,
.dashboard_cont.disabled-link .chart_images,
.small-card.disabled-link {
  opacity: 0.55 !important;
  filter: grayscale(0.2) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ==========================================================================
   TOP BANNER ANIMATED GLASS EFFECT
   ========================================================================== */
.HomePageDashboard:before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent) !important;
  transform: skewX(-20deg) !important;
  animation: cnBannerGlassShimmer 9s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ==========================================================================
   DASHBOARD QUICK STATS & QUICK LINKS JELLY EFFECT
   ========================================================================== */
.stats-card {
  background: rgba(255, 255, 255, 0.76) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px -3px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.5) inset !important;
  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.stats-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px -4px rgba(14, 165, 233, 0.18) !important;
}

.stats-icon.blue-soft {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
  color: #0284c7 !important;
  border-radius: 16px !important;
}

.stats-icon.purple-soft {
  background: linear-gradient(135deg, rgba(192, 132, 252, 0.2) 0%, rgba(126, 34, 206, 0.25) 100%) !important;
  color: #7e22ce !important;
  border-radius: 16px !important;
}

.stats-icon.green-soft {
  background: linear-gradient(135deg, rgba(110, 231, 183, 0.2) 0%, rgba(16, 185, 129, 0.25) 100%) !important;
  color: #059669 !important;
  border-radius: 16px !important;
}

.stats-icon.yellow-soft {
  background: linear-gradient(135deg, rgba(253, 224, 71, 0.2) 0%, rgba(217, 119, 6, 0.25) 100%) !important;
  color: #d97706 !important;
  border-radius: 16px !important;
}

.quick-links-btn {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.quick-links-btn:hover {
  background: #ffffff !important;
  transform: translateX(5px) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.16) !important;
}

/* ==========================================================================
   LIGHTWEIGHT KEYFRAME ANIMATIONS & ACCESSIBILITY
   ========================================================================== */

/* Page load card entrance */
@keyframes cnCardEntrance {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle floating jelly icon bob */
@keyframes cnJellyFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.8deg);
  }
}

/* Top banner glass sheen */
@keyframes cnBannerGlassShimmer {
  0% {
    left: -120%;
  }
  35%, 100% {
    left: 140%;
  }
}

/* Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chart_images img,
  .chart_images .image img,
  .small-card .card-icon {
    animation: none !important;
  }
  .chart_images:before,
  .HomePageDashboard:before {
    animation: none !important;
    display: none !important;
  }
}