/* ============================================
   Messliner — Dashboard Layout (dashboard.css)
   ============================================ */

.app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: relative;
  background-color: #f0fdf4;
  background-image:
    linear-gradient(to right, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, #ECFDF5 0%, #F0FDF9 50%, #ECFDF5 100%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  background-attachment: fixed;
}

/* ======== SIDEBAR (Desktop) ======== */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: #FFFFFF;
  border-right: 1px solid rgba(16, 185, 129, 0.12);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  transition: transform var(--transition-slow);
  box-shadow: 4px 0 24px rgba(5, 150, 105, 0.04);
  overflow: hidden;
  overscroll-behavior: none;
}

.sidebar-brand {
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 0 var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid rgba(16, 185, 129, 0.12);
  box-sizing: border-box;
  flex-shrink: 0;
}

.sidebar-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(16, 185, 129, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.10);
}

.sidebar-brand-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-brand-text h3 {
  font-size: var(--font-md);
  font-weight: var(--weight-bold);
  color: #0F2E1E;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sidebar-brand-text span {
  font-size: var(--font-xs);
  color: #059669;
  font-weight: var(--weight-semibold);
}

/* ---- Sidebar Nav ---- */
.sidebar-nav {
  flex: 1;
  padding: var(--space-4) var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-bold);
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}

.sidebar-section-label:first-child {
  margin-top: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  border-radius: var(--radius-lg);
  color: #475569;
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 3px;
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}

.nav-item:hover {
  background: #F0FDF4;
  color: #047857;
  transform: translateX(2px);
}

.nav-item.active {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #065F46;
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 18%;
  bottom: 18%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #059669, #10B981);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-item .nav-badge {
  margin-left: auto;
  background: #FEE2E2;
  color: #EF4444;
  border: 1px solid #FCA5A5;
  font-size: 11px;
  font-weight: var(--weight-bold);
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

/* ---- Sidebar Footer ---- */
.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid rgba(16, 185, 129, 0.10);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item-help:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669 !important;
}

.sidebar-footer .nav-item-logout,
.nav-item-logout {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: var(--radius-lg, 10px);
  transition: all 0.2s ease;
  font-weight: 600 !important;
}

.sidebar-footer .nav-item-logout svg,
.nav-item-logout svg {
  color: #ef4444 !important;
  stroke: #ef4444 !important;
}

.sidebar-footer .nav-item-logout:hover,
.nav-item-logout:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #dc2626 !important;
}

.sidebar-footer .nav-item-logout:hover svg,
.nav-item-logout:hover svg {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2.5) var(--space-3);
  border-radius: var(--radius-xl);
  background: #F8FAFC;
  border: 1px solid rgba(16, 185, 129, 0.12);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-user:hover {
  background: #ECFDF5;
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: #0F2E1E;
}

.sidebar-user-role {
  font-size: var(--font-xs);
  color: #059669;
  font-weight: var(--weight-medium);
}

/* ======== MAIN CONTENT ======== */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: relative;
  min-width: 0;
}

/* ======== TOP HEADER ======== */
.top-header {
  position: sticky;
  top: 0;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #E2E8F0;
  padding: 0 var(--space-6);
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
}

.header-text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.header-greeting {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #059669;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 1px;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0F2E1E;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.header-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E293B;
  background: rgba(5, 150, 105, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.15);
  transition: all var(--transition-fast);
  position: relative;
  cursor: pointer;
}

.header-icon-btn:hover {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}

.header-icon-btn svg {
  width: 22px;
  height: 22px;
}

/* ---- Sync Indicator ---- */
.sync-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
}

.sync-indicator.connected {
  color: var(--accent-600);
}

.sync-indicator.disconnected {
  color: var(--danger-600);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

/* ======== CONTENT AREA ======== */
.content-area {
  flex: 1;
  height: calc(100vh - 68px);
  height: calc(100dvh - 68px);
  max-height: calc(100dvh - 68px);
  padding: var(--space-6);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-sizing: border-box;
}

/* ======== FLOATING PILL BOTTOM NAVIGATION (Mobile Dock) ======== */
.bottom-nav {
  display: none;
  position: fixed !important;
  bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
  left: 16px !important;
  right: 16px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  height: 64px !important;
  background: #FFFFFF !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  z-index: 1000 !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex !important;
  }
}

.bottom-nav-items {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 100% !important;
  width: 100% !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom-nav-item {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 9999px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  text-decoration: none;
  cursor: pointer;
  color: #64748B;
  padding: 4px 6px;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative;
}

.bottom-nav-item:active {
  transform: none !important;
}

.bottom-nav-item svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  stroke: #64748B;
  stroke-width: 1.5px !important;
  transform: none !important;
  transition: color 0.15s ease, stroke 0.15s ease;
}

.bottom-nav-item span {
  font-size: 10px !important;
  font-weight: 550 !important;
  color: #64748B;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  transform: none !important;
  white-space: nowrap;
}

/* Active Tab: Enclosed Pill Capsule Background (No Size Change) */
.bottom-nav-item.active {
  background: #ECFDF5 !important;
  color: #047857 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  transform: none !important;
}

.bottom-nav-item.active svg {
  stroke: #059669 !important;
  stroke-width: 1.5px !important;
  transform: none !important;
}

.bottom-nav-item.active span {
  color: #047857 !important;
  font-size: 10px !important;
  font-weight: 550 !important;
  transform: none !important;
}

/* Bottom Nav Custom Outline/Fill Icon Switching (Fixed 24px, Zero Scale) */
.bottom-nav-item .icon-outline,
.bottom-nav-item .icon-filled {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

.bottom-nav-item .icon-outline {
  display: block !important;
  stroke: #64748B !important;
  fill: none !important;
}

.bottom-nav-item .icon-filled {
  display: none !important;
}

.bottom-nav-item .icon-outline [fill="currentColor"] {
  fill: #64748B !important;
  stroke: none !important;
}

.bottom-nav-item:hover:not(.active) .icon-outline {
  stroke: #0F172A !important;
}

.bottom-nav-item:hover:not(.active) .icon-outline [fill="currentColor"] {
  fill: #0F172A !important;
  stroke: none !important;
}

body.dark-theme .bottom-nav-item .icon-outline {
  stroke: #94A3B8 !important;
}

body.dark-theme .bottom-nav-item .icon-outline [fill="currentColor"] {
  fill: #94A3B8 !important;
  stroke: none !important;
}

body.dark-theme .bottom-nav-item:hover:not(.active) .icon-outline {
  stroke: #F8FAFC !important;
}

body.dark-theme .bottom-nav-item:hover:not(.active) .icon-outline [fill="currentColor"] {
  fill: #F8FAFC !important;
  stroke: none !important;
}

.bottom-nav-item.active .icon-outline {
  display: none !important;
}

.bottom-nav-item.active .icon-filled {
  display: block !important;
  color: #059669 !important;
  stroke: #059669;
  fill: #059669;
  transform: none !important;
}

.bottom-nav-item.active .icon-filled [fill="none"] {
  fill: none !important;
  stroke: #059669 !important;
  stroke-width: 1.5px !important;
}

.bottom-nav-item.active .icon-filled [fill="currentColor"] {
  fill: #059669 !important;
}

.bottom-nav-item.active .icon-filled [stroke="currentColor"] {
  stroke: #059669 !important;
}

body.dark-theme .bottom-nav-item.active .icon-filled {
  color: #34D399 !important;
  stroke: #34D399;
  fill: #34D399;
  transform: none !important;
}

body.dark-theme .bottom-nav-item.active .icon-filled [fill="none"] {
  fill: none !important;
  stroke: #34D399 !important;
  stroke-width: 1.5px !important;
}

body.dark-theme .bottom-nav-item.active .icon-filled [fill="currentColor"] {
  fill: #34D399 !important;
}

body.dark-theme .bottom-nav-item.active .icon-filled [stroke="currentColor"] {
  stroke: #34D399 !important;
}

.bottom-nav-item.active .icon-filled mask [fill="white"] {
  fill: #FFFFFF !important;
  stroke: none !important;
}

.bottom-nav-item.active .icon-filled mask [stroke="black"] {
  stroke: #000000 !important;
  fill: none !important;
}

.bottom-nav-item svg,
.bottom-nav-item svg *,
.bottom-nav-item.active svg,
.bottom-nav-item.active svg *,
body.dark-theme .bottom-nav-item svg,
body.dark-theme .bottom-nav-item svg *,
body.dark-theme .bottom-nav-item.active svg,
body.dark-theme .bottom-nav-item.active svg * {
  stroke-width: 1.5px !important;
}

/* Remove legacy top indicator line */
.bottom-nav-item.active::before,
.bottom-nav-item.active::after,
.bottom-nav-item::before,
.bottom-nav-item::after {
  display: none !important;
  content: none !important;
}

/* Sliding pill indicator behind active bottom nav button (identical styling) */
.bottom-nav-items {
  position: relative !important;
}

.bottom-nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 9999px;
  background: #ECFDF5;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.12);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.15s ease;
  will-change: transform, width;
}

body.dark-theme .bottom-nav-indicator {
  background: rgba(16, 185, 129, 0.2) !important;
  box-shadow: none !important;
}

.bottom-nav-item {
  position: relative !important;
  z-index: 2 !important;
}

.bottom-nav.has-slider .bottom-nav-item.active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Smooth Professional Screen Transition (Zero Latency, Directional Glide) */
.page-section.active {
  display: block !important;
  opacity: 1 !important;
}

.page-section.active.slide-forward {
  animation: tabSlideForward 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.page-section.active.slide-backward {
  animation: tabSlideBackward 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

.page-section.active.slide-fade {
  animation: tabSlideFade 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform, opacity;
}

/* Dark Mode Theme Harmonization */
body.dark-theme .bottom-nav {
  background: #0E1A14 !important;
  border: 1px solid rgba(52, 211, 153, 0.22) !important;
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.6) !important;
}

body.dark-theme .bottom-nav-item {
  color: #94A3B8;
}

body.dark-theme .bottom-nav-item svg {
  stroke: #94A3B8;
}

body.dark-theme .bottom-nav-item span {
  color: #94A3B8;
}

body.dark-theme .bottom-nav-item.active {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

body.dark-theme .bottom-nav-item.active svg {
  stroke: #34D399 !important;
}

body.dark-theme .bottom-nav-item.active span {
  color: #A7F3D0 !important;
}

/* ======== DASHBOARD PAGE ======== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.meal-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  width: 100%;
  box-sizing: border-box;
}

/* ======== USERS PAGE ======== */
.users-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 18px);
  margin-bottom: var(--space-4, 20px);
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0f2e1e 0%, #064e3b 40%, #065f46 70%, #047857 100%);
  border-radius: 20px;
  padding: 24px 28px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(5, 78, 59, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

/* Decorative circles on users hero banner matching finance banner */
.users-header::before {
  content: '';
  position: absolute;
  top: -45px;
  right: 50px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.14);
  background: rgba(16, 185, 129, 0.06);
  pointer-events: none;
}

.users-header::after {
  content: '';
  position: absolute;
  bottom: -35px;
  right: 175px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.12);
  background: rgba(16, 185, 129, 0.04);
  pointer-events: none;
}

/* Keep header content above decorative circles */
.users-header>* {
  position: relative;
  z-index: 2;
}

.users-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.users-header-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a7f3d0;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.users-header:hover .users-header-icon-box {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.18);
}

.users-header-text {
  min-width: 0;
}

.users-header h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}

.users-header #usersSubtitle {
  font-size: 0.85rem;
  color: rgba(167, 243, 208, 0.88);
  margin: 4px 0 0 0;
  font-weight: 400;
  line-height: 1.4;
}

.users-header .search-input-wrapper {
  position: relative;
  min-width: 240px;
}

.users-header .search-input-wrapper input.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 10px 14px 10px 38px;
  font-size: 0.85rem;
  color: #0f172a;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.users-header .search-input-wrapper input.form-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(167, 243, 208, 0.45);
}

.users-header .search-input-wrapper svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #059669;
  pointer-events: none;
}

.users-header .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  font-size: 0.85rem;
  font-weight: 650;
  border-radius: 12px;
  background: #ffffff;
  color: #064e3b;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.users-header .btn-primary svg {
  color: #059669;
}

.users-header .btn-primary:hover {
  transform: translateY(-1.5px);
  background: #ecfdf5;
  color: #047857;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.users-header .btn-primary:active {
  transform: translateY(0);
}

/* ======== MEALS HERO BANNER (Admin) ======== */
.meals-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 18px);
  margin-bottom: var(--space-4, 20px);
  background: linear-gradient(135deg, #0f2e1e 0%, #064e3b 40%, #065f46 70%, #047857 100%);
  border-radius: 20px;
  padding: 24px 28px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(5, 78, 59, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

/* Decorative circles on meals hero banner matching finance & members banner */
.meals-hero-banner::before {
  content: '';
  position: absolute;
  top: -45px;
  right: 50px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.14);
  background: rgba(16, 185, 129, 0.06);
  pointer-events: none;
}

.meals-hero-banner::after {
  content: '';
  position: absolute;
  bottom: -35px;
  right: 175px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.12);
  background: rgba(16, 185, 129, 0.04);
  pointer-events: none;
}

.meals-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.meals-hero-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.meals-hero-banner:hover .meals-hero-icon-box {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.meals-hero-text {
  min-width: 0;
}

.meals-hero-text h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}

.meals-hero-text p {
  font-size: 0.85rem;
  color: rgba(167, 243, 208, 0.88);
  margin: 4px 0 0 0;
  font-weight: 400;
  line-height: 1.4;
}

/* ======== ADD / EDIT MEMBER MODAL (Ultra-Pro Styling) ======== */
.member-modal-dialog {
  max-width: 480px !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow:
    0 25px 60px -12px rgba(6, 78, 59, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.member-modal-dialog .modal-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 24px 28px 20px 28px !important;
  background: linear-gradient(135deg, #0f2e1e 0%, #064e3b 45%, #065f46 75%, #047857 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Decorative ambient circle on modal header */
.member-modal-dialog .modal-header::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(167, 243, 208, 0.16);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.member-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.member-modal-icon-badge {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.member-modal-dialog:hover .member-modal-icon-badge {
  transform: scale(1.05);
}

#userModalTitle {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.member-modal-subtitle {
  font-size: 0.8125rem;
  color: rgba(167, 243, 208, 0.88);
  margin: 3px 0 0 0;
  font-weight: 400;
}

.member-modal-dialog .modal-close {
  position: relative !important;
  z-index: 2 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #a7f3d0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.member-modal-dialog .modal-close:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  transform: rotate(90deg) scale(1.08) !important;
}

.member-modal-dialog .modal-body {
  padding: 22px 26px !important;
}

.member-modal-dialog .form-group {
  margin-bottom: 16px;
}

.member-modal-dialog .form-group:last-child {
  margin-bottom: 0;
}

.member-modal-dialog .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}

.member-modal-dialog .form-label svg {
  color: #059669;
}

.modal-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.modal-input-wrap .input-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.2s ease;
}

.modal-input-wrap .input-prefix {
  position: absolute;
  left: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.2s ease;
}

.member-modal-dialog .form-input {
  width: 100%;
  height: 44px;
  padding: 10px 14px 10px 42px !important;
  border-radius: 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-size: 0.875rem !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box;
}

.member-modal-dialog .form-input.has-prefix {
  padding-left: 36px !important;
}

.member-modal-dialog .form-input:focus {
  background: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.15) !important;
}

.modal-input-wrap:focus-within .input-icon,
.modal-input-wrap:focus-within .input-prefix {
  color: #10b981 !important;
}

.member-modal-dialog .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 480px) {
  .member-modal-dialog .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.member-modal-dialog .modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 26px 22px 26px !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 0 !important;
}

.modal-btn-cancel {
  border-radius: 12px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.modal-btn-cancel:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.modal-btn-save {
  border-radius: 12px !important;
  padding: 10px 24px !important;
  font-weight: 650 !important;
  font-size: 0.85rem !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.4) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal-btn-save:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 20px -2px rgba(16, 185, 129, 0.5) !important;
}

.modal-btn-save:active {
  transform: translateY(0) !important;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
}

/* ======== MEALS PAGE ======== */
.meal-date-selector {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Custom Date Picker Container & Display */
.custom-date-picker-container {
  position: relative;
  display: inline-block;
  user-select: none;
}

.date-card-display-text {
  font-size: 13.5px;
  font-weight: 700;
  color: #0F2E1E;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* Custom Calendar Popup styled 1:1 to user reference image */
.custom-calendar-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  width: 290px;
  background: #F7FAF5;
  /* Soft off-white pastel green background matching reference image */
  border-radius: 20px;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  user-select: none;
  animation: calFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cal-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cal-header-title {
  font-size: 15px;
  font-weight: 700;
  color: #2E7D32;
  /* Emerald Green title like reference image */
  letter-spacing: -0.01em;
}

.cal-header-arrow {
  background: transparent;
  border: none;
  color: #2E7D32;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.cal-header-arrow:hover {
  background: rgba(46, 125, 50, 0.12);
  transform: scale(1.1);
}

.cal-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
}

.cal-weekdays-row span {
  font-size: 13px;
  font-weight: 600;
  color: #333333;
}

.cal-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 2px;
  text-align: center;
}

.cal-day-cell {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #333333;
}

.cal-day-cell:hover:not(.muted) {
  background: #E8F5E9;
  color: #2E7D32;
}

.cal-day-cell.muted {
  color: #CCCCCC;
  cursor: pointer;
}

.cal-day-cell.muted:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Selected Date: Filled Green Circle (matching '14' in reference image) */
.cal-day-cell.selected {
  background: #388E3C !important;
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(56, 142, 60, 0.35);
}

/* Today's Date: Ring Circle (matching '23' in reference image) */
.cal-day-cell.today:not(.selected) {
  border: 2px solid #388E3C;
  color: #388E3C;
  font-weight: 700;
  background: transparent;
}

/* Premium Glass Date Selector Card */
.glass-date-picker-card {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.glass-date-picker-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.date-picker-trigger-area {
  cursor: pointer;
  padding: 2px 6px 2px 2px;
  border-radius: var(--radius-lg);
  transition: opacity 0.2s ease;
}

.date-picker-trigger-area:hover {
  opacity: 0.88;
}

.date-card-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.9), rgba(167, 243, 208, 0.6));
  border: 1px solid rgba(16, 185, 129, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(5, 150, 105, 0.08);
}

.date-card-info {
  display: flex;
  flex-direction: column;
}

.date-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.2;
  margin-bottom: 2px;
}

.date-card-display-text {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Quick Controls Group */
.date-nav-group {
  border-left: 1px solid rgba(16, 185, 129, 0.18);
  margin-left: 4px;
}

.date-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: rgba(240, 253, 249, 0.8);
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.date-nav-btn:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.28);
  transform: translateY(-1px);
}

.date-today-pill {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  border: 1px solid #047857;
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.22);
}

.date-today-pill:hover {
  background: linear-gradient(135deg, #047857, #065F46);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35);
  transform: translateY(-1px);
}

.meal-type-tabs {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.meal-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--radius-xl);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-secondary);
  border: 1px solid rgba(16, 185, 129, 0.16);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  user-select: none;
}

.meal-type-tab * {
  pointer-events: none;
}

.meal-type-tab:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(16, 185, 129, 0.32);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
}

.meal-type-tab .meal-tab-glass-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.meal-type-tab .meal-tab-glass-icon.glass-breakfast {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.85), rgba(253, 230, 138, 0.65));
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #D97706;
}

.meal-type-tab .meal-tab-glass-icon.glass-lunch {
  background: linear-gradient(135deg, rgba(209, 250, 229, 0.85), rgba(167, 243, 208, 0.65));
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #059669;
}

.meal-type-tab .meal-tab-glass-icon.glass-dinner {
  background: linear-gradient(135deg, rgba(237, 233, 254, 0.85), rgba(221, 214, 254, 0.65));
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #7C3AED;
}

.meal-type-tab.active {
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  border-color: #047857;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.meal-type-tab.active .meal-tab-glass-icon {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.meal-type-tab.active .meal-tab-glass-icon circle,
.meal-type-tab.active .meal-tab-glass-icon rect,
.meal-type-tab.active .meal-tab-glass-icon path {
  fill: rgba(255, 255, 255, 0.35);
}

.meal-users-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: var(--space-6);
}

@media (max-width: 991px) {
  .meal-users-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dedicated Bulk Actions Glass Card Container */
.bulk-actions-glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius-xl);
  padding: 12px 18px;
  margin-bottom: 20px;
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: all 0.25s ease;
}

.bulk-actions-glass-card:hover {
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 6px 22px rgba(5, 150, 105, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Segmented Capsule Spinner for Bulk Meal Count (Sleek Compact Size) */
.bulk-segmented-spinner {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
  background: transparent;
  padding: 0;
  user-select: none;
}

/* Left Minus Button (-): Soft light pastel green tint */
.bulk-seg-btn.bulk-seg-minus {
  width: 32px;
  height: 100%;
  border: none;
  background: #E8F7F0;
  color: #047857;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.bulk-seg-btn.bulk-seg-minus:hover {
  background: #D1FAE5;
  color: #065F46;
}

.bulk-seg-btn.bulk-seg-minus:active {
  background: #A7F3D0;
}

/* Middle Number Segment: Pure White background */
.bulk-seg-input {
  width: 30px;
  height: 100%;
  border: none;
  background: #FFFFFF;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #0F2E1E;
  outline: none;
  margin: 0;
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.bulk-seg-input::-webkit-outer-spin-button,
.bulk-seg-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Right Plus Button (+): Solid vibrant emerald green */
.bulk-seg-btn.bulk-seg-plus {
  width: 32px;
  height: 100%;
  border: none;
  background: #059669;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.bulk-seg-btn.bulk-seg-plus:hover {
  background: #047857;
}

.bulk-seg-btn.bulk-seg-plus:active {
  background: #065F46;
}

/* Glassmorphic Member Card */
.meal-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  user-select: none;
}

.meal-user-chip:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(16, 185, 129, 0.38);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.meal-user-chip.selected {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95), rgba(209, 250, 229, 0.7));
  border-color: rgba(16, 185, 129, 0.48);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.meal-user-chip.selected::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #059669, #10B981);
  border-radius: 0 4px 4px 0;
}

.meal-user-chip .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.meal-user-chip-name {
  font-size: 13px;
  font-weight: 600;
  color: #0F2E1E;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Upgraded Pill Spinner Control */
.meal-user-chip .number-spinner {
  display: inline-flex;
  align-items: center;
  background: rgba(240, 253, 249, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: var(--radius-full);
  padding: 2px 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  margin-left: auto;
  flex-shrink: 0;
}

.meal-user-chip .number-spinner button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #059669;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.meal-user-chip .number-spinner button:hover {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

.meal-user-chip .user-meal-count {
  width: 28px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #047857;
  outline: none;
  margin: 0 2px;
}

/* ======== FINANCE PAGE — Premium Redesign v2 ======== */

/* Page wrapper (Strictly scoped to Finance page only) */
#page-finance {
  background: transparent;
  position: relative;
  max-width: 100% !important;
  width: 100% !important;
  margin: -24px -24px 0 -24px !important;
  padding: 26px 24px 24px 24px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #page-finance {
    margin: -16px -16px 0 -16px !important;
    padding: 16px 16px 20px 16px !important;
  }
}

/* Full-screen BG when finance, ledger, bazar, settings, profile, help, mymeal, or user dashboard is active */
.content-area:has(#page-finance.active),
.content-area:has(#page-ledger.active),
.content-area:has(#page-bazar.active),
.content-area:has(#page-settings.active),
.content-area:has(#page-help.active),
.content-area:has(#page-mymeal.active),
body.role-user .content-area:has(#page-dashboard.active) {
  background-color: #f8fafb !important;
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(16, 185, 129, 0.10) 0px, transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(99, 102, 241, 0.07) 0px, transparent 55%) !important;
  background-size: 100% 100% !important;
}

.finance-page-pro>* {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════
   HERO BANNER — Dark gradient header
   ═══════════════════════════════════════════ */
.fp-hero-banner {
  position: relative;
  background: linear-gradient(135deg, #0f2e1e 0%, #064e3b 40%, #065f46 70%, #047857 100%);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(5, 78, 59, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.fp-hero-glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.30) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: fpGlowFloat 8s ease-in-out infinite alternate;
}

@keyframes fpGlowFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }

  100% {
    transform: translate(-30px, 20px) scale(1.15);
    opacity: 0.9;
  }
}

.fp-hero-pattern {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background-image:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Decorative circles on hero banner */
.fp-hero-banner::before {
  content: '';
  position: absolute;
  top: -45px;
  right: 40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.12);
  background: rgba(16, 185, 129, 0.06);
  pointer-events: none;
}

.fp-hero-banner::after {
  content: '';
  position: absolute;
  bottom: -30px;
  right: 180px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.10);
  background: rgba(16, 185, 129, 0.04);
  pointer-events: none;
}

.fp-hero-content {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.fp-hero-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a7f3d0;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.fp-hero-banner:hover .fp-hero-icon-box {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.18);
}

.fp-hero-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin: 0 0 4px 0;
  line-height: 1;
}

.fp-hero-subtitle {
  font-size: 0.85rem;
  color: rgba(167, 243, 208, 0.85);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}


/* ═══════════════════════════════════════════
   ACTION CARDS GRID
   ═══════════════════════════════════════════ */
.fp-actions-section {
  margin-bottom: 28px;
}

.fp-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Individual action card */
.fp-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px 18px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.03);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.fp-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.fp-action-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

.fp-action-card:hover::before {
  opacity: 1;
}

.fp-action-card:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* Icon Ring */
.fp-action-icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.fp-action-card:hover .fp-action-icon-ring {
  transform: scale(1.10);
}

/* Action text */
.fp-action-name {
  font-size: 0.9375rem;
  font-weight: 650;
  color: #1e293b;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.fp-action-hint {
  font-size: 0.8rem;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── Color Themes for Icons & Accents ─── */

/* Emerald (Add Deposit) */
.fp-ring-emerald {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.20);
  box-shadow: 0 3px 12px rgba(5, 150, 105, 0.15);
}

.fp-action-card[data-accent="emerald"]:hover {
  border-color: rgba(5, 150, 105, 0.22);
}

.fp-action-card[data-accent="emerald"]::before {
  background: linear-gradient(90deg, #059669, #10b981);
}

/* Teal (Bazar Cost) */
.fp-ring-teal {
  background: linear-gradient(145deg, #f0fdfa, #ccfbf1);
  color: #0d9488;
  border: 1px solid rgba(13, 148, 136, 0.20);
  box-shadow: 0 3px 12px rgba(13, 148, 136, 0.15);
}

.fp-action-card[data-accent="teal"]:hover {
  border-color: rgba(13, 148, 136, 0.22);
}

.fp-action-card[data-accent="teal"]::before {
  background: linear-gradient(90deg, #0d9488, #14b8a6);
}

/* Amber (Other Costing) */
.fp-ring-amber {
  background: linear-gradient(145deg, #fffbeb, #fef3c7);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.20);
  box-shadow: 0 3px 12px rgba(217, 119, 6, 0.15);
}

.fp-action-card[data-accent="amber"]:hover {
  border-color: rgba(217, 119, 6, 0.22);
}

.fp-action-card[data-accent="amber"]::before {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

/* Rose (Deduct Balance) */
.fp-ring-rose {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  color: #e11d48;
  border: 1px solid rgba(225, 29, 72, 0.18);
  box-shadow: 0 3px 12px rgba(225, 29, 72, 0.12);
}

.fp-action-card[data-accent="rose"]:hover {
  border-color: rgba(225, 29, 72, 0.22);
}

.fp-action-card[data-accent="rose"]::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e);
}

/* Indigo (Balance Transfer) */
.fp-ring-indigo {
  background: linear-gradient(145deg, #eef2ff, #e0e7ff);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.20);
  box-shadow: 0 3px 12px rgba(99, 102, 241, 0.12);
}

.fp-action-card[data-accent="indigo"]:hover {
  border-color: rgba(99, 102, 241, 0.22);
}

.fp-action-card[data-accent="indigo"]::before {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

/* Slate (Finance Fix) */
.fp-ring-slate {
  background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
  color: #475569;
  border: 1px solid rgba(71, 85, 105, 0.18);
  box-shadow: 0 3px 12px rgba(71, 85, 105, 0.10);
}

.fp-action-card[data-accent="slate"]:hover {
  border-color: rgba(71, 85, 105, 0.22);
}

.fp-action-card[data-accent="slate"]::before {
  background: linear-gradient(90deg, #475569, #64748b);
}

/* Cyan (User Statement) */
.fp-ring-cyan {
  background: linear-gradient(145deg, #ecfeff, #cffafe);
  color: #0891b2;
  border: 1px solid rgba(8, 145, 178, 0.20);
  box-shadow: 0 3px 12px rgba(8, 145, 178, 0.12);
}

.fp-action-card[data-accent="cyan"]:hover {
  border-color: rgba(8, 145, 178, 0.22);
}

.fp-action-card[data-accent="cyan"]::before {
  background: linear-gradient(90deg, #0891b2, #06b6d4);
}


/* ═══════════════════════════════════════════
   TRANSACTION HISTORY SECTION
   ═══════════════════════════════════════════ */
.fp-history-section {
  position: relative;
}

.fp-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 20;
}

.fp-history-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fp-history-dot-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #14b8a6);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.40);
  animation: fpDotPulse 2.5s ease-in-out infinite;
}

@keyframes fpDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.40);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(5, 150, 105, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

.fp-history-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f2e1e;
  margin: 0;
  letter-spacing: -0.02em;
}

#financeFilterDropdown .custom-dropdown-menu,
#financeMonthDropdown .custom-dropdown-menu,
#financeYearDropdown .custom-dropdown-menu {
  right: 0 !important;
  left: auto !important;
  min-width: 120px !important;
  max-height: 220px;
  overflow-y: auto;
  z-index: 1000 !important;
}

/* Timeline card wrapper */
.fp-timeline-wrap {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.03) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ─── Old Class Compatibility ─── */

/* Keep these for other pages that might reference them */
.finance-history-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.finance-history-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f2e1e;
  margin: 0;
  letter-spacing: -0.02em;
}

/* Styled filter select (kept for compatibility) */
.fin-filter-select {
  appearance: none;
  background: #fff 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='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid #d1fae5;
  border-radius: 10px;
  padding: 8px 36px 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0f2e1e;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.06);
  min-width: 140px;
}

.fin-filter-select:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

/* Timeline card enhancement (kept for compatibility) */
.finance-timeline-card {
  border-color: rgba(5, 150, 105, 0.10) !important;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.06) !important;
  border-radius: 16px !important;
}

/* Old classes kept for compatibility */
.finance-actions {
  display: none;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}


.overview-stats {
  display: block;
  margin-bottom: var(--space-6);
}

.overview-desktop-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.overview-mobile-stats {
  display: none;
}

/* ======== OVERVIEW TABLE LAYOUT ======== */
.overview-table-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.05);
  /* Soft green-tinted shadow */
  overflow: hidden;
  border: none;
  /* No outer border! */
}

.overview-table-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.overview-table-grid .table-cell {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-primary);
  border-bottom: 1px solid rgba(16, 185, 129, 0.08);
  /* Soft emerald separator */
}

/* Vertical divider: left column cells have a right border */
.overview-table-grid .table-cell:nth-child(odd) {
  border-right: 1px solid rgba(16, 185, 129, 0.08);
}

.overview-table-grid .cell-icon-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(16, 185, 129, 0.05);
  /* Subtle green tint bg */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-table-grid .cell-icon-box svg {
  width: 18px;
  height: 18px;
}

/* Colors for icon boxes to make them outstanding */
.overview-table-grid .cell-icon-box.text-primary {
  color: var(--primary-600);
  background: var(--primary-50);
}

.overview-table-grid .cell-icon-box.text-accent {
  color: var(--accent-600);
  background: var(--accent-50);
}

.overview-table-grid .cell-icon-box.text-warning {
  color: var(--warning-600);
  background: var(--warning-50);
}

.overview-table-grid .cell-icon-box.text-danger {
  color: var(--danger-500);
  background: var(--danger-50);
}

.overview-table-grid .cell-icon-box.text-orange {
  color: #F97316;
  background: rgba(249, 115, 22, 0.06);
}

.overview-table-grid .cell-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-0.5);
  min-width: 0;
}

.overview-table-grid .cell-label {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.overview-table-grid .cell-value {
  font-family: var(--font-number);
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* Full Width Bottom Column (9th Metric) */
.overview-table-grid .table-cell-full {
  grid-column: span 2;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  /* Solid professional gradient green */
  padding: var(--space-4.5) var(--space-6);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: var(--radius-xl);
  /* Rounded corners at the bottom left */
  border-bottom-right-radius: var(--radius-xl);
  /* Rounded corners at the bottom right */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.overview-table-grid .cell-full-content {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.overview-table-grid .cell-full-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  /* Semi-transparent white circle */
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.overview-table-grid .cell-full-icon svg {
  width: 20px;
  height: 20px;
}

.overview-table-grid .cell-full-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-0.5);
}

.overview-table-grid .cell-full-label {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.8);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-table-grid .cell-full-value {
  font-family: var(--font-number);
  font-size: var(--font-xl);
  font-weight: var(--weight-extrabold);
  color: var(--text-inverse);
}

.chart-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.chart-header h4 {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
}

.chart-canvas {
  width: 100%;
  height: 250px;
}

/* ======== SETTINGS PAGE ======== */
.settings-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.settings-card h4 {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gray-100);
}

.settings-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-item-info h5 {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.settings-item-info p {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.time-input {
  width: 100px;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
}

/* ======== PROFILE PAGE ======== */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  font-size: var(--font-2xl);
}

.profile-info h3 {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
}

.profile-info p {
  font-size: var(--font-base);
  color: var(--text-secondary);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}


/* ---- Mobile Sidebar Overlay ---- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: calc(var(--z-sticky) - 1);
}

.sidebar-overlay.active {
  display: block;
}

/* ---- Section Title Bar ---- */
.section-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.section-title-bar h3 {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
}

/* ---- Quick Action Cards (Ultra Modern Redesign) ---- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: var(--space-6);
}

.quick-action-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.14);
  border-radius: 18px;
  padding: 18px 10px 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  transition: all 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Subtle top glow highlight */
.quick-action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: transparent;
  border-radius: 18px 18px 0 0;
  transition: all 0.25s ease;
  opacity: 0;
}

/* Subtle ambient background glow on hover */
.quick-action-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.quick-action-card:hover {
  transform: translateY(-4px);
}

.quick-action-card:hover::before,
.quick-action-card:hover::after {
  opacity: 1;
}

.quick-action-card:active {
  transform: translateY(-1px) scale(0.98);
}

/* Icon Wrap & Inner Glow */
.quick-action-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-action-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
  position: relative;
}

.quick-action-card:hover .quick-action-icon {
  transform: scale(1.1) translateY(-2px);
}

.quick-action-icon svg {
  width: 24px;
  height: 24px;
  transition: transform 0.25s ease;
}

/* Typography */
.quick-action-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.quick-action-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ================= THEMES ================= */

/* 1. Add Member - Emerald */
.quick-action-card.qa-member::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

.quick-action-card.qa-member::after {
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08), transparent 70%);
}

.quick-action-card.qa-member .quick-action-icon {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-member:hover {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 12px 24px -6px rgba(16, 185, 129, 0.2), 0 2px 6px rgba(16, 185, 129, 0.06);
}

.quick-action-card.qa-member:hover .quick-action-title {
  color: #059669;
}

.quick-action-card.qa-member:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25), inset 0 1px 1px #ffffff;
}

/* 2. Add Meals - Teal / Cyan */
.quick-action-card.qa-meals::before {
  background: linear-gradient(90deg, #14b8a6, #0d9488);
}

.quick-action-card.qa-meals::after {
  background: radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.08), transparent 70%);
}

.quick-action-card.qa-meals .quick-action-icon {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  color: #0d9488;
  border: 1px solid rgba(20, 184, 166, 0.28);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-meals:hover {
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 12px 24px -6px rgba(20, 184, 166, 0.2), 0 2px 6px rgba(20, 184, 166, 0.06);
}

.quick-action-card.qa-meals:hover .quick-action-title {
  color: #0d9488;
}

.quick-action-card.qa-meals:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.25), inset 0 1px 1px #ffffff;
}

/* 3. Add Deposit - Amber / Gold */
.quick-action-card.qa-deposit::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.quick-action-card.qa-deposit::after {
  background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.08), transparent 70%);
}

.quick-action-card.qa-deposit .quick-action-icon {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-deposit:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 24px -6px rgba(245, 158, 11, 0.2), 0 2px 6px rgba(245, 158, 11, 0.06);
}

.quick-action-card.qa-deposit:hover .quick-action-title {
  color: #d97706;
}

.quick-action-card.qa-deposit:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25), inset 0 1px 1px #ffffff;
}

/* 4. Other Costing - Violet / Purple */
.quick-action-card.qa-costing::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.quick-action-card.qa-costing::after {
  background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.08), transparent 70%);
}

.quick-action-card.qa-costing .quick-action-icon {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.28);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-costing:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 12px 24px -6px rgba(139, 92, 246, 0.2), 0 2px 6px rgba(139, 92, 246, 0.06);
}

.quick-action-card.qa-costing:hover .quick-action-title {
  color: #7c3aed;
}

.quick-action-card.qa-costing:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25), inset 0 1px 1px #ffffff;
}

/* 5. Add Bazar - Rose / Crimson */
.quick-action-card.qa-bazar::before {
  background: linear-gradient(90deg, #f43f5e, #e11d48);
}

.quick-action-card.qa-bazar::after {
  background: radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.08), transparent 70%);
}

.quick-action-card.qa-bazar .quick-action-icon {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: #e11d48;
  border: 1px solid rgba(244, 63, 94, 0.28);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-bazar:hover {
  border-color: rgba(244, 63, 94, 0.4);
  box-shadow: 0 12px 24px -6px rgba(244, 63, 94, 0.2), 0 2px 6px rgba(244, 63, 94, 0.06);
}

.quick-action-card.qa-bazar:hover .quick-action-title {
  color: #e11d48;
}

.quick-action-card.qa-bazar:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.25), inset 0 1px 1px #ffffff;
}

/* 6. Finance Fix - Blue / Sky */
.quick-action-card.qa-finance::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.quick-action-card.qa-finance::after {
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08), transparent 70%);
}

.quick-action-card.qa-finance .quick-action-icon {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.28);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12), inset 0 1px 1px #ffffff;
}

.quick-action-card.qa-finance:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.2), 0 2px 6px rgba(59, 130, 246, 0.06);
}

.quick-action-card.qa-finance:hover .quick-action-title {
  color: #2563eb;
}

.quick-action-card.qa-finance:hover .quick-action-icon {
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.25), inset 0 1px 1px #ffffff;
}

/* ---- Due List ---- */
.due-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-100);
}

.due-list-item:last-child {
  border-bottom: none;
}

.due-amount {
  font-weight: var(--weight-bold);
  color: var(--danger-600);
  font-size: var(--font-base);
}

.due-amount.positive {
  color: var(--accent-600);
}

/* ======== MEMBER QUICK ACCESS NAVIGATION ======== */
.member-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.member-nav-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.member-nav-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--bg-secondary);
}

/* Glassmorphism Card Style */
.member-nav-card.glass-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 18px 0 rgba(31, 38, 135, 0.02);
}

.member-nav-card.glass-card:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px 0 rgba(31, 38, 135, 0.06);
}

/* Glassy Icon Wrapper */
.glass-icon-wrapper {
  flex-shrink: 0;
}

.glass-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-base);
}

/* Glass shine overlay */
.glass-icon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
      transparent 45%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 55%);
  transform: rotate(30deg);
  transition: transform 0.6s ease;
}

.member-nav-card:hover .glass-icon::after {
  transform: translate(15%, 15%) rotate(30deg);
}

.glass-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
}

.glass-primary {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.02));
  color: var(--primary-600);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.2);
}

.glass-accent {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.02));
  color: var(--accent-600);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.2);
}

.glass-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.02));
  color: var(--warning-600);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.2);
}

.glass-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.02));
  color: var(--danger-600);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.2);
}

.member-nav-info {
  flex: 1;
  min-width: 0;
}

.member-nav-info h4 {
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 1px;
}

.member-nav-info p {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-nav-arrow {
  color: var(--text-tertiary);
  opacity: 0.5;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.member-nav-card:hover .member-nav-arrow {
  opacity: 0.9;
  transform: translateX(3px);
}

/* ======== DINING SUBPAGES HEADER (Meal Chart, Bazar, Summary, Friday's Meal) ======== */
body.dining-subpage-active .top-header .header-search-bar,
body:has(#page-mealchart.active) .top-header .header-search-bar,
body:has(#page-bazar.active) .top-header .header-search-bar,
body:has(#page-summary.active) .top-header .header-search-bar,
body:has(#page-fridaymeal.active) .top-header .header-search-bar,
body.dining-subpage-active .top-header .header-msg-btn,
body:has(#page-mealchart.active) .top-header .header-msg-btn,
body:has(#page-bazar.active) .top-header .header-msg-btn,
body:has(#page-summary.active) .top-header .header-msg-btn,
body:has(#page-fridaymeal.active) .top-header .header-msg-btn,
body.dining-subpage-active .top-header .header-user-block,
body:has(#page-mealchart.active) .top-header .header-user-block,
body:has(#page-bazar.active) .top-header .header-user-block,
body:has(#page-summary.active) .top-header .header-user-block,
body:has(#page-fridaymeal.active) .top-header .header-user-block,
body.dining-subpage-active .top-header .mobile-menu-btn,
body:has(#page-mealchart.active) .top-header .mobile-menu-btn,
body:has(#page-bazar.active) .top-header .mobile-menu-btn,
body:has(#page-summary.active) .top-header .mobile-menu-btn,
body:has(#page-fridaymeal.active) .top-header .mobile-menu-btn,
body.dining-subpage-active .top-header .header-notif-btn,
body:has(#page-mealchart.active) .top-header .header-notif-btn,
body:has(#page-bazar.active) .top-header .header-notif-btn,
body:has(#page-summary.active) .top-header .header-notif-btn,
body:has(#page-fridaymeal.active) .top-header .header-notif-btn,
body.dining-subpage-active .top-header .header-right,
body:has(#page-mealchart.active) .top-header .header-right,
body:has(#page-bazar.active) .top-header .header-right,
body:has(#page-summary.active) .top-header .header-right,
body:has(#page-fridaymeal.active) .top-header .header-right {
  display: none !important;
}

body.dining-subpage-active .top-header .header-left,
body:has(#page-mealchart.active) .top-header .header-left,
body:has(#page-bazar.active) .top-header .header-left,
body:has(#page-summary.active) .top-header .header-left,
body:has(#page-fridaymeal.active) .top-header .header-left {
  gap: 0 !important;
}

body.dining-subpage-active .top-header #headerBackBtn,
body:has(#page-mealchart.active) .top-header #headerBackBtn,
body:has(#page-bazar.active) .top-header #headerBackBtn,
body:has(#page-summary.active) .top-header #headerBackBtn,
body:has(#page-fridaymeal.active) .top-header #headerBackBtn {
  margin: 0 !important;
  margin-right: 10px !important;
}

body.dining-subpage-active .top-header #headerTitleContainer,
body:has(#page-mealchart.active) .top-header #headerTitleContainer,
body:has(#page-bazar.active) .top-header #headerTitleContainer,
body:has(#page-summary.active) .top-header #headerTitleContainer,
body:has(#page-fridaymeal.active) .top-header #headerTitleContainer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.dining-subpage-active .top-header #headerTitle,
body:has(#page-mealchart.active) .top-header #headerTitle,
body:has(#page-bazar.active) .top-header #headerTitle,
body:has(#page-summary.active) .top-header #headerTitle,
body:has(#page-fridaymeal.active) .top-header #headerTitle {
  font-weight: 600 !important;
  font-size: 1.08rem !important;
  letter-spacing: -0.01em !important;
}

body.dining-subpage-active .top-header #headerPageIcon,
body:has(#page-mealchart.active) .top-header #headerPageIcon,
body:has(#page-bazar.active) .top-header #headerPageIcon,
body:has(#page-summary.active) .top-header #headerPageIcon,
body:has(#page-fridaymeal.active) .top-header #headerPageIcon {
  display: flex !important;
}

body.dining-subpage-active .top-header #headerSubtitle,
body:has(#page-mealchart.active) .top-header #headerSubtitle,
body:has(#page-bazar.active) .top-header #headerSubtitle,
body:has(#page-summary.active) .top-header #headerSubtitle,
body:has(#page-fridaymeal.active) .top-header #headerSubtitle,
body.dining-subpage-active .top-header #headerGreeting,
body:has(#page-mealchart.active) .top-header #headerGreeting,
body:has(#page-bazar.active) .top-header #headerGreeting,
body:has(#page-summary.active) .top-header #headerGreeting,
body:has(#page-fridaymeal.active) .top-header #headerGreeting {
  display: none !important;
}

/* Subtle Soft Mint Green Vibe on Body Only (Below Header) */
body.dining-subpage-active .content-area,
.content-area:has(#page-mealchart.active),
.content-area:has(#page-bazar.active),
.content-area:has(#page-summary.active),
.content-area:has(#page-fridaymeal.active) {
  background-color: #fafcfb !important;
  background-image:
    radial-gradient(ellipse 75% 35% at 0% 0%, rgba(16, 185, 129, 0.08) 0%, rgba(52, 211, 153, 0.035) 45%, transparent 75%),
    linear-gradient(180deg, rgba(236, 253, 245, 0.45) 0%, rgba(240, 253, 244, 0.18) 140px, transparent 280px) !important;
  background-repeat: no-repeat !important;
}

/* ======== MEAL CHART PAGE RESPONSIVENESS & DESIGN ======== */
.meal-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.meal-chart-title h2 {
  font-size: 24px;
  /* Increased to standard header size */
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
}

.meal-chart-title p {
  font-size: 13px;
  /* Increased subtitle size */
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: 0;
}

.meal-chart-selectors {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Custom Dropdown Styling (Messliner color matching) */
.custom-dropdown {
  position: relative;
  display: inline-block;
  user-select: none;
}

.custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--primary-700);
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  height: 40px;
  padding: 0 var(--space-4);
  cursor: pointer;
  outline: none;
  transition: all var(--transition-base);
  min-width: 90px;
}

.custom-dropdown-trigger:hover {
  background-color: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
}

.custom-dropdown.active .custom-dropdown-trigger {
  background-color: rgba(16, 185, 129, 0.10);
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Arrow indicator icon */
.custom-dropdown-arrow {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  color: var(--text-secondary);
  opacity: 0.8;
}

/* Triangle icon like the screenshot */
.custom-dropdown-arrow::before {
  content: '▼';
  font-size: 8px;
}

.custom-dropdown.active .custom-dropdown-arrow {
  transform: rotate(180deg);
}

/* Floating Option Dropdown Menu */
.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: max-content;
  width: 100%;
  white-space: nowrap;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: var(--space-1) 0;
  z-index: 1000;
  display: none;
  max-height: 240px;
  overflow-y: auto;
}

.custom-dropdown.active .custom-dropdown-menu {
  display: block;
}

/* Dropdown Menu Item */
.custom-dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.custom-dropdown-item svg {
  color: #059669;
  flex-shrink: 0;
}

.custom-dropdown-item:hover {
  background-color: var(--gray-50);
}

/* Selected option matching screenshot style */
.custom-dropdown-item.selected {
  background-color: rgba(16, 185, 129, 0.08);
  border-left-color: var(--primary-500);
  font-weight: var(--weight-bold);
  color: var(--primary-700);
  padding-left: 13px;
}

/* Meal Logs Card Header Styling */
.meal-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.meal-logs-title {
  font-size: 16px !important;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  border-left: 3px solid var(--primary-500);
  padding-left: var(--space-3);
  margin: 0;
  line-height: 1.2;
}

.meal-logs-date-badge {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--primary-700);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.18);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.06);
}

/* Meal Chart Table Details */
.meal-chart-table th {
  font-size: 12px !important;
  /* Increased header size */
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  padding: 12px !important;
  text-transform: uppercase;
}

.meal-chart-table td {
  font-size: 14px !important;
  /* Increased cell text size */
  padding: 10px 12px !important;
}

.meal-chart-table td .avatar {
  width: 32px !important;
  /* Increased avatar size */
  height: 32px !important;
  font-size: 11px !important;
  font-weight: var(--weight-bold);
}

.meal-chart-table td .badge {
  font-size: 11px !important;
  /* Increased badge size */
  padding: 4px 10px !important;
  border-radius: 8px !important;
}

/* Meal Badge circles */
.meal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: var(--weight-bold);
  transition: all var(--transition-fast);
}

.meal-badge.active {
  background-color: rgba(16, 185, 129, 0.08);
  color: var(--primary-700);
  border: 1px solid rgba(16, 185, 129, 0.22);
}

.meal-badge.inactive {
  color: var(--text-tertiary);
  opacity: 0.35;
  font-weight: var(--weight-normal);
}

/* Desktop/Mobile display helper utilities */
.mobile-text {
  display: none;
}

.desktop-text {
  display: inline;
}

/* Thinner regular font styling for Breakfast, Lunch, Dinner column headers */
.meal-chart-table th:nth-child(2),
.meal-chart-table th:nth-child(3),
.meal-chart-table th:nth-child(4) {
  font-weight: 400 !important;
  /* normal thin font */
  text-transform: capitalize !important;
  /* capitalized instead of uppercase to take less space and look cleaner */
}

/* Add padding to the left of the Member column (first child) */
.meal-chart-table th:first-child,
.meal-chart-table td:first-child {
  padding-left: 10px !important;
}

/* Back button styling */
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.15);
  background-color: rgba(16, 185, 129, 0.06);
  color: var(--primary-700);
  cursor: pointer;
  outline: none;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.btn-back:hover {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  transform: translateX(-2px);
}

/* Mobile specific styling for Meal Chart */
@media (max-width: 767px) {
  .meal-chart-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .friday-page-header-left {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 0.8fr !important;
    gap: 6px !important;
  }

  .friday-page-header-left .custom-dropdown {
    width: 100% !important;
    flex: none !important;
  }

  .friday-page-header-left .custom-dropdown-trigger {
    font-size: 11px !important;
    padding: 0 4px !important;
    height: 36px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .meal-chart-selectors {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.2fr;
    width: 100%;
    gap: var(--space-2);
  }

  .meal-chart-selectors .custom-dropdown {
    width: 100%;
  }

  .meal-chart-selectors .custom-dropdown-trigger {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 12px;
    height: 38px;
    padding: 0 var(--space-2);
  }

  .meal-chart-selectors .custom-dropdown-trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  #mealChartYearDropdown .custom-dropdown-menu {
    right: 0;
    left: auto;
  }

  .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .meal-chart-table th,
  .meal-chart-table td {
    width: auto !important;
  }

  .meal-chart-table th:nth-child(2),
  .meal-chart-table th:nth-child(3),
  .meal-chart-table th:nth-child(4),
  .meal-chart-table td:nth-child(2),
  .meal-chart-table td:nth-child(3),
  .meal-chart-table td:nth-child(4) {
    width: 70px !important;
    max-width: 70px !important;
    padding: 6px 4px !important;
  }

  .meal-chart-table td:first-child {
    max-width: 110px !important;
  }

  .meal-chart-table td:first-child span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100% !important;
  }

  .meal-chart-table th {
    font-size: 11px !important;
    padding: 10px 4px !important;
  }

  .meal-chart-table td {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }

  .card {
    padding: var(--space-3) !important;
  }

  .mobile-text {
    display: inline !important;
  }

  .desktop-text {
    display: none !important;
  }
}

/* ============================================================
   SUMMARY PAGE — Professional Emerald Theme
   ============================================================ */

/* ---- Top bar: title + selectors ---- */
.summary-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.summary-topbar-title h2 {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.summary-topbar-title p {
  font-size: var(--font-sm);
  color: var(--text-tertiary);
  margin: 3px 0 0 0;
}

.summary-topbar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Make summary dropdowns compact */
.summary-dropdown .custom-dropdown-trigger {
  padding: 7px 12px;
  font-size: var(--font-sm);
  min-width: 90px;
}

/* ---- Meal Rate Strip (compact horizontal pill) ---- */
.summary-rate-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, var(--primary-800) 0%, var(--primary-700) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: 0 4px 16px rgba(4, 120, 87, 0.22);
}

.summary-rate-strip-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.summary-rate-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A7F3D0;
  flex-shrink: 0;
}

.summary-rate-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

.summary-rate-month {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.90);
  margin-top: 3px;
}

.summary-rate-amount {
  font-family: var(--font-number);
  font-size: 22px;
  font-weight: var(--weight-extrabold);
  color: #ECFDF5;
  letter-spacing: -0.5px;
}

.summary-rate-skeleton {
  width: 58px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 25%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.18) 75%);
  background-size: 400% 100%;
  border-radius: var(--radius-full);
  animation: shimmer 1.4s infinite;
}

/* ---- Summary Grid ---- */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--space-4);
}

/* ============================================================
   Summary Card (.sc) — New Professional Design
   ============================================================ */
.sc {
  background: var(--bg-primary);
  border: 1px solid rgba(5, 150, 105, 0.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sc:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Card header: green gradient with name + badge */
.sc-header {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-700) 100%);
  padding: var(--space-3) var(--space-4);
}

.sc-name-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sc-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: white;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.20);
  letter-spacing: 0.02em;
}

.sc-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sc-name {
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

/* Status badge */
.sc-badge {
  font-size: 10px;
  font-weight: var(--weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-badge-ok {
  background: rgba(167, 243, 208, 0.20);
  color: #A7F3D0;
  border: 1px solid rgba(167, 243, 208, 0.25);
}

.sc-badge-due {
  background: rgba(252, 165, 165, 0.20);
  color: #FCA5A5;
  border: 1px solid rgba(252, 165, 165, 0.25);
}

/* Card body */
.sc-body {
  padding: 0;
}

/* Stat rows */
.sc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(5, 150, 105, 0.08);
}

.sc-row:last-child {
  border-bottom: none;
}

.sc-row-alt {
  background: rgba(5, 150, 105, 0.025);
}

.sc-cell {
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(5, 150, 105, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.sc-cell:last-child {
  border-right: none;
}

.sc-cell-label {
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
}

.sc-cell-value {
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Deposit: teal accent */
.sc-deposit {
  color: var(--primary-700) !important;
}

/* Balance: positive = green, negative = red */
.sc-positive {
  color: var(--accent-700) !important;
}

.sc-negative {
  color: var(--danger-600) !important;
}

/* ============================================================
   Mobile Responsive — Summary Page
   ============================================================ */
@media (max-width: 640px) {
  .summary-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .summary-topbar-controls {
    justify-content: flex-end;
  }

  .summary-dropdown .custom-dropdown-trigger {
    min-width: 80px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .summary-rate-strip {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
  }

  .summary-rate-amount {
    font-size: 20px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

@media (max-width: 380px) {
  .sc-cell-label {
    font-size: 10.5px;
  }

  .sc-cell-value {
    font-size: 13px;
  }

  .sc-cell {
    padding: 8px 4px;
  }

  .sc-name {
    font-size: var(--font-sm);
  }

  .summary-rate-strip {
    padding: var(--space-2) var(--space-3);
  }

  .summary-rate-amount {
    font-size: 18px;
  }
}

/* ============================================================
   GLASS PLATE PANEL FOR COMPLETE LOCKED MEALS
   ============================================================ */
.glass-plate-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 32px 0 rgba(4, 120, 87, 0.05);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  min-width: 320px;
  max-width: 100%;
  transition: all var(--transition-base);
}

/* ============================================================
   Complete Locked Meals Glassmorphic Widget & Meal Cards
   ============================================================ */
.glass-plate-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: all var(--transition-base);
}

.glass-plate-panel:hover {
  box-shadow: 0 16px 44px rgba(4, 120, 87, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.glass-plate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 16px 20px;
  margin: -6px -6px 18px -6px;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.85) 0%, rgba(236, 253, 245, 0.5) 50%, rgba(248, 250, 252, 0.8) 100%);
  border: 1px solid rgba(167, 243, 208, 0.55);
  border-radius: 18px;
  box-shadow: 0 4px 16px -4px rgba(5, 150, 105, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.glass-plate-header::before {
  content: '';
  position: absolute;
  top: -24px;
  right: -24px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.glass-plate-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.glass-header-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -3px rgba(5, 150, 105, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.35);
  position: relative;
}

.glass-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.glass-header-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.glass-plate-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  display: inline-block;
  line-height: 1.25;
}

.glass-locked-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.glass-locked-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-status-dot 2s infinite ease-in-out;
}

@keyframes pulse-status-dot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.6;
  }
}

.glass-plate-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}

.glass-plate-subtitle strong {
  color: #0f172a;
  font-weight: 700;
}

@media (max-width: 640px) {
  .glass-plate-header {
    padding: 13px 14px;
    margin: -4px -4px 14px -4px;
  }

  .glass-header-icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
  }

  .glass-header-icon-box svg {
    width: 17px;
    height: 17px;
  }

  .glass-plate-title {
    font-size: 15px;
  }
}

.glass-plate-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

@media (min-width: 768px) {
  .glass-plate-options {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

/* Glass Option Card Row */
.glass-option-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  min-width: 0;
}

/* Selected Check Badge in top right corner */
.glass-selected-check-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
  border: 2px solid #ffffff;
  z-index: 2;
  animation: badgePop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

/* Left side (Icon + Labels) */
.glass-option-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 46px);
}

/* Custom SVG Glass Palate Icon Rings */
.glass-option-circle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.glass-option-circle.circle-breakfast {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.glass-option-circle.circle-lunch {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.glass-option-circle.circle-dinner {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.3);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

/* Info & Sublabels */
.glass-option-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.glass-option-label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.glass-option-sub-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

/* Status Badges - Compact Only */
.glass-status-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 10px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Open Meal Badge (Soft Pastel Halka Red Vibe 🌸) */
.glass-status-badge.badge-open {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: #be123c;
  border: 1px solid rgba(251, 113, 133, 0.35);
}

/* Locked Meal Badge (GREEN Theme 🟢: Ready to select & complete) */
.glass-status-badge.badge-locked {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.glass-status-badge.badge-completed {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  color: #0369a1;
  border: 1px solid rgba(3, 105, 161, 0.3);
}

.badge-sep {
  opacity: 0.5;
  font-size: 8px;
  margin: 0 1px;
}

.open-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 4px rgba(244, 63, 94, 0.4);
}

/* Meal Count Box */
.glass-option-count-box {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  transition: all var(--transition-base);
  color: var(--text-primary);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 6px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  margin-left: auto;
}

/* Card State: Open (Soft Pastel Halka Red Vibe 🌸 - Cannot select) */
.glass-option-row.status-open {
  background: linear-gradient(135deg, rgba(255, 241, 242, 0.5) 0%, rgba(255, 245, 245, 0.35) 100%);
  border: 1.5px solid rgba(253, 164, 175, 0.4);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.02);
  cursor: not-allowed;
}

.glass-option-row.status-open .glass-option-circle {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: #f43f5e;
  border: 1px solid rgba(251, 113, 133, 0.25);
}

.glass-option-row.status-open .glass-option-count-box {
  background: #ffffff;
  border-color: rgba(253, 164, 175, 0.4);
  color: #be123c;
}

/* Card State: Completed */
.glass-option-row.status-completed {
  background: rgba(240, 253, 244, 0.5);
  border-color: rgba(16, 185, 129, 0.2);
  cursor: default;
}

/* Card State: Locked (GREEN Theme 🟢 - Selectable by manager) */
.glass-option-row.status-locked {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #a7f3d0;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.06);
}

.glass-option-row.status-locked:hover {
  transform: translateY(-2px);
  border-color: #34d399;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.glass-option-row.status-locked .glass-option-circle {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.glass-option-row.status-locked .glass-option-count-box {
  background: #ffffff;
  border-color: #a7f3d0;
  color: #047857;
}

/* Card State: Locked + Selected */
.glass-option-row.status-locked.selected {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
  border: 2px solid #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22);
  transform: translateY(-2px);
}

.glass-option-row.status-locked.selected .glass-selected-check-badge {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.4);
}

.glass-option-row.status-locked.selected .glass-option-count-box {
  background: #ffffff;
  border-color: #e11d48;
  color: #be123c;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.18);
}

/* Saved Slips Dedicated Option Card Styles (Sleek Royal Blue / Indigo Theme - No Green!) */
.glass-option-row.slip-option-row {
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.8)) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.glass-option-row.slip-option-row:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12) !important;
}

.glass-option-row.slip-option-row.selected {
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(219, 234, 254, 0.85) 100%) !important;
  border: 2px solid #2563eb !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.22) !important;
  transform: translateY(-2px) !important;
}

.glass-option-row.slip-option-row.selected .glass-option-count-box {
  background: #ffffff !important;
  border-color: #2563eb !important;
  color: #1e3a8a !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
}

.glass-option-row.slip-option-row.status-open {
  background: rgba(248, 250, 252, 0.6) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  opacity: 0.75;
}

.quick-lock-override-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.85) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition: all var(--transition-base);
}

.quick-lock-override-panel:hover {
  box-shadow: 0 16px 44px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.quick-lock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 14px 18px;
  margin: -6px -6px 14px -6px;
  background: linear-gradient(135deg, rgba(245, 243, 255, 0.85) 0%, rgba(238, 242, 255, 0.5) 50%, rgba(248, 250, 252, 0.8) 100%);
  border: 1px solid rgba(196, 181, 253, 0.45);
  border-radius: 18px;
  box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.quick-lock-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-lock-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.quick-lock-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
  line-height: 1.25;
}

.quick-lock-sub {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 2px 0 0;
  line-height: 1.35;
}

.quick-lock-batch-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-batch-lock {
  padding: 6px 13px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-batch-lock.batch-auto {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}

.btn-batch-lock.batch-auto:hover {
  background: #059669;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.btn-batch-lock.batch-locked {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-batch-lock.batch-locked:hover {
  background: #DC2626;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.3);
}

.btn-batch-lock.batch-unlocked {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border-color: rgba(245, 158, 11, 0.25);
}

.btn-batch-lock.batch-unlocked:hover {
  background: #D97706;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

.quick-lock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.quick-lock-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  padding: 12px 16px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.quick-lock-card:hover {
  background: #ffffff;
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.06);
}

.quick-lock-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.quick-lock-meal-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.meal-breakfast .quick-lock-meal-icon {
  color: #D97706;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.meal-lunch .quick-lock-meal-icon {
  color: #0284C7;
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(2, 132, 199, 0.25);
}

.meal-dinner .quick-lock-meal-icon {
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.25);
}

.quick-lock-meal-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quick-lock-meal-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.quick-lock-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.custom-lock-svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.lock-seg-btn:hover .custom-lock-svg {
  transform: scale(1.15);
}

.quick-lock-status-badge.badge-auto {
  color: #059669;
}

.quick-lock-status-badge.badge-locked {
  color: #DC2626;
}

.quick-lock-status-badge.badge-unlocked {
  color: #D97706;
}

/* Segmented Pill Control */
.quick-lock-segmented-pill {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 24px;
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.lock-seg-btn {
  padding: 5px 11px;
  min-height: 30px;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-tertiary, #64748b);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.lock-seg-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
}

.lock-seg-btn.active.seg-auto {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

.lock-seg-btn.active.seg-locked {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

.lock-seg-btn.active.seg-unlocked {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

@media (max-width: 640px) {
  .quick-lock-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .quick-lock-batch-group {
    width: 100%;
    justify-content: space-between;
  }

  .btn-batch-lock {
    flex: 1;
    justify-content: center;
  }

  .quick-lock-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .quick-lock-segmented-pill {
    width: 100%;
    justify-content: space-between;
  }

  .lock-seg-btn {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
  }
}

/* ============================================================
   Admin Meal Management Navigation Tabs Bar (High-Contrast Dock)
   ============================================================ */
.admin-meal-nav-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: var(--space-6);
  padding: 8px;
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.08), 0 4px 10px -2px rgba(15, 23, 42, 0.03) !important;
  width: 100%;
  box-sizing: border-box;
}

/* Custom Glass Header Icon Ring */
.glass-header-icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25));
  color: var(--emerald-600, #059669);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
  flex-shrink: 0;
}

/* Custom Glass Select Dropdowns */
.custom-glass-select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff 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='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-lg);
  padding: 6px 30px 6px 12px;
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-base);
  cursor: pointer;
  height: 32px;
  line-height: 1;
}

.custom-glass-select:hover {
  border-color: rgba(16, 185, 129, 0.6);
  background-color: #f0fdf4;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
  transform: translateY(-1px);
}

.custom-glass-select:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.admin-meal-tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.admin-meal-tab-btn:hover:not(.active) {
  background: #ffffff;
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.admin-meal-tab-btn:hover:not(.active) .admin-meal-tab-icon-ring {
  transform: scale(1.08);
}

/* Base Active Tab */
.admin-meal-tab-btn.active {
  background: #ffffff;
  transform: translateY(-2px);
}

/* Active Top Accent Line */
.admin-meal-tab-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3.5px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Active Tab 1: Complete Locked Meals (Emerald) */
#tabBtnLockedMeals.active {
  border-color: #10b981;
  box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.3), 0 2px 6px rgba(0, 0, 0, 0.04);
}

#tabBtnLockedMeals.active::before {
  background: linear-gradient(90deg, #10b981, #059669);
}

#tabBtnLockedMeals.active .admin-meal-tab-title {
  color: #065f46;
  font-weight: 800;
}

#tabBtnLockedMeals.active .admin-meal-tab-sub {
  color: #059669;
  font-weight: 600;
}

/* Active Tab 2: Manual Add & Log (Indigo) */
#tabBtnManualAdd.active {
  border-color: #6366f1;
  box-shadow: 0 8px 24px -4px rgba(99, 102, 241, 0.3), 0 2px 6px rgba(0, 0, 0, 0.04);
}

#tabBtnManualAdd.active::before {
  background: linear-gradient(90deg, #6366f1, #4f46e5);
}

#tabBtnManualAdd.active .admin-meal-tab-title {
  color: #3730a3;
  font-weight: 800;
}

#tabBtnManualAdd.active .admin-meal-tab-sub {
  color: #4f46e5;
  font-weight: 600;
}

/* Active Tab 3: Friday Meal (Purple) */
#tabBtnFridayMeal.active {
  border-color: #8b5cf6;
  box-shadow: 0 8px 24px -4px rgba(139, 92, 246, 0.3), 0 2px 6px rgba(0, 0, 0, 0.04);
}

#tabBtnFridayMeal.active::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

#tabBtnFridayMeal.active .admin-meal-tab-title {
  color: #5b21b6;
  font-weight: 800;
}

#tabBtnFridayMeal.active .admin-meal-tab-sub {
  color: #7c3aed;
  font-weight: 600;
}

/* Active Tab 4: Saved Meal Slips (Blue) */
#tabBtnSavedSlips.active {
  border-color: #3b82f6;
  box-shadow: 0 8px 24px -4px rgba(59, 130, 246, 0.3), 0 2px 6px rgba(0, 0, 0, 0.04);
}

#tabBtnSavedSlips.active::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

#tabBtnSavedSlips.active .admin-meal-tab-title {
  color: #1e40af;
  font-weight: 800;
}

#tabBtnSavedSlips.active .admin-meal-tab-sub {
  color: #2563eb;
  font-weight: 600;
}

/* Active Tab 5: Meal Settings (Amber) */
#tabBtnMealSettings.active {
  border-color: #f59e0b;
  box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.3), 0 2px 6px rgba(0, 0, 0, 0.04);
}

#tabBtnMealSettings.active::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

#tabBtnMealSettings.active .admin-meal-tab-title {
  color: #92400e;
  font-weight: 800;
}

#tabBtnMealSettings.active .admin-meal-tab-sub {
  color: #d97706;
  font-weight: 600;
}

/* Icon Rings */
.admin-meal-tab-icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.admin-meal-tab-icon-ring.ring-emerald {
  background: #dcfce7;
  color: #059669;
}

.admin-meal-tab-icon-ring.ring-indigo {
  background: #e0e7ff;
  color: #4f46e5;
}

.admin-meal-tab-icon-ring.ring-purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.admin-meal-tab-icon-ring.ring-blue {
  background: #dbeafe;
  color: #2563eb;
}

.admin-meal-tab-icon-ring.ring-amber {
  background: #fef3c7;
  color: #d97706;
}

.admin-meal-tab-btn.active .admin-meal-tab-icon-ring.ring-emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  transform: scale(1.05);
}

.admin-meal-tab-btn.active .admin-meal-tab-icon-ring.ring-indigo {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  transform: scale(1.05);
}

.admin-meal-tab-btn.active .admin-meal-tab-icon-ring.ring-purple {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  transform: scale(1.05);
}

.admin-meal-tab-btn.active .admin-meal-tab-icon-ring.ring-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: scale(1.05);
}

.admin-meal-tab-btn.active .admin-meal-tab-icon-ring.ring-amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transform: scale(1.05);
}

/* Tab Text */
.admin-meal-tab-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-meal-tab-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-base);
}

.admin-meal-tab-sub {
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-base);
}

.admin-meal-tab-btn.active .admin-meal-tab-sub {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Tab View Wrapper Animations */
.admin-meal-tab-view {
  animation: tabFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile & Tablet Responsiveness for Tab Bar */
@media (max-width: 1100px) {
  .admin-meal-nav-tabs {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .admin-meal-nav-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .admin-meal-nav-tabs {
    grid-template-columns: repeat(1, 1fr);
  }
}

.btn-glass-complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-6);
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  box-shadow: none;
  width: 100%;
}

@media (min-width: 768px) {
  .btn-glass-complete {
    width: auto;
    align-self: flex-end;
  }
}

.btn-glass-complete:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25);
}

.btn-glass-complete:not(:disabled):hover {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
}

.btn-glass-complete:disabled {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text-tertiary);
  border: 1px solid rgba(107, 114, 128, 0.1);
  cursor: not-allowed;
}

.btn-glass-complete svg.animate-spin {
  animation: btnSpin 1s linear infinite;
}


@keyframes btnSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Spinner container */
.number-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #ffffff;
  overflow: hidden;
  height: 28px;
}

.number-spinner button {
  width: 24px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: 14px;
  color: var(--text-secondary);
  transition: all var(--transition-base);
  user-select: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

.number-spinner button:hover {
  background: rgba(4, 120, 87, 0.05);
  color: var(--primary-600);
}

.number-spinner button:active {
  background: rgba(4, 120, 87, 0.1);
}

.number-spinner input {
  width: 28px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  background: transparent;
  color: var(--text-primary);
  padding: 0;
  margin: 0;
  -moz-appearance: textfield;
}

.number-spinner input::-webkit-outer-spin-button,
.number-spinner input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Bulk Mode toggle switch style overrides */
#bulkOverrideSwitch .toggle-slider::after {
  width: 16px;
  height: 16px;
  top: 3px;
  left: 3px;
}

#bulkOverrideSwitch input:checked+.toggle-slider::after {
  transform: translateX(18px);
}

/* ============================================================
   Locked Meal Actions Row (Preview + Complete buttons)
   ============================================================ */
.locked-meal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .locked-meal-actions {
    flex-direction: column;
  }

  .locked-meal-actions .btn-glass-complete,
  .locked-meal-actions .btn-glass-preview {
    width: 100%;
  }
}

/* Preview Slip Button */
.btn-glass-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-5);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

/* Unlocked state (Yellow / Amber) */
.btn-glass-preview,
.btn-glass-preview.state-unlocked {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #D97706 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08) !important;
}

.btn-glass-preview:hover,
.btn-glass-preview.state-unlocked:hover {
  background: rgba(245, 158, 11, 0.2) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  color: #B45309 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2) !important;
}

/* Locked state (Green) */
.btn-glass-preview.state-locked {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08) !important;
}

.btn-glass-preview.state-locked:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  color: #047857 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2) !important;
}

.btn-glass-preview:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Complete 0 Meals Button */
.btn-glass-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-5);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn-glass-zero:not(:disabled) {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border: 1.5px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}

.btn-glass-zero:not(:disabled):hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.btn-glass-zero:disabled {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text-tertiary);
  border: 1px solid rgba(107, 114, 128, 0.1);
  cursor: not-allowed;
}

/* Undo Completed Meal Button */
.btn-glass-undo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-5);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.btn-glass-undo:not(:disabled) {
  background: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1.5px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.08);
}

.btn-glass-undo:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
  color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
}

.btn-glass-undo:disabled {
  background: rgba(107, 114, 128, 0.08);
  color: var(--text-tertiary);
  border: 1px solid rgba(107, 114, 128, 0.1);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Undo Modal Styling */
.undo-icon-ring {
  background: rgba(239, 68, 68, 0.1) !important;
}

.undo-icon-inner {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
}

.btn-undo-confirm {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

.btn-undo-confirm:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px);
}

/* Undo Meal Popup Selection List */
.undo-meals-selector {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 20px 0;
  max-height: 240px;
  overflow-y: auto;
}

.undo-meal-select-row {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.undo-meal-select-row:hover {
  border-color: rgba(239, 68, 68, 0.45);
  background: #fff5f5;
  transform: translateY(-1px);
}

.undo-meal-select-row.selected {
  border-color: #ef4444;
  background: rgba(254, 242, 242, 0.85);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12);
}

.undo-meal-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-align: left;
}

.undo-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.undo-meal-select-row.selected .undo-checkbox {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.undo-checkbox svg {
  display: none;
}

.undo-meal-select-row.selected .undo-checkbox svg {
  display: block;
}

.undo-meal-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  flex-shrink: 0;
}

.undo-meal-label-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.undo-meal-row-name {
  font-size: 0.94rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
}

.undo-meal-row-count {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

.undo-meal-row-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  margin-left: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}

.undo-meal-select-row.selected .undo-meal-row-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
}

/* ============================================================
   Zero Meal Confirmation Modal (Ultra Modern & Clean Dialog)
   ============================================================ */
.zero-meal-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.zero-meal-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 22px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 24px 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: zeroCardIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zeroCardIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(6px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.zero-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
  border: none;
  color: var(--text-tertiary, #94a3b8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
}

.zero-modal-close-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.08));
  color: var(--text-primary, #0f172a);
}

.zero-modal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.zero-modal-icon-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.05);
}

.zero-modal-icon-inner {
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zero-modal-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 0 0 6px;
  line-height: 1.3;
}

.zero-modal-desc {
  font-size: 13px;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
  margin: 0;
  padding: 0 10px;
}

.zero-modal-info-strip {
  width: 100%;
  margin: 18px 0 20px;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
}

.zero-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.zero-info-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, #94a3b8);
}

.zero-info-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  text-align: center;
  line-height: 1.25;
}

.zero-info-value.highlight {
  color: #EF4444;
  font-weight: 800;
}

.zero-info-sep {
  width: 1px;
  height: 22px;
  background: var(--border-color, #e2e8f0);
  opacity: 0.8;
  flex-shrink: 0;
}

.zero-modal-actions {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
}

.btn-zero-cancel {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-color, #e2e8f0);
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-zero-cancel:hover {
  background: var(--bg-hover, #e2e8f0);
  color: var(--text-primary, #0f172a);
}

.btn-zero-confirm {
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition-fast, 0.15s);
  white-space: nowrap;
}

.btn-zero-confirm:hover {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.btn-zero-confirm:active {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .zero-modal-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Meal Slip Preview Modal Overlay
   ============================================================ */
/* ============================================================
   Meal Slip Preview Modal Overlay (Fixed Solid Luxury Styling)
   ============================================================ */
.meal-slip-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: slipModalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slipModalIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.meal-slip-modal-container {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.meal-slip-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #0F172A;
  flex-shrink: 0;
}

.meal-slip-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.meal-slip-modal-title svg {
  color: #10B981;
  flex-shrink: 0;
}

.meal-slip-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-slip-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  white-space: nowrap;
  font-family: inherit;
}

.btn-slip-download:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

.btn-slip-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-slip-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
}

.meal-slip-preview-wrapper {
  overflow-y: auto;
  padding: 24px 20px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #F1F5F9;
  min-height: 0;
}

/* ============================================================
   Minimalist POS-Style Meal Slip Card
   ============================================================ */
.meal-slip-card {
  background: #ffffff;
  width: 100%;
  max-width: 380px;
  padding: var(--space-6) var(--space-5);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #000000;
  position: relative;
  border: 1px solid #d1d5db;
}

/* Header style - plain white background, dining name at the top */
.slip-receipt-header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.slip-dining-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000000;
  margin-bottom: 2px;
}

.slip-receipt-subtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #4b5563;
  margin-bottom: var(--space-2);
}

.slip-receipt-divider {
  border-top: 1px solid #000000;
  margin: var(--space-2) 0;
  width: 100%;
}

.slip-receipt-meta {
  font-size: 12px;
  color: #1f2937;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.slip-meta-row {
  display: flex;
  justify-content: space-between;
}

/* Table layout style */
.slip-receipt-body {
  margin-top: var(--space-3);
}

.slip-section-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  color: #000000;
  margin-bottom: var(--space-2);
}

.slip-table-element {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}

.slip-table-header-row {
  border-bottom: 1px dashed #000000;
}

.slip-table-header-row th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  padding: 6px 0;
}

.slip-table-header-row th.col-name {
  text-align: left;
  width: 32%;
}

.slip-table-header-row th.col-qty {
  text-align: right;
  width: 17%;
}

.slip-table-row-tr {
  font-size: 12px;
  color: #000000;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}

.slip-table-row-tr:last-child {
  border-bottom: none;
}

.slip-table-row-tr.slip-manager {
  font-weight: 700;
}

.slip-table-row-tr td {
  padding: 6px 0;
  vertical-align: middle;
}

.slip-table-row-tr td.col-name {
  text-align: left;
  width: 32%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slip-row-index {
  color: #6b7280;
  margin-right: 2px;
}

.slip-manager-badge {
  font-size: 9px;
  background: #000000;
  color: #ffffff;
  padding: 0 4px;
  border-radius: 2px;
  font-weight: 800;
  margin-left: var(--space-1);
}

.slip-table-row-tr td.col-qty {
  text-align: right;
  width: 17%;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}

.slip-table-row-tr td.col-total {
  font-weight: 800;
}

/* Receipt Totals bottom part */
.slip-receipt-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #000000;
}

.slip-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.slip-total-row span:last-child {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 13px;
}

.slip-total-row.grand-total {
  font-weight: 800;
  font-size: 13px;
}

.slip-total-row.grand-total span:last-child {
  font-size: 15px;
  font-weight: 900;
}

/* Footer part */
.slip-receipt-footer {
  text-align: center;
  font-size: 10px;
  color: #4b5563;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slip-thank-you {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #000000;
  margin-top: var(--space-2);
}

/* Export Slip Full Page — True full-screen overlay (covers sidebar + header) */
#page-export-slip.page-section {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

#page-export-slip.page-section.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  overflow: hidden;
  background: #f1f5f9;
}


/* Hero Header */
.export-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1628 0%, #0f2e1e 50%, #064E3B 100%);
  padding: 16px 28px;
  min-height: 72px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.export-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(5, 150, 105, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

/* Animated grid lines */
.export-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.export-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.export-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34D399;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.export-hero-text {
  flex: 1;
  min-width: 0;
}

.export-hero-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 2px;
  letter-spacing: -0.4px;
}

.export-hero-subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 500;
}

.export-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.export-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Main body layout */
.export-page-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left Controls Panel */
.export-controls-panel {
  width: 380px;
  min-width: 340px;
  background: #ffffff;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 18px;
  gap: 16px;
  flex-shrink: 0;
}

/* Control Cards */
.export-control-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
  flex-shrink: 0;
}

.export-control-card:hover {
  box-shadow: var(--shadow-md);
}

.export-control-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border-bottom: 1px solid var(--border-color);
}

.export-control-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

/* Control icon pills */
.export-ctrl-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.export-ctrl-icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.export-ctrl-icon-emerald {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.export-ctrl-icon-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.export-ctrl-icon-purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

/* Period Selectors */
.export-period-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
}

.export-select-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.export-select-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-select {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: auto;
}

.export-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}

/* Format Grid */
.export-format-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.export-format-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1.5px solid var(--border-color);
  border-radius: 11px;
  cursor: pointer;
  transition: all var(--transition-base);
  background: var(--bg-primary);
}

.export-format-card:hover {
  border-color: var(--primary-400);
  background: var(--primary-50);
  transform: translateX(2px);
}

.export-format-card--active {
  border-color: var(--primary-500) !important;
  background: rgba(5, 150, 105, 0.06) !important;
  box-shadow: 0 0 0 1px var(--primary-400);
}

.export-format-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.export-format-card:hover .export-format-icon-wrap,
.export-format-card--active .export-format-icon-wrap {
  transform: scale(1.08);
}

.export-format-icon-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.export-format-icon-red {
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
}

.export-format-icon-purple {
  background: rgba(139, 92, 246, 0.10);
  color: #7c3aed;
}

.export-format-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-format-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.export-format-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.export-format-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--border-color);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.export-format-card--active .export-format-check {
  background: var(--primary-500);
  color: #ffffff;
}

/* Select All label */
.export-select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-600);
  cursor: pointer;
  margin-left: auto;
}

.export-select-all-label input[type="checkbox"] {
  accent-color: var(--primary-600);
  width: 14px;
  height: 14px;
}

/* Members Card */
.export-members-card {
  display: flex;
  flex-direction: column;
}

.export-members-list {
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
}

.export-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transition-fast);
  border: 1px solid transparent;
}

.export-member-item:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.export-member-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.export-member-info {
  flex: 1;
  min-width: 0;
}

.export-member-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.export-member-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: 1px;
}

.export-member-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-600);
  cursor: pointer;
  flex-shrink: 0;
}

/* Download Button */
.export-download-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: #ffffff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--font-family);
  transition: all var(--transition-base);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);
  width: 100%;
  flex-shrink: 0;
}

.export-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
}

.export-download-btn:active {
  transform: translateY(0);
}

.export-download-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.export-download-btn-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.export-download-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.export-download-btn-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.export-download-btn-sub {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

/* Right Preview Panel */
.export-preview-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #f1f5f9;
  overflow: hidden;
}

.export-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.export-preview-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-preview-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-500);
  animation: previewPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes previewPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.export-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.export-preview-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-600);
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  padding: 2px 8px;
  border-radius: 20px;
}

.export-preview-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.export-preview-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 4px 10px;
  border-radius: 20px;
}

.export-preview-stat--positive {
  color: var(--primary-700);
  background: var(--primary-50);
  border-color: var(--primary-200);
}

.export-preview-stat--negative {
  color: var(--danger-700);
  background: var(--danger-50);
  border-color: var(--danger-200);
}

.export-preview-canvas {
  flex: 1;
  overflow: auto;
  padding: 32px 24px;
  display: flex;
}

.export-slip-inner {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  width: 820px;
  min-width: 820px;
  max-width: 820px;
  margin: auto;
  overflow: hidden;
  flex-shrink: 0;
}

/* Export slip btn on overview page */
.export-slip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ============================================
   Responsive: Export Page
   ============================================ */
@media (max-width: 900px) {

  /* On mobile: full-width already (left:0) */
  #page-export-slip.page-section.active {
    overflow-y: auto;
  }

  .export-page-body {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .export-controls-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-y: visible;
    max-height: none;
  }

  .export-members-list {
    max-height: 180px;
  }

  .export-preview-panel {
    min-height: 500px;
  }

  .export-preview-canvas {
    padding: 12px;
  }

  .export-slip-inner {
    min-width: 600px;
  }
}

@media (max-width: 640px) {
  .export-page-hero {
    padding: 18px 16px;
  }

  .export-hero-title {
    font-size: 18px;
  }

  .export-back-btn span {
    display: none;
  }

  .export-controls-panel {
    padding: 14px 12px;
  }

  .export-period-selectors {
    grid-template-columns: 1fr;
  }
}

/* ====================================================
   FRIDAY MEAL SYSTEM — CSS
   Purple/violet accent theme, fully isolated from
   the normal green dining system.
   ==================================================== */

/* ── Admin Panel ─────────────────────────────────── */
.friday-admin-panel {
  background: linear-gradient(135deg, #FDFAFF 0%, #F5F0FF 100%);
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.07);
}

.friday-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  gap: 12px;
  flex-wrap: wrap;
}

.friday-panel-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friday-panel-icon-ring {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.friday-panel-title {
  font-size: var(--font-md);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.friday-panel-sub {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 1px;
}

/* Month nav (shared admin + page) */
.friday-month-nav,
.friday-page-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.friday-month-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.friday-month-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.friday-month-label {
  font-size: var(--font-xs);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Week selector row */
.friday-week-selector-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.1);
  background: rgba(124, 58, 237, 0.03);
  flex-wrap: wrap;
}

.friday-week-label {
  font-size: var(--font-xs);
  font-weight: 700;
  color: #5B21B6;
  white-space: nowrap;
}

/* Section blocks within panel */
.friday-section-block {
  padding: 14px 18px;
}

.friday-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════
   FRIDAY MEAL AUTO COMPLETE SECTION
   ═══════════════════════════════════════════ */
.friday-auto-complete-block {
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(124, 58, 237, 0.22);
  border-radius: var(--radius-xl);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.07);
}

.friday-auto-summary-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Friday Meal Type Selector */
.friday-meal-type-selector-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-lg);
}

.friday-meal-type-selector-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6D28D9;
}

.friday-meal-type-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.friday-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition-base);
  user-select: none;
}

.friday-type-pill:hover {
  border-color: rgba(124, 58, 237, 0.4);
  color: #6D28D9;
  background: rgba(124, 58, 237, 0.06);
  transform: translateY(-1px);
}

.friday-type-pill.active {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  color: #ffffff;
  border-color: #7C3AED;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}

.friday-pill-check {
  font-size: 11px;
  font-weight: 700;
  display: none;
  opacity: 0.9;
}

.friday-type-pill.active .friday-pill-check {
  display: inline-block;
}

.friday-type-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.friday-type-pill.active .friday-type-pill-icon {
  color: #ffffff;
}

.friday-type-pill:not(.active) .icon-lunch {
  color: #D97706;
}

.friday-type-pill:not(.active) .icon-dinner {
  color: #7C3AED;
}

.friday-auto-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}

.friday-auto-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friday-auto-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.friday-auto-stat-val {
  font-size: 14px;
  font-weight: 700;
  color: #0F2E1E;
}

.friday-auto-stat-val.highlight {
  color: #6D28D9;
}

.friday-auto-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-friday-glass-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-friday-glass-preview:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.6);
  color: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.2);
}

.btn-friday-glass-zero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-lg);
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border: 1.5px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.06);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-friday-glass-zero:hover {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.5);
  color: #B91C1C;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18);
}

.btn-friday-auto-complete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  font-size: var(--font-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.btn-friday-auto-complete:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
}

.btn-friday-auto-complete:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .friday-meal-type-selector-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .friday-meal-type-pills {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .friday-type-pill {
    justify-content: center;
  }

  .friday-auto-summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .friday-auto-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-friday-glass-preview,
  .btn-friday-glass-zero,
  .btn-friday-auto-complete {
    width: 100%;
  }
}

.friday-section-title {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6D28D9;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Member chips grid */
.friday-meal-users-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 991px) and (min-width: 641px) {
  .friday-meal-users-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.friday-meal-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  user-select: none;
}

.friday-meal-chip:hover {
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.1);
}

.friday-meal-chip.selected {
  border-color: #7C3AED;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(91, 33, 182, 0.04));
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.15);
}

.friday-chip-name {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Number spinner for chips */
.friday-meal-chip .number-spinner {
  display: flex;
  align-items: center;
  background: rgba(124, 58, 237, 0.06);
  border: 1.5px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.friday-meal-chip .number-spinner button {
  width: 22px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #7C3AED;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}

.friday-meal-chip .number-spinner button:hover {
  background: rgba(124, 58, 237, 0.15);
}

.friday-meal-chip .number-spinner button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.friday-meal-chip .friday-user-count {
  width: 28px;
  text-align: center;
  font-size: var(--font-sm);
  font-weight: 700;
  color: #5B21B6;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}

.friday-meal-chip .friday-user-count::-webkit-outer-spin-button,
.friday-meal-chip .friday-user-count::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* Actions row */
.friday-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 18px 14px;
  flex-wrap: wrap;
}

/* Save Friday Meals button */
.friday-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  letter-spacing: 0.01em;
}

.friday-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6D28D9, #4C1D95);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.friday-save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Friday Bazar form */
.friday-bazar-form {
  padding: 2px 0 4px;
}

.friday-bazar-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--font-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.friday-bazar-save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #6D28D9, #4C1D95);
  transform: translateY(-1px);
}

.friday-bazar-save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.friday-bazar-saved-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 10px;
  font-size: var(--font-xs);
  color: #5B21B6;
}

/* Friday dots in dropdown */
.friday-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.friday-dot.meal-dot {
  background: #7C3AED;
}

.friday-dot.bazar-dot {
  background: #059669;
}

/* ── Quick Access Card ────────────────────────────── */
.friday-nav-card {
  border: 1.5px solid rgba(124, 58, 237, 0.15) !important;
  transition: all 0.2s;
}

.friday-nav-card:hover {
  border-color: rgba(124, 58, 237, 0.35) !important;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.12) !important;
  transform: translateY(-2px);
}

/* ── User Friday Meal Page ───────────────────────── */
.friday-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.friday-page-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.friday-page-month-nav .friday-month-btn {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
  color: #7C3AED;
}

.friday-page-month-nav .friday-month-btn:hover {
  background: rgba(124, 58, 237, 0.2);
}

.friday-page-month-nav .friday-month-label {
  color: #5B21B6;
}

/* Tab bar */
.friday-page-tab-bar {
  display: flex;
  gap: 0;
  background: var(--bg-elevated);
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.friday-page-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.01em;
}

.friday-page-tab:hover {
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.06);
}

.friday-page-tab.active {
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

/* Tab content */
.friday-page-tab-content {
  display: none;
}

.friday-page-tab-content.active {
  display: block;
  animation: fadeUp 0.22s ease;
}

/* ─── Charge Card (full premium redesign) ─── */
.friday-charge-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 60%, #4C1D95 100%);
  border-radius: 20px;
  margin-bottom: var(--space-3);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.32), 0 2px 8px rgba(0, 0, 0, 0.08);
  min-height: 96px;
}

.friday-charge-card::before {
  content: '';
  position: absolute;
  top: -36px;
  right: -36px;
  width: 130px;
  height: 130px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.friday-charge-card::after {
  content: '';
  position: absolute;
  bottom: -28px;
  left: 30px;
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.friday-charge-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 22px;
  gap: 16px;
}

.friday-charge-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friday-charge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 2px;
  white-space: nowrap;
}

.friday-charge-label {
  font-size: var(--font-md);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.friday-charge-sub {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
}

.friday-charge-amount-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.friday-charge-amount-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.friday-charge-amount {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.friday-charge-unit {
  font-size: var(--font-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin-left: 2px;
}

.friday-charge-icon-wrap {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.12;
  pointer-events: none;
}

/* Empty charge state */
.friday-charge-card.no-data {
  background: var(--bg-elevated);
  box-shadow: none;
  border: 1.5px solid rgba(124, 58, 237, 0.12);
}

.friday-charge-card.no-data .friday-charge-label {
  color: var(--text-primary);
}

.friday-charge-card.no-data .friday-charge-pill {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.15);
  color: #7C3AED;
}

.friday-charge-card.no-data .friday-charge-amount {
  color: var(--text-tertiary);
  font-size: 1.4rem;
}

.friday-charge-card.no-data::before,
.friday-charge-card.no-data::after {
  display: none;
}

.friday-charge-card.no-data .friday-charge-icon-wrap {
  opacity: 0.07;
}

/* Friday Bazar List */
.friday-bazar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.friday-bazar-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 1.5px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  transition: all 0.18s;
  gap: 12px;
}

.friday-bazar-entry:hover {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.08);
}

.friday-bazar-entry-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.friday-bazar-entry-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.friday-bazar-entry-title {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.friday-bazar-entry-sub {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.friday-bazar-entry-right {
  text-align: right;
  flex-shrink: 0;
}

.friday-bazar-entry-amount {
  font-size: var(--font-md);
  font-weight: 800;
  color: #5B21B6;
}

.friday-bazar-entry-status {
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
}

.friday-bazar-entry-status.deducted {
  color: #059669;
}

.friday-bazar-entry-status.pending {
  color: #DC2626;
}

.friday-bazar-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(91, 33, 182, 0.05));
  border: 1.5px solid rgba(124, 58, 237, 0.18);
  border-radius: 14px;
  font-weight: 800;
  color: #5B21B6;
  font-size: var(--font-md);
}

/* Friday Summary */
.friday-summary-banner {
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
  margin-bottom: var(--space-4);
  color: #fff;
}

.friday-summary-banner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.friday-summary-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 8px;
  flex-shrink: 0;
}

.friday-summary-banner-title {
  font-size: var(--font-md);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.friday-summary-banner-date {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

.friday-summary-banner-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.friday-summary-stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 8px;
}

.friday-summary-stat-val {
  font-size: var(--font-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.friday-summary-stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* My summary card (non-admin) */
.friday-summary-my-card {
  background: var(--bg-primary);
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.friday-summary-my-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  font-size: var(--font-sm);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.friday-summary-my-row:last-child {
  border-bottom: none;
}

.friday-summary-my-row.deduction {
  background: rgba(220, 38, 38, 0.03);
}

.friday-summary-my-row.balance-after {
  background: rgba(5, 150, 105, 0.04);
  font-size: var(--font-md);
}

.member-name-text {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
  .friday-meal-users-grid {
    grid-template-columns: 1fr;
  }

  .friday-panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .friday-summary-banner-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .friday-page-tab {
    font-size: 10px !important;
    padding: 6px 4px !important;
    gap: 2px !important;
  }

  .friday-charge-card-inner {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .friday-charge-amount {
    font-size: 1.4rem !important;
  }

  .friday-charge-pill {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  .friday-page-chart-table th:first-child,
  .friday-page-chart-table td:first-child {
    max-width: 110px !important;
  }

  .friday-page-chart-table td:first-child .flex {
    width: 100%;
    min-width: 0;
  }

  .member-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    flex: 1;
    min-width: 0;
    max-width: 100% !important;
  }

  .friday-page-chart-table th,
  .friday-page-chart-table td {
    width: auto !important;
  }

  .friday-page-chart-table th:nth-child(2),
  .friday-page-chart-table th:nth-child(3),
  .friday-page-chart-table td:nth-child(2),
  .friday-page-chart-table td:nth-child(3) {
    width: 70px !important;
    max-width: 70px !important;
    padding: 6px 4px !important;
  }

  .friday-page-chart-table th {
    font-size: 11px !important;
    padding: 10px 4px !important;
  }

  .friday-page-chart-table td {
    font-size: 13px !important;
    padding: 8px 4px !important;
  }

  /* Admin Friday Summary Page Table Column constraints for Mobile */
  .friday-page-tab-content[data-tabpane="summary"] th:first-child,
  .friday-page-tab-content[data-tabpane="summary"] td:first-child {
    max-width: 90px !important;
  }

  /* Admin Friday Meals Log Table constraints for Mobile */
  #fridayMealLogTable th:first-child,
  #fridayMealLogTable td:first-child {
    max-width: 110px !important;
  }

  #fridayMealLogTable th:nth-child(2),
  #fridayMealLogTable td:nth-child(2) {
    width: 70px !important;
    max-width: 70px !important;
    padding: 6px 4px !important;
  }
}

/* ============================================================
   MONTHLY ACTIVE MEAL MEMBERS (MAMM) & EXTRA SLIP SIDE-BY-SIDE LAYOUT
   ============================================================ */
.meal-settings-side-by-side {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}

@media (max-width: 992px) {
  .meal-settings-side-by-side {
    grid-template-columns: 1fr !important;
  }
}

/* Card Container */
.mamm-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.25s ease;
}

.mamm-card:hover {
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.07);
}

/* Simple Clean Header (matching user UI image) */
.mamm-card-header {
  background: #ffffff;
  padding: 22px 24px 14px 24px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  position: relative;
}

.mamm-card-header-bg {
  display: none;
}

.mamm-card-header-inner {
  display: block;
}

.mamm-header-icon {
  display: none;
}

.mamm-header-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.mamm-header-sub {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 400;
}

/* Card Body */
.mamm-card-body {
  padding: 20px 22px;
}

/* Period Selector (Month + Year dropdowns) */
.mamm-period-selector {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.85), rgba(236, 253, 245, 0.6));
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.mamm-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.mamm-select-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #064E3B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mamm-select-label svg {
  color: #059669;
  flex-shrink: 0;
}

/* Screenshot Dropdown Pill Button */
.ss-dropdown-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 0 16px;
  background: #E6F9F0;
  border: 1.5px solid #A7F3D0;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #059669;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.06);
  box-sizing: border-box;
}

.ss-dropdown-pill:hover {
  border-color: #34D399;
  background: #DCFCE7;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

.ss-dropdown-pill.is-open {
  border-color: #10B981;
  background: #E6F9F0;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.ss-dropdown-caret {
  font-size: 10px;
  color: #059669;
  transition: transform 0.2s ease;
}

/* Floating Dropdown Popover Menu (Matching Screenshot) */
.ss-dropdown-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(16, 185, 129, 0.08);
  padding: 6px 0;
  z-index: 200;
  animation: ssPopoverSlideDown 0.18s ease-out;
}

@keyframes ssPopoverSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ss-dropdown-popover::-webkit-scrollbar {
  width: 5px;
}

.ss-dropdown-popover::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 4px;
}

/* Dropdown Option Items */
.ss-dropdown-item {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
  display: flex;
  align-items: center;
  border-left: 4px solid transparent;
}

.ss-dropdown-item:hover {
  background: #F8FAFC;
  color: #0F2E1E;
}

/* Active Selected Dropdown Item (With Left Green Bar as in screenshot!) */
.ss-dropdown-item.is-selected {
  background: #E6F9F0;
  color: #059669;
  font-weight: 700;
  border-left: 4px solid #059669;
}

/* Toolbar: Search + Select All */
.mamm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.mamm-search-wrap {
  position: relative;
  flex: 1;
}

.mamm-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #059669;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.mamm-search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1.5px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 13.5px;
  font-weight: 500;
  color: #0F2E1E;
  transition: all 0.2s ease;
  outline: none;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.04);
  box-sizing: border-box;
}

.mamm-search-input::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

.mamm-search-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}

.mamm-select-all-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s ease;
}

.mamm-select-all-btn:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.mamm-select-all-btn input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #059669;
  cursor: pointer;
}

/* Checklist Scrollable Container */
.mamm-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 16px;
}

.mamm-checklist::-webkit-scrollbar {
  width: 5px;
}

.mamm-checklist::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.3);
  border-radius: 4px;
}

/* Member List Item Card — NO AVATARS! */
.mamm-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.mamm-member-row:hover {
  border-color: rgba(16, 185, 129, 0.35);
  background: #F0FDF4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08);
}

.mamm-member-row.is-selected {
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(236, 253, 245, 0.9));
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.mamm-member-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.mamm-member-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F2E1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mamm-member-status {
  font-size: 11.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mamm-status-active {
  color: #059669;
  font-weight: 600;
}

.mamm-status-inactive {
  color: #64748B;
}

.mamm-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.mamm-status-dot-active {
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.mamm-status-dot-inactive {
  background: #94A3B8;
}

/* Custom Toggle Switch for Member Active State */
.mamm-toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.mamm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.mamm-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #CBD5E1;
  border-radius: 24px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mamm-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}

.mamm-toggle input:checked+.mamm-toggle-slider {
  background: linear-gradient(135deg, #10B981, #059669);
}

.mamm-toggle input:checked+.mamm-toggle-slider::before {
  transform: translateY(-50%) translateX(18px);
}

/* Save Button — Premium Outline Style with High Contrast */
.mamm-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(16, 185, 129, 0.15);
  display: flex;
  justify-content: flex-end;
}

.mamm-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 26px;
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  border: 2px solid #10B981;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
  font-family: inherit;
  user-select: none;
}

.mamm-save-btn svg {
  color: #059669;
  transition: all 0.2s ease;
}

.mamm-save-btn:hover {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border-color: #059669;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.mamm-save-btn:hover svg {
  color: #FFFFFF;
  transform: scale(1.1);
}

.mamm-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

/* ============================================================
   EXTRA SLIP ENTRIES (ESE) — Custom Glass Badges & Active Meals Redesign
   ============================================================ */
.ese-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.25s ease;
}

.ese-card:hover {
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.07);
}

.ese-card-header {
  background: #ffffff;
  padding: 22px 24px 14px 24px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
  position: relative;
}

.ese-card-header-bg {
  display: none;
}

.ese-card-header-inner {
  display: block;
}

.ese-header-icon {
  display: none;
}

.ese-header-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.ese-header-sub {
  margin: 4px 0 0 0;
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 400;
}

.ese-card-body {
  padding: 20px 22px;
}

.ese-info-banner {
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(204, 251, 241, 0.4));
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(13, 148, 136, 0.2);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #0F766E;
  line-height: 1.4;
}

.ese-info-banner svg {
  color: #0D9488;
  flex-shrink: 0;
}

/* Custom Form */
.ese-form {
  background: rgba(248, 250, 252, 0.85);
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 20px;
}

.ese-input-group {
  margin-bottom: 14px;
}

.ese-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  display: block;
}

.ese-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 13.5px;
  font-weight: 500;
  color: #0F2E1E;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ese-input:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* Meal Grid inside Form */
.ese-meal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.ese-meal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Custom Glass Badges for B, L, D Labels */
.ese-glass-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.ese-glass-label-b {
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.28);
  color: #d97706;
}

.ese-glass-label-l {
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid rgba(16, 185, 129, 0.28);
  color: #059669;
}

.ese-glass-label-d {
  background: rgba(99, 102, 241, 0.12);
  border: 1.5px solid rgba(99, 102, 241, 0.28);
  color: #4f46e5;
}

/* Stepper Control for Meal Counts */
.ese-stepper-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  background: #FFFFFF;
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  border-radius: 12px;
  padding: 3px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.ese-stepper-wrap:focus-within {
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

.ese-stepper-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: none;
  background: linear-gradient(135deg, #0D9488, #0F766E);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  user-select: none;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.28);
}

.ese-stepper-btn svg {
  stroke: #FFFFFF;
  stroke-width: 3;
}

.ese-stepper-btn:hover {
  background: linear-gradient(135deg, #0F766E, #115E59);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.45);
  transform: translateY(-1px);
}

.ese-stepper-btn:active {
  transform: translateY(0) scale(0.94);
  box-shadow: 0 1px 4px rgba(13, 148, 136, 0.2);
}

.ese-count-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 32px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: #0F2E1E;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}

.ese-count-input::-webkit-outer-spin-button,
.ese-count-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ese-add-btn {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(13, 148, 136, 0.3);
}

.ese-add-btn svg {
  color: #FFFFFF;
  stroke-width: 2.5;
}

.ese-add-btn:hover {
  background: linear-gradient(135deg, #0F766E 0%, #115E59 100%);
  color: #FFFFFF;
  box-shadow: 0 6px 22px rgba(13, 148, 136, 0.45);
  transform: translateY(-1px);
}

/* Saved Entry Badges in List */
.ese-entry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.ese-entry-item:hover {
  border-color: rgba(13, 148, 136, 0.35);
  background: #F0FDF9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.08);
}

.ese-entry-name {
  font-size: 14px;
  font-weight: 600;
  color: #0F2E1E;
}

.ese-entry-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Custom Glass Badges for B, L, D in Saved List */
.ese-badge-b,
.ese-badge-l,
.ese-badge-d {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
}

.ese-badge-b {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #d97706;
}

.ese-badge-l {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #059669;
}

.ese-badge-d {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: #4f46e5;
}

.ese-del-btn {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: #ef4444;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ese-del-btn:hover {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* ====================================================
   Donezo-Inspired Premium Sidebar & Header Styling
   ==================================================== */

/* Canvas background */
.app-shell {
  background: #f4f5f7 !important;
}

/* Sidebar floating panel */
.sidebar {
  width: var(--sidebar-width, 225px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  background: #FFFFFF !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.main-content {
  margin-left: var(--sidebar-width, 225px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.sidebar-brand {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  padding: 0 16px;
  border-bottom: 1px solid #f3f4f6;
}

.sidebar-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e8f5e9 !important;
  border: 1px solid #c8e6c9 !important;
  box-shadow: none !important;
}

.sidebar-brand-text h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827 !important;
}

.sidebar-brand-text span {
  font-size: 0.725rem;
  color: #0b4f36 !important;
  font-weight: 600;
}

.sidebar-nav {
  padding: 14px 10px;
}

/* Navigation items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #9ca3af !important;
  font-size: 0.875rem !important;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-bottom: 3px;
  position: relative;
  background: transparent;
  border: none;
}

.nav-item:hover {
  background: #f0fdf4 !important;
  color: #047857 !important;
  transform: translateX(3px);
}

.nav-item:hover svg {
  color: #047857 !important;
}

.nav-item.active {
  background: #dcfce7 !important;
  color: #047857 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-item.active::before {
  display: none !important;
}

.nav-item svg {
  width: 19px !important;
  height: 19px !important;
  color: #9ca3af !important;
  transition: color 0.2s ease;
}

.nav-item.active svg {
  color: #047857 !important;
}

.nav-item .nav-badge {
  margin-left: auto;
  background: #111827 !important;
  color: #34d399 !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
}

/* Sidebar App Banner Promo Card (matching image bottom card) */
.sidebar-app-card {
  margin: 12px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0b4f36 0%, #052e20 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(11, 79, 54, 0.25);
}

.sidebar-app-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.25) 0%, transparent 70%);
  border-radius: 50%;
}

.app-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.app-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 4px;
}

.app-card-subtitle {
  font-size: 0.725rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.btn-app-download {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #0f6847;
  color: #ffffff;
  font-size: 0.785rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-app-download:hover {
  background: #148058;
  transform: translateY(-1px);
}

/* Header styling */
.top-header {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0 28px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
  z-index: 200 !important;
  transform: translateZ(0) !important;
  -webkit-transform: translateZ(0) !important;
  isolation: isolate !important;
}

/* Header Search Bar */
.header-search-bar {
  display: flex;
  align-items: center;
  background: #f4f5f7;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  padding: 0 14px;
  height: 44px;
  width: 320px;
  transition: all 0.2s ease;
  position: relative;
}

.header-search-bar:focus-within {
  background: #ffffff;
  border-color: #0b4f36;
  box-shadow: 0 0 0 3px rgba(11, 79, 54, 0.1);
}

.header-search-icon {
  width: 18px;
  height: 18px;
  color: #9ca3af;
  flex-shrink: 0;
  margin-right: 10px;
}

.header-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: #111827;
  width: 100%;
}

.header-search-bar input::placeholder {
  color: #9ca3af;
}

.header-search-shortcut {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Header Right Icon Buttons */
.header-right {
  gap: 12px !important;
}

.header-icon-btn,
.header-notif-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.header-notif-btn svg {
  width: 19px !important;
  height: 19px !important;
  stroke: #475569 !important;
  stroke-width: 2 !important;
  transform-origin: top center !important;
  transition: stroke 0.2s ease, transform 0.2s ease !important;
}

.header-icon-btn:hover,
.header-notif-btn:hover {
  background: #F0FDF4 !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #047857 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.18) !important;
}

.header-notif-btn:hover svg {
  stroke: #059669 !important;
  animation: notifBellSwing 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.header-icon-btn:active,
.header-notif-btn:active {
  transform: scale(0.95) !important;
}

@keyframes notifBellSwing {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-12deg);
  }

  60% {
    transform: rotate(8deg);
  }

  80% {
    transform: rotate(-4deg);
  }

  100% {
    transform: rotate(0);
  }
}

.header-notif-btn .notif-count {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(220, 38, 38, 0.35) !important;
  line-height: 1 !important;
}

.header-notif-btn .notif-count[style*="display: none"],
.header-notif-btn .notif-count[style*="display:none"],
.header-notif-btn .notif-count.hidden {
  display: none !important;
}

/* Header User Profile Widget */
.header-user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-left: 4px;
}

.header-user-block:hover {
  background: #f4f5f7;
}

.header-user-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #064E3B 0%, #065F46 50%, #022C22 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 12px rgba(2, 44, 34, 0.35) !important;
  outline: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

/* Desktop Only: Header right avatar color matching admin panel members page avatar */
@media (min-width: 769px) {
  .header-user-avatar {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: none !important;
    box-shadow: none !important;
  }

  .header-user-block:hover .header-user-avatar {
    background: #bbf7d0 !important;
    color: #166534 !important;
  }
}

.profile-avatar {
  background: linear-gradient(145deg, #064E3B 0%, #065F46 50%, #022C22 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(2, 44, 34, 0.35) !important;
}

.header-user-info {
  display: flex;
  flex-direction: column;
}

.header-user-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

.header-user-role {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .header-search-bar {
    width: 160px;
  }

  .header-user-info {
    display: none;
  }
}

/* ====================================================
   Monthly Overview Master Card & Graph Paper Styling
   ==================================================== */

.overview-master-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 249, 0.93) 50%, rgba(236, 253, 245, 0.98) 100%) !important;
  background-image:
    linear-gradient(to right, rgba(16, 185, 129, 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 185, 129, 0.11) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 253, 249, 0.92) 100%) !important;
  background-size: 24px 24px, 24px 24px, 100% 100% !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 20px 40px -15px rgba(5, 150, 105, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.15) !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
}

.overview-master-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(16, 185, 129, 0.15);
  margin-bottom: 20px;
  flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.04);
}

.overview-master-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.overview-master-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.28);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.overview-master-icon:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 22px rgba(5, 150, 105, 0.4);
}

.overview-master-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f2e1e;
  letter-spacing: -0.01em;
}

.overview-master-subtitle {
  margin: 2px 0 0 0;
  font-size: 0.775rem;
  color: #6b7280;
}

.overview-master-selectors {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stat Cards Grid Inside Master Card */
.overview-desktop-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.overview-desktop-stats .stat-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.overview-desktop-stats .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.25s ease;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  z-index: 3;
}

/* Dynamic Cursor Spotlight Radial Glow Overlay */
.overview-desktop-stats .stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      var(--glow-color, rgba(16, 185, 129, 0.28)) 0%,
      var(--glow-bg, rgba(16, 185, 129, 0.08)) 45%,
      transparent 80%) !important;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.overview-desktop-stats .stat-card:hover::after {
  opacity: 1;
}

.overview-desktop-stats .stat-card:hover {
  transform: translateY(-4px) !important;
}

.overview-desktop-stats .stat-card .stat-icon,
.overview-desktop-stats .stat-card .stat-info {
  position: relative;
  z-index: 2;
}

.overview-desktop-stats .stat-card:hover .stat-icon svg {
  transform: scale(1.08);
}

.overview-desktop-stats .stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
  position: relative;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.overview-desktop-stats .stat-icon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.overview-desktop-stats .stat-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

.overview-desktop-stats .stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.overview-desktop-stats .stat-value .tk-symbol {
  width: 0.82em;
  height: 0.88em;
  margin-right: 1.5px;
  vertical-align: -0.07em;
}

.numeric-td .tk-symbol {
  width: 0.82em;
  height: 0.86em;
  margin-right: 1.5px;
  vertical-align: -0.06em;
}

/* Stat Themes Spotlight Colors */
.theme-deposit {
  --glow-color: rgba(16, 185, 129, 0.32);
  --glow-bg: rgba(220, 252, 231, 0.5);
}

.theme-deposit::before {
  background: #10b981;
}

.theme-deposit .stat-icon {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.18) !important;
}

.theme-deposit:hover {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(16, 185, 129, 0.22) !important;
}

.theme-meals {
  --glow-color: rgba(20, 184, 166, 0.32);
  --glow-bg: rgba(204, 251, 241, 0.5);
}

.theme-meals::before {
  background: #14b8a6;
}

.theme-meals .stat-icon {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%) !important;
  color: #0d9488 !important;
  border: 1px solid rgba(13, 148, 136, 0.18) !important;
}

.theme-meals:hover {
  border-color: rgba(20, 184, 166, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(20, 184, 166, 0.22) !important;
}

.theme-meal-rate {
  --glow-color: rgba(5, 150, 105, 0.32);
  --glow-bg: rgba(209, 250, 229, 0.5);
}

.theme-meal-rate::before {
  background: #059669;
}

.theme-meal-rate .stat-icon {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  color: #059669 !important;
  border: 1px solid rgba(5, 150, 105, 0.18) !important;
}

.theme-meal-rate:hover {
  border-color: rgba(5, 150, 105, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(5, 150, 105, 0.22) !important;
}

.theme-bazar {
  --glow-color: rgba(245, 158, 11, 0.32);
  --glow-bg: rgba(254, 243, 199, 0.5);
}

.theme-bazar::before {
  background: #f59e0b;
}

.theme-bazar .stat-icon {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #d97706 !important;
  border: 1px solid rgba(217, 119, 6, 0.18) !important;
}

.theme-bazar:hover {
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(245, 158, 11, 0.22) !important;
}

.theme-meal-cost {
  --glow-color: rgba(249, 115, 22, 0.32);
  --glow-bg: rgba(255, 237, 213, 0.5);
}

.theme-meal-cost::before {
  background: #f97316;
}

.theme-meal-cost .stat-icon {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #ea580c !important;
  border: 1px solid rgba(234, 88, 12, 0.18) !important;
}

.theme-meal-cost:hover {
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(249, 115, 22, 0.22) !important;
}

.theme-other-cost {
  --glow-color: rgba(234, 179, 8, 0.32);
  --glow-bg: rgba(254, 249, 195, 0.5);
}

.theme-other-cost::before {
  background: #eab308;
}

.theme-other-cost .stat-icon {
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%) !important;
  color: #b45309 !important;
  border: 1px solid rgba(180, 83, 9, 0.18) !important;
}

.theme-other-cost:hover {
  border-color: rgba(234, 179, 8, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(234, 179, 8, 0.22) !important;
}

.theme-deduction {
  --glow-color: rgba(244, 63, 94, 0.32);
  --glow-bg: rgba(255, 228, 230, 0.5);
}

.theme-deduction::before {
  background: #f43f5e;
}

.theme-deduction .stat-icon {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%) !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.18) !important;
}

.theme-deduction:hover {
  border-color: rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(244, 63, 94, 0.22) !important;
}

.theme-total-cost {
  --glow-color: rgba(239, 68, 68, 0.32);
  --glow-bg: rgba(254, 226, 226, 0.5);
}

.theme-total-cost::before {
  background: #ef4444;
}

.theme-total-cost .stat-icon {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
}

.theme-total-cost:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(239, 68, 68, 0.22) !important;
}

.theme-net-balance {
  --glow-color: rgba(14, 165, 233, 0.32);
  --glow-bg: rgba(224, 242, 254, 0.5);
}

.theme-net-balance::before {
  background: #0ea5e9;
}

.theme-net-balance .stat-icon {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(2, 132, 199, 0.18) !important;
}

.theme-net-balance:hover {
  border-color: rgba(14, 165, 233, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(14, 165, 233, 0.22) !important;
}

.theme-net-balance.net-positive {
  --glow-color: rgba(16, 185, 129, 0.32);
  --glow-bg: rgba(220, 252, 231, 0.5);
}

.theme-net-balance.net-positive::before {
  background: #10b981;
}

.theme-net-balance.net-positive .stat-icon {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: #15803d !important;
  border: 1px solid rgba(21, 128, 61, 0.18) !important;
}

.theme-net-balance.net-positive:hover {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(16, 185, 129, 0.22) !important;
}

.theme-net-balance.net-positive .val-positive {
  color: #15803d !important;
}

.theme-net-balance.net-negative {
  --glow-color: rgba(239, 68, 68, 0.32);
  --glow-bg: rgba(254, 226, 226, 0.5);
}

.theme-net-balance.net-negative::before {
  background: #ef4444;
}

.theme-net-balance.net-negative .stat-icon {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.18) !important;
}

.theme-net-balance.net-negative:hover {
  border-color: rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 14px 30px -4px rgba(239, 68, 68, 0.22) !important;
}

.theme-net-balance.net-negative .val-negative {
  color: #dc2626 !important;
}

@media (max-width: 1024px) {
  .overview-desktop-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .overview-desktop-stats {
    grid-template-columns: 1fr;
  }

  .overview-master-card {
    padding: 16px !important;
    border-radius: 18px !important;
  }
}

/* ====================================================
   Upgrade to Premium Banner Card Styling
   ==================================================== */
.premium-banner-card {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #fffdf2 0%, #fef3c7 50%, #fde68a 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 6px 20px -6px rgba(245, 158, 11, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  margin-top: -18px !important;
  margin-bottom: 14px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: default !important;
  user-select: none !important;
}

.premium-banner-card.hidden {
  display: none !important;
}

.premium-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.premium-banner-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
  flex-shrink: 0 !important;
}

.premium-banner-text {
  display: flex !important;
  flex-direction: column !important;
}

.premium-banner-title {
  font-size: 0.925rem !important;
  font-weight: 600 !important;
  color: #78350f !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.premium-banner-subtitle {
  font-size: 0.785rem !important;
  font-weight: 400 !important;
  color: #92400e !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.2 !important;
}

.premium-banner-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(251, 191, 36, 0.4) !important;
  color: #78350f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

@media (max-width: 640px) {
  .premium-banner-card {
    padding: 12px 16px !important;
    gap: 10px !important;
  }

  .premium-banner-subtitle {
    font-size: 0.725rem !important;
  }
}

/* ====================================================
   Professional Member Stats Table & Tia Avatar Styling
   ==================================================== */

#overviewMemberStatsSection .card {
  border-radius: 20px !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  box-shadow: 0 10px 30px -10px rgba(5, 150, 105, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.12) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#overviewMemberStatsSection .table-wrapper {
  overflow-x: hidden;
  border: none !important;
  border-radius: 20px;
}

@media (max-width: 768px) {
  #overviewMemberStatsSection .table-wrapper {
    overflow-x: auto;
  }
}

#memberStatsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#memberStatsTable thead th {
  background: linear-gradient(135deg, #f0fdf4 0%, #e6f7ef 100%) !important;
  color: #047857 !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 15px 20px !important;
  border-bottom: 2px solid rgba(16, 185, 129, 0.2) !important;
  text-align: left;
}

#memberStatsTable thead th:first-child {
  border-top-left-radius: 16px;
}

#memberStatsTable thead th:last-child {
  border-top-right-radius: 16px;
}

#memberStatsTable tbody tr {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9) !important;
  cursor: pointer;
  user-select: none;
}

#memberStatsTable tbody tr:nth-child(even) {
  background-color: rgba(248, 250, 252, 0.55) !important;
}

#memberStatsTable tbody tr:hover {
  background-color: #f0fdf4 !important;
  box-shadow: inset 4px 0 0 #10b981 !important;
}

#memberStatsTable tbody tr.selected {
  background-color: rgba(16, 185, 129, 0.12) !important;
  box-shadow: inset 5px 0 0 #059669 !important;
}

#memberStatsTable td {
  padding: 14px 20px !important;
  vertical-align: middle !important;
  font-size: 0.925rem;
  color: #1e293b;
}

/* Net Balance Green Flat Circle Avatar */
.avatar-tia {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  border: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.member-name-text {
  font-weight: 600 !important;
  color: #0f172a !important;
  font-size: 0.935rem !important;
  letter-spacing: -0.01em;
}

.numeric-td {
  font-family: var(--font-number, system-ui);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.meals-count-val {
  color: #334155 !important;
}

.deposit-val {
  color: #0f172a !important;
}

.meal-cost-val {
  color: #475569 !important;
}

.bal-positive {
  color: #059669 !important;
  font-weight: 700 !important;
}

.bal-negative {
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Status Pills */
.member-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.member-status-badge.status-paid {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
}

.member-status-badge.status-due {
  background: #ffe4e6 !important;
  color: #e11d48 !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
}

/* ====================================================
   History Page & Master Block Styling
   ==================================================== */

.history-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(241, 245, 249, 0.7);
  padding: 4px;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.12);
}

.history-pill {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-pill:hover {
  color: #047857;
}

.history-pill.active {
  background: #ffffff;
  color: #059669;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
  font-weight: 700;
}

.history-page-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .history-page-grid {
    grid-template-columns: 1fr;
  }
}

.history-block-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
  padding: 20px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.history-block-card:hover {
  box-shadow: 0 12px 28px -6px rgba(5, 150, 105, 0.1), 0 0 0 1px rgba(16, 185, 129, 0.2) !important;
  transform: translateY(-2px);
}

.history-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9);
}

.history-block-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-block-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.history-block-icon svg {
  width: 20px;
  height: 20px;
}

.history-block-title {
  margin: 0;
  font-size: 0.975rem;
  font-weight: 700;
  color: #0f172a;
}

.history-block-count {
  font-size: 0.775rem;
  color: #64748b;
  font-weight: 500;
}

.history-select {
  padding: 5px 10px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.history-select:hover,
.history-select:focus {
  border-color: #10b981 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12) !important;
}

/* ====================================================
   My Meal Master Page Styling & Ambient Background
   ==================================================== */
body:has(#page-overview.active) .main-content,
.main-content:has(#page-overview.active),
body.role-admin:has(#page-dashboard.active) .main-content,
.main-content:has(#page-dashboard.active) {
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.16) 0px, transparent 65%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 65%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.11) 0px, transparent 65%),
    linear-gradient(to right, rgba(15, 23, 42, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.038) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
}

#page-overview.page-section,
body.role-admin #page-dashboard.page-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: -24px -24px 0 -24px !important;
  padding: 28px !important;
  min-height: calc(100vh - 68px) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.16) 0px, transparent 65%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 65%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.11) 0px, transparent 65%),
    linear-gradient(to right, rgba(15, 23, 42, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.038) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
  box-sizing: border-box;
}

#page-mymeal.page-section,
body.role-user #page-dashboard.page-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: -24px -24px 0 -24px !important;
  padding: 28px !important;
  min-height: calc(100vh - 68px) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #f8fafb !important;
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(16, 185, 129, 0.10) 0px, transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(99, 102, 241, 0.07) 0px, transparent 55%) !important;
  background-size: 100% 100% !important;
  box-sizing: border-box;
}

.mymeal-desktop-hero-banner {
  display: block;
  margin-bottom: 24px;
}

.mymeal-master-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px;
}

.mymeal-master-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 32px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 2px solid rgba(16, 185, 129, 0.35) !important;
  margin-bottom: 26px;
  flex-wrap: wrap;
  box-shadow: 0 14px 36px -6px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(16, 185, 129, 0.15) !important;
}

.mymeal-master-title-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mymeal-master-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35) !important;
  flex-shrink: 0;
}

.mymeal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mymeal-master-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #064e3b !important;
  margin: 0;
  letter-spacing: -0.02em;
}

.mymeal-master-subtitle {
  font-size: 13px !important;
  color: #059669 !important;
  font-weight: 500 !important;
  margin: 4px 0 0 0 !important;
}

.mymeal-header-stats-dock {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mymeal-stat-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.mymeal-pill-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mymeal-pill-text {
  display: flex;
  flex-direction: column;
}

.mymeal-pill-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mymeal-pill-val {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ============================================================ */
/* DEEP FOREST GREEN HERO BANNER (Top Section)                  */
/* ============================================================ */
.mymeal-mobile-hero-wrapper {
  background: linear-gradient(160deg, #06281b 0%, #0d3b26 50%, #051a12 100%);
  border-radius: 26px;
  padding: 22px 20px 22px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 16px 36px -8px rgba(4, 32, 22, 0.4);
  width: 100%;
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mymeal-ambient-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mymeal-ambient-circle.circle-1 {
  top: -40px;
  right: -30px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.08) 50%, transparent 70%);
}

.mymeal-ambient-circle.circle-2 {
  bottom: -40px;
  left: -30px;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.22) 0%, transparent 65%);
}

/* User Identity Topbar - on desktop, hide because desktop has .top-header */
.mymeal-user-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
}

.mymeal-user-profile-block {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.mymeal-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
  flex-shrink: 0;
}

.mymeal-user-meta {
  display: flex;
  flex-direction: column;
}

.mymeal-mess-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.02em;
  margin-bottom: 1px;
}

.mymeal-user-greeting {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.06rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.mymeal-user-greeting strong {
  color: #ffffff;
  font-weight: 800;
}

.mymeal-chevron {
  stroke: #ffffff;
  transition: transform 0.2s ease;
}

.mymeal-user-profile-block:hover .mymeal-chevron {
  transform: translateX(3px);
}

.mymeal-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mymeal-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.2s ease;
}

.mymeal-icon-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.mymeal-notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #06281b;
}

/* Hero Rate Card (Inside Hero Banner) */
.mymeal-hero-card {
  background: rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 22px !important;
  padding: 18px 20px 18px !important;
  color: #ffffff !important;
  position: relative;
  z-index: 3;
  width: 100% !important;
  box-sizing: border-box !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mymeal-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mymeal-hero-badge-tag {
  display: flex;
  align-items: center;
}

.mymeal-hero-tag-text {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a7f3d0;
}

.mymeal-hero-mode-pill {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #d1fae5;
  letter-spacing: 0.02em;
}

.overview-hero-pill-btn {
  background: rgba(16, 185, 129, 0.22) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #d1fae5 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.02em !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.overview-hero-pill-btn:hover {
  background: rgba(16, 185, 129, 0.35) !important;
  border-color: rgba(52, 211, 153, 0.6) !important;
  transform: translateY(-1px);
}

.overview-hero-pill-btn:active {
  transform: scale(0.96);
}

.custom-dropdown.active .overview-hero-pill-btn {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
  box-shadow: none !important;
}

.overview-hero-pill-btn svg {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: center center;
}

.custom-dropdown.active .overview-hero-pill-btn svg {
  transform: rotate(180deg) !important;
}

/* Overview Mobile Dropdown Menu Animated Glassmorphism */
.overview-hero-selectors .custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  border-radius: 14px !important;
  background: rgba(10, 30, 22, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  padding: 6px !important;
  display: none;
  transform-origin: top right;
  z-index: 200 !important;
  max-height: 240px;
  overflow-y: auto;
}

.overview-hero-selectors .custom-dropdown.active .custom-dropdown-menu {
  display: block !important;
  animation: overviewDropdownSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes overviewDropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overview-hero-selectors .custom-dropdown-item {
  padding: 8px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  transition: all 0.16s ease !important;
  border-left: none !important;
  margin-bottom: 2px;
}

.overview-hero-selectors .custom-dropdown-item:last-child {
  margin-bottom: 0;
}

.overview-hero-selectors .custom-dropdown-item:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  color: #6ee7b7 !important;
  transform: translateX(2px);
}

.overview-hero-selectors .custom-dropdown-item.selected {
  background: rgba(16, 185, 129, 0.32) !important;
  color: #34d399 !important;
  font-weight: 700 !important;
}

.mymeal-hero-main-stat {
  margin: 6px 0 16px 0;
}

.mymeal-hero-val-wrap {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.mymeal-hero-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a7f3d0;
  line-height: 1;
}

.mymeal-hero-currency .tk-symbol {
  width: 1.32rem;
  height: 1.42rem;
  margin-right: 0px;
  vertical-align: -0.05em;
  transform: scaleX(0.92);
}

.mymeal-hero-big-number {
  font-size: 2.7rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mymeal-hero-val-wrap.is-negative .mymeal-hero-currency {
  color: #fca5a5;
}

.mymeal-hero-val-wrap.is-negative .mymeal-hero-big-number {
  color: #fca5a5;
}

.mymeal-hero-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: #6ee7b7;
  margin-left: 6px;
}

/* Unified 6-Metric Stats Shelf (NO WHITE BLOCKS - Completely Transparent with Thin Dividers) */
.mymeal-hero-stats-shelf {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.mymeal-shelf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mymeal-shelf-h-divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

.mymeal-shelf-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.mymeal-shelf-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.mymeal-shelf-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 2px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.mymeal-shelf-val-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.mymeal-shelf-val {
  font-size: 0.98rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.mymeal-shelf-val .tk-symbol {
  width: 0.85em;
  height: 0.88em;
  margin-right: 1.5px;
  vertical-align: -0.08em;
}

.mymeal-shelf-val.val-positive {
  color: #34d399 !important;
}

.mymeal-shelf-val.val-negative {
  color: #f87171 !important;
}

.mymeal-body-content {
  width: 100%;
  box-sizing: border-box;
}

/* Completed Meals & Due Locked Notice */
.completed-meals-warning-card {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.16);
  color: #991b1b;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: var(--space-3);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.03);
  box-sizing: border-box;
}

.completed-meals-warning-card.due-locked-notice-card {
  cursor: pointer;
  justify-content: space-between;
}

.completed-meals-warning-card .meal-warning-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #b91c1c;
}

.completed-meals-warning-card .meal-warning-text {
  flex: 1;
}

.due-locked-action-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #DC2626;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(239, 68, 68, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

.mymeal-master-card .meal-toggle-card,
.meal-toggle-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  padding: 15px 18px !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
}

.mymeal-master-card .meal-toggle-card.on,
.meal-toggle-card.on {
  background: #ffffff !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 3px 12px -2px rgba(16, 185, 129, 0.12) !important;
}

.mymeal-master-card .meal-toggle-card.off,
.meal-toggle-card.off {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.02) !important;
}

.mymeal-master-card .meal-toggle-card.on:hover,
.meal-toggle-card.on:hover {
  border-color: #10b981 !important;
  box-shadow: 0 6px 16px -2px rgba(16, 185, 129, 0.16) !important;
}

.mymeal-master-card .meal-toggle-card.off:hover,
.meal-toggle-card.off:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.05) !important;
}

.meal-toggle-card .meal-toggle-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.meal-toggle-card .meal-toggle-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: #64748b !important;
}

.meal-toggle-card.on .meal-toggle-icon {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  box-shadow: none !important;
}

.meal-toggle-card.on .meal-toggle-icon svg {
  color: #059669 !important;
}

.meal-toggle-card.off .meal-toggle-icon,
.meal-toggle-card.locked .meal-toggle-icon,
.meal-toggle-card.locked.off .meal-toggle-icon {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.meal-toggle-card.off .meal-toggle-icon svg,
.meal-toggle-card.locked .meal-toggle-icon svg,
.meal-toggle-card.locked.off .meal-toggle-icon svg {
  color: #64748b !important;
}

.meal-toggle-card .meal-title-row h4,
.meal-toggle-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: -0.01em !important;
}

.meal-toggle-card .quantity-selector {
  height: 36px !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.meal-toggle-card .quantity-selector .qty-btn {
  width: 32px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
}

.meal-toggle-card.on .quantity-selector .qty-plus {
  background: #10b981 !important;
  color: #ffffff !important;
}

.meal-toggle-card .quantity-selector.disabled,
.meal-toggle-card.locked .quantity-selector {
  opacity: 0.55 !important;
  pointer-events: none !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}

.meal-toggle-card .quantity-selector.disabled .qty-btn,
.meal-toggle-card.locked .quantity-selector .qty-btn {
  background: transparent !important;
  color: #94a3b8 !important;
}

.meal-toggle-card .quantity-selector.disabled .qty-val,
.meal-toggle-card.locked .quantity-selector .qty-val {
  color: #64748b !important;
}

.meal-toggle-card .meal-status-badge.on {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1px solid #bbf7d0 !important;
}

.meal-toggle-card .meal-status-badge.off {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
}

.meal-toggle-card .meal-status-badge.locked,
.meal-toggle-card .meal-status-badge.locked.off,
.meal-toggle-card .meal-status-badge.locked.on,
.meal-status-badge.locked {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

.meal-toggle-card.locked {
  background: #f8fafc !important;
}

.meal-toggle-card.locked.on {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

.meal-toggle-card.locked.off {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* ============================================================ */
/* QUICK SERVICES SECTION (2x2 Block Cards)                     */
/* ============================================================ */
.mymeal-quick-features-section {
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
}

.mymeal-blocks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.mymeal-block-card {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 20px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  user-select: none;
  min-width: 0;
  min-height: 106px;
  box-sizing: border-box;
}

.mymeal-block-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}

.mymeal-block-card:active {
  transform: scale(0.975);
}

.mb-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}

.mymeal-block-card:hover .mb-icon-box {
  transform: scale(1.05);
}

.mb-icon-bazar {
  background: #dcfce7;
  color: #059669;
  border: none;
}

.mb-icon-history {
  background: #fee2e2;
  color: #e11d48;
  border: none;
}

.mb-icon-tasks {
  background: #f0fdf4;
  color: #16a34a;
  border: none;
}

.mb-icon-notices {
  background: #ede9fe;
  color: #7c3aed;
  border: none;
}

[data-theme="dark"] .mb-icon-history {
  background: rgba(225, 29, 72, 0.15);
  color: #fb7185;
}

[data-theme="dark"] .mb-icon-bazar {
  background: rgba(5, 150, 105, 0.15);
  color: #34d399;
}

[data-theme="dark"] .mb-icon-tasks {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}

[data-theme="dark"] .mb-icon-notices {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

.mb-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mb-title {
  font-size: 0.98rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-subtitle {
  font-size: 0.78rem;
  font-weight: 500;
  color: #64748b;
  margin: 3px 0 0 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================ */
/* DEDICATED SUBPAGES (Meal History, Bazar Roster, Tasks, Notices) */
/* ============================================================ */
#page-mealhistory.page-section,
#page-bazarroster.page-section,
#page-tasks.page-section,
#page-notices.page-section {
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.custom-subpage-container {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 14px 28px;
}

.mh-month-selector-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  margin-top: 0 !important;
  margin-bottom: 12px;
}

.mh-month-arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.mh-month-arrow-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.mh-month-label {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.mh-logs-scroll-area {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mh-log-item {
  background: #ffffff;
  border: 1.5px solid #eef2f6;
  border-radius: 16px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.02);
}

.mh-log-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.mh-log-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mh-log-icon-box.icon-on {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.mh-log-icon-box.icon-off {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.22);
}

.mh-log-info {
  flex: 1;
  min-width: 0;
}

.mh-log-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.mh-log-meal-title {
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
}

.mh-log-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mh-log-badge.badge-on {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.mh-log-badge.badge-off {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.mh-log-time {
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
}

.mh-empty-state {
  padding: 48px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 20px;
}

.mh-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  margin-bottom: 12px;
}

.mh-empty-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.mh-empty-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* ============================================================ */
/* BAZAR ROSTER SUBPAGE (Clean Modern Flat Roster UI)            */
/* ============================================================ */
.br-tabs-header {
  display: flex;
  background: #edf1ec;
  padding: 4px;
  border-radius: 14px;
  margin-bottom: 14px;
}

.br-tab-btn {
  flex: 1;
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  user-select: none;
}

.br-tab-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 750;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.br-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #edf5ed;
  border-radius: 14px;
  color: #2d4a3e;
  margin-bottom: 18px;
  font-size: 0.84rem;
  line-height: 1.4;
  border: 1px solid rgba(45, 74, 62, 0.08);
}

.br-info-icon {
  color: #4b6b5c;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.br-info-text {
  flex: 1;
  font-weight: 500;
}

.br-section-header {
  margin-bottom: 12px;
}

.br-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.br-section-subtitle {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  margin: 3px 0 0 0;
}

.br-roster-card {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}

.br-roster-list {
  display: flex;
  flex-direction: column;
}

.br-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  gap: 14px;
  transition: background 0.15s ease;
}

.br-roster-row:last-child {
  border-bottom: none;
}

.br-roster-row:hover {
  background: #f8fafc;
}

.br-date-badge {
  width: 44px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1.1;
  gap: 1px;
}

.br-date-day {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.br-date-num {
  font-size: 1.05rem;
  font-weight: 800;
}

.br-date-badge.badge-missed {
  background: #fee2e2;
  color: #e11d48;
}

.br-date-badge.badge-done {
  background: #dcfce7;
  color: #059669;
}

.br-date-badge.badge-today {
  background: #d1fae5;
  color: #059669;
}

.br-date-badge.badge-upcoming {
  background: #f1f5f9;
  color: #64748b;
}

.br-row-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.br-member-name {
  font-size: 0.95rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-duty-desc {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748b;
  margin: 2px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-status-pill {
  font-size: 0.76rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.br-status-pill.missed {
  background: #fee2e2;
  color: #e11d48;
}

.br-status-pill.today {
  background: #d1fae5;
  color: #059669;
}

.br-status-pill.done {
  background: #ecfdf5;
  color: #059669;
}

.br-entries-summary-card {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 18px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.br-summary-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.br-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.br-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}

.br-summary-divider {
  width: 1px;
  height: 28px;
  background: #e2e8f0;
}

.br-entries-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.br-entry-item {
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

.br-entry-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.br-entry-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #dcfce7;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.br-entry-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.br-entry-title {
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-entry-sub {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  margin: 2px 0 0 0;
}

.br-entry-amount {
  font-size: 1rem;
  font-weight: 800;
  color: #059669;
  flex-shrink: 0;
}

.br-loading-state {
  padding: 36px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Dark Mode support */
[data-theme="dark"] .br-tabs-header {
  background: #1e293b;
}

[data-theme="dark"] .br-tab-btn.active {
  background: #334155;
  color: #f8fafc;
}

[data-theme="dark"] .br-tab-btn {
  color: #94a3b8;
}

[data-theme="dark"] .br-info-banner {
  background: rgba(16, 185, 129, 0.1);
  color: #a7f3d0;
  border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .br-info-icon {
  color: #34d399;
}

[data-theme="dark"] .br-section-title {
  color: #f8fafc;
}

[data-theme="dark"] .br-section-subtitle {
  color: #94a3b8;
}

[data-theme="dark"] .br-roster-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .br-roster-row {
  border-bottom-color: #334155;
}

[data-theme="dark"] .br-roster-row:hover {
  background: #273549;
}

[data-theme="dark"] .br-member-name {
  color: #f8fafc;
}

[data-theme="dark"] .br-duty-desc {
  color: #94a3b8;
}

[data-theme="dark"] .br-date-badge.badge-upcoming {
  background: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .br-date-badge.badge-missed {
  background: rgba(225, 29, 72, 0.2);
  color: #fb7185;
}

[data-theme="dark"] .br-date-badge.badge-done,
[data-theme="dark"] .br-date-badge.badge-today {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .br-status-pill.missed {
  background: rgba(225, 29, 72, 0.2);
  color: #fb7185;
}

[data-theme="dark"] .br-status-pill.today,
[data-theme="dark"] .br-status-pill.done {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .br-entries-summary-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .br-stat-val {
  color: #f8fafc;
}

[data-theme="dark"] .br-summary-divider {
  background: #334155;
}

[data-theme="dark"] .br-entry-item {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .br-entry-title {
  color: #f8fafc;
}

/* Subpage Placeholders & Notice Cards */
.subpage-placeholder-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  margin-top: 4px;
}

.subpage-placeholder-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.subpage-placeholder-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
}

.subpage-placeholder-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 18px 0;
  line-height: 1.5;
  max-width: 380px;
}

.subpage-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.subpage-notices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.subpage-notice-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.subpage-notice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.subpage-notice-tag {
  font-size: 0.72rem;
  font-weight: 750;
  padding: 3px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.subpage-notice-date {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 600;
}

.subpage-notice-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.subpage-notice-body {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 640px) {
  .mymeal-master-header {
    padding: 14px 16px;
    border-radius: 16px;
  }

  .mymeal-master-icon {
    width: 40px;
    height: 40px;
  }
}

/* ====================================================
   Ultra-Advanced Professional SaaS Background for Admin Members Section
   ==================================================== */
body:has(#page-users.active) .main-content,
.main-content:has(#page-users.active) {
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
    linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
}

#page-users.page-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: -24px -24px 0 -24px !important;
  padding: 28px !important;
  min-height: calc(100vh - 68px) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.08) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
    linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
  box-sizing: border-box;
}

/* ====================================================
   Ultra-Advanced SaaS Background with Rich Ambient Mesh Gradient Aura
   ==================================================== */
body:has(#page-meals.active) .main-content,
.main-content:has(#page-meals.active) {
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.16) 0px, transparent 65%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 65%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.11) 0px, transparent 65%),
    linear-gradient(to right, rgba(15, 23, 42, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.038) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
}

#page-meals.page-section {
  max-width: 100% !important;
  width: 100% !important;
  margin: -24px -24px 0 -24px !important;
  padding: 28px !important;
  min-height: calc(100vh - 68px) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: #f8fafc !important;
  background-image:
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.16) 0px, transparent 65%),
    radial-gradient(at 100% 0%, rgba(56, 189, 248, 0.15) 0px, transparent 65%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.11) 0px, transparent 65%),
    linear-gradient(to right, rgba(15, 23, 42, 0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.038) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 28px 28px, 28px 28px !important;
  box-sizing: border-box;
}

.users-master-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#usersGrid.users-grid {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

.members-table-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: var(--space-4, 16px);
}

.members-table-wrapper::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--font-sm, 0.875rem);
}

.members-table th {
  padding: 12px 14px;
  font-weight: 600;
  color: var(--text-tertiary, #64748b);
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  background: rgba(248, 250, 252, 0.6);
  white-space: nowrap;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.members-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  vertical-align: middle;
  color: var(--text-primary, #1e293b);
  white-space: nowrap;
}

/* Premium Row & Item Hover Effects */
.members-table tbody tr {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-left: 3.5px solid transparent;
}

.members-table tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.05);
  border-left-color: #10b981;
  transform: translateX(3px);
}

.members-table tbody tr.selected {
  background-color: rgba(16, 185, 129, 0.095);
  border-left-color: #059669;
}

.members-table tbody tr:last-child td {
  border-bottom: none;
}

/* Photo Column */
.members-table .col-photo {
  width: 56px;
  padding-left: 16px;
}

/* Soft Mint Circle Avatar Styling (matching user attached image 100%) */
.member-tia-avatar,
#page-meals .avatar,
#page-meals .meal-user-chip .avatar,
#page-meals .meal-chart-table td .avatar,
#page-meals .data-table .avatar,
#fridayMealPanel .avatar,
.friday-meal-chip .avatar,
.friday-meal-users-grid .avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
  border: none !important;
  box-shadow: none !important;
  user-select: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.members-table tbody tr:hover .member-tia-avatar,
#page-meals tr:hover .avatar,
.meal-user-chip:hover .avatar,
.friday-meal-chip:hover .avatar {
  transform: scale(1.1) !important;
  background: #bbf7d0 !important;
  color: #166534 !important;
}

.member-name-text {
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.members-table tbody tr:hover .member-name-text {
  color: #059669;
}

.member-meta-text {
  color: var(--text-secondary, #64748b);
  font-size: 0.835rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status Badges */
.member-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform 0.18s ease;
}

.members-table tbody tr:hover .member-status-badge {
  transform: scale(1.05);
}

.member-status-badge.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.member-status-badge.status-inactive {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Operation Action Icons */
.member-operation-btns {
  display: flex;
  align-items: center;
  gap: 6px;
}

.member-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: #ffffff;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.member-icon-btn.edit-btn:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.member-icon-btn.delete-btn:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}

.member-icon-btn:active {
  transform: translateY(0) scale(0.95);
}

/* Action Login Button */
.member-login-btn {
  padding: 6px 15px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8125rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px -1px rgba(99, 102, 241, 0.35);
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.member-login-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px -1px rgba(99, 102, 241, 0.55);
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.member-login-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ====================================================
   More Menu Page Pro Styling
   ==================================================== */
.more-segmented-tabs {
  display: flex;
  gap: 8px;
  background: var(--card-bg, #ffffff);
  padding: 6px;
  border-radius: var(--radius-xl, 16px);
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  width: fit-content;
  max-width: 100%;
}

.more-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-lg, 12px) !important;
  border: none !important;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-sm, 14px);
  color: var(--text-muted, #64748b) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

.more-tab-btn:hover {
  color: var(--accent-600, #059669) !important;
  background: rgba(16, 185, 129, 0.08);
}

.more-tab-btn.active {
  background: var(--accent-600, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  font-weight: 700 !important;
  border-bottom: none !important;
}

.more-tab-btn svg {
  transition: transform 0.2s ease;
}

.more-tab-btn:hover svg {
  transform: scale(1.1);
}

.more-pro-card {
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-xl, 16px);
  padding: 24px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.more-pro-card:hover {
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
}

.sms-toggle-banner {
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.8), rgba(240, 253, 249, 0.95));
  border: 1px solid rgba(167, 243, 208, 0.8);
}

.sms-toggle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sms-toggle-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sms-toggle-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.more-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.more-card-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.more-card-icon-wrap.green {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.more-card-icon-wrap.blue {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.more-card-icon-wrap.purple {
  background: rgba(139, 92, 246, 0.12);
  color: #7c3aed;
}

.more-card-icon-wrap.slate {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.more-card-title {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main, #0f172a);
}

.more-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}

.sms-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.sms-metric-card {
  background: var(--bg-hover, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s ease;
}

.sms-metric-card:hover {
  transform: translateY(-2px);
}

.sms-metric-card.highlight {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #a7f3d0;
}

.sms-metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sms-metric-icon.balance {
  background: rgba(15, 23, 42, 0.06);
  color: #1e293b;
}

.sms-metric-icon.rate {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

.sms-metric-icon.remaining {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(5, 150, 105, 0.25);
}

.sms-metric-data {
  min-width: 0;
}

.sms-metric-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #64748b);
}

.sms-metric-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main, #0f172a);
  margin-top: 2px;
}

.sms-metric-value.text-emerald {
  color: #047857;
}

.input-with-badge {
  position: relative;
  display: flex;
  align-items: center;
}

.input-badge {
  position: absolute;
  left: 12px;
  font-weight: 700;
  color: var(--text-muted, #64748b);
  pointer-events: none;
}

.input-with-badge .form-input {
  padding-left: 32px !important;
}

.sms-tags-container {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.sms-tags-title {
  font-size: 11px;
  font-weight: 700;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.sms-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sms-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #6ee7b7;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.sms-tag:hover {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.2);
}

.sms-tag:hover svg {
  stroke: #ffffff;
}

.sms-template-textarea {
  min-height: 140px;
  font-family: 'Inter', inherit;
  font-size: 14px;
  line-height: 1.6;
  padding: 14px;
  border-radius: 12px;
}

.sms-textarea-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #64748b);
}

.sms-preview-card {
  background: linear-gradient(135deg, #f0fdf9, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.sms-preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.sms-preview-body {
  margin: 0;
  font-size: 14px;
  color: #0f2e1e;
  line-height: 1.6;
}

.more-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sms-log-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}

/* ============================================
   Messliner — Shared Bills & Ledger Styles
   ============================================ */

.ledger-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 18px);
  margin-bottom: var(--space-4, 20px);
  background: linear-gradient(135deg, #0f2e1e 0%, #064e3b 40%, #065f46 70%, #047857 100%);
  border-radius: 20px;
  padding: 24px 28px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(5, 78, 59, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

/* Decorative circles matching finance & meals hero banner */
.ledger-hero-banner::before {
  content: '';
  position: absolute;
  top: -45px;
  right: 50px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.14);
  background: rgba(16, 185, 129, 0.06);
  pointer-events: none;
}

.ledger-hero-banner::after {
  content: '';
  position: absolute;
  bottom: -35px;
  right: 175px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 2px solid rgba(167, 243, 208, 0.12);
  background: rgba(16, 185, 129, 0.04);
  pointer-events: none;
}

.ledger-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 2;
  min-width: 0;
}

.ledger-hero-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a7f3d0;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.ledger-hero-banner:hover .ledger-hero-icon-box {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.18);
}

.ledger-hero-text {
  min-width: 0;
}

.ledger-hero-text h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}

.ledger-hero-text p {
  font-size: 0.85rem;
  color: rgba(167, 243, 208, 0.88);
  margin: 4px 0 0 0;
  font-weight: 400;
  line-height: 1.4;
}

.ledger-cycle-header-card {
  background: #ffffff;
  border: 1px solid #D1FAE5;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.05), 0 0 0 1px #D1FAE5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5, 20px);
  box-sizing: border-box;
  max-width: 100%;
}

.ledger-cycle-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ledger-cycle-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.12);
}

.ledger-cycle-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.ledger-cycle-sub {
  font-size: 0.8rem;
  color: #64748B;
  margin: 2px 0 0;
}

.ledger-cycle-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ledger-cycle-nav {
  display: inline-flex;
  align-items: center;
  background: #F0FDF4;
  border: 1px solid #D1FAE5;
  border-radius: 10px;
  padding: 3px 4px;
  gap: 2px;
  flex-shrink: 0;
}

.ledger-cycle-btn {
  background: transparent;
  border: none;
  color: #065F46;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.ledger-cycle-btn:hover {
  background: #DCFCE7;
  color: #047857;
}

.ledger-cycle-display {
  font-weight: 700;
  font-size: 0.86rem;
  color: #0F2E1E;
  padding: 0 6px;
  min-width: 108px;
  text-align: center;
}

.ledger-add-bill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  font-size: 0.85rem;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .ledger-cycle-header-card {
    gap: 12px;
  }

  .ledger-cycle-right {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .ledger-cycle-right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ledger-cycle-nav {
    justify-content: space-between;
    width: 100%;
  }

  .ledger-add-bill-btn {
    width: 100%;
    justify-content: center;
  }
}

.ledger-stats-grid {
  margin-top: 0;
  margin-bottom: 22px;
}

.ledger-bills-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ledger-empty-card {
  background: #ffffff;
  border: 1.5px dashed #A7F3D0;
  border-radius: 20px;
  padding: 50px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.03);
}

.ledger-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.ledger-empty-icon svg {
  width: 32px;
  height: 32px;
}

.ledger-empty-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 6px;
}

.ledger-empty-sub {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0 0 20px;
}

.ledger-empty-btn {
  height: 40px;
  padding: 0 20px;
  border-radius: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ledger-bill-card {
  background: #ffffff;
  border: 1px solid #D1FAE5;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.04), 0 0 0 1px #D1FAE5;
  transition: all 0.2s ease;
}

.ledger-bill-card:hover {
  box-shadow: 0 6px 22px rgba(5, 150, 105, 0.09), 0 0 0 1px #A7F3D0;
}

.ledger-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
}

.ledger-card-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ledger-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
}

.ledger-card-icon-box svg {
  width: 22px;
  height: 22px;
}

.ledger-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.ledger-card-meta {
  font-size: 0.82rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ledger-meta-dot {
  color: #CBD5E1;
}

.ledger-meta-total {
  font-weight: 600;
  color: #047857;
}

.ledger-card-header-right {
  text-align: right;
}

.ledger-card-amount-big {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0F2E1E;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ledger-card-amount-sub {
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 3px;
  font-weight: 500;
}

.ledger-card-progress-section {
  margin: 14px 0 12px;
}

.ledger-progress-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.ledger-progress-label {
  color: #64748B;
}

.ledger-progress-status {
  color: #047857;
}

.ledger-progress-status.complete {
  color: #059669;
  font-weight: 700;
}

.ledger-progress-bar-track {
  height: 7px;
  background: #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
}

.ledger-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981, #059669);
  border-radius: 10px;
  transition: width 0.35s ease;
}

.ledger-progress-bar-fill.complete {
  background: linear-gradient(90deg, #059669, #047857);
}

.ledger-card-members-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 14px 0 16px;
  padding: 2px 0;
}

.ledger-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: #f8fafc;
  border: 1.2px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.16s ease;
  user-select: none;
}

.ledger-member-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
  background: #ffffff;
}

.ledger-member-chip.unpaid {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #1e293b;
}

.ledger-member-chip.unpaid:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.ledger-member-chip.paid {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.ledger-member-chip.paid:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
}

.ledger-chip-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  flex-shrink: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.18s ease, background-color 0.18s ease !important;
}

.ledger-member-chip:hover .ledger-chip-avatar {
  background: #bbf7d0 !important;
  color: #166534 !important;
  transform: scale(1.08);
}

.ledger-chip-name {
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.78rem;
  font-weight: 600;
  color: inherit;
}

.ledger-chip-badge {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1px;
}

.ledger-chip-badge.paid {
  background: #059669;
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
}

.ledger-member-chip-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  outline: none;
}

.ledger-member-chip-more:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  transform: translateY(-1px);
}

.ledger-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
  flex-wrap: wrap;
}

.ledger-card-footer-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #64748B;
  font-weight: 500;
}

.ledger-card-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-btn-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #ffffff;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ledger-btn-icon:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F2E1E;
}

.ledger-btn-icon.danger:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

.ledger-btn-collect {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Modals & Form Elements */
.ledger-modal-dialog {
  max-width: 520px;
  width: 100%;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16) !important;
  border: 1px solid #E2E8F0 !important;
}

#ledgerBillModal .modal-header,
.ledger-modal-dialog .modal-header {
  flex-shrink: 0 !important;
  padding: 18px 24px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  z-index: 10 !important;
}

#ledgerBillModal .modal-footer,
.ledger-modal-dialog .modal-footer {
  flex-shrink: 0 !important;
  padding: 14px 24px 18px !important;
  border-top: 1px solid #F1F5F9 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  z-index: 10 !important;
}

#ledgerBillModal .modal-body,
.ledger-modal-dialog .modal-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px 24px 20px !important;
  max-height: calc(88vh - 130px) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(16, 185, 129, 0.35) transparent !important;
}

/* Elegant inside scrollbar that stays strictly inside rounded modal */
#ledgerBillModal .modal-body::-webkit-scrollbar,
.ledger-modal-dialog .modal-body::-webkit-scrollbar {
  width: 5px !important;
}

#ledgerBillModal .modal-body::-webkit-scrollbar-track,
.ledger-modal-dialog .modal-body::-webkit-scrollbar-track {
  background: transparent !important;
  margin: 6px 0 !important;
}

#ledgerBillModal .modal-body::-webkit-scrollbar-thumb,
.ledger-modal-dialog .modal-body::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.35) !important;
  border-radius: 10px !important;
}

#ledgerBillModal .modal-body::-webkit-scrollbar-thumb:hover,
.ledger-modal-dialog .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.6) !important;
}

#ledgerBillModal input[type="number"]::-webkit-inner-spin-button,
#ledgerBillModal input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#ledgerBillModal input[type="number"] {
  -moz-appearance: textfield;
}

.ledger-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: flex-start;
}

.ledger-input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ledger-input-with-symbol .form-input {
  height: 46px !important;
  border-radius: var(--radius-lg, 14px) !important;
  border: 1.5px solid var(--gray-200, #E2E8F0) !important;
  box-sizing: border-box !important;
}

.ledger-date-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 10px;
  background: var(--bg-primary, #ffffff);
  border: 1.5px solid var(--gray-200, #E2E8F0);
  border-radius: var(--radius-lg, 14px);
  cursor: pointer;
  height: 46px;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.18s ease;
  user-select: none;
}

.ledger-date-picker-trigger:hover {
  border-color: #059669;
  background: #F0FDF4;
}

.ledger-date-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ledger-date-text-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ledger-date-display-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2E1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-date-chevron-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #F0FDF4;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.ledger-date-picker-trigger:hover .ledger-date-chevron-badge {
  background: #DCFCE7;
  color: #047857;
  transform: translateY(1px);
}

.ledger-calendar-popup {
  width: 260px;
  background: #F7FAF5;
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(5, 150, 105, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

.ledger-presets-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.ledger-preset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ledger-preset-btn svg {
  width: 14px;
  height: 14px;
  color: #64748B;
}

.ledger-preset-btn:hover {
  background: #ECFDF5;
  border-color: #A7F3D0;
  color: #065F46;
}

.ledger-preset-btn.active {
  background: #ECFDF5;
  border-color: #059669;
  color: #065F46;
  font-weight: 700;
}

.ledger-preset-btn.active svg {
  color: #059669;
}

.ledger-input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}

.ledger-symbol-affix {
  position: absolute;
  left: 12px;
  font-weight: 700;
  color: #059669;
  font-size: 1rem;
  pointer-events: none;
}

.ledger-input-with-symbol input {
  padding-left: 28px !important;
}

.ledger-split-toggle-container {
  display: flex;
  background: #F1F5F9;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.ledger-split-toggle-btn {
  flex: 1;
  padding: 9px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #64748B;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ledger-split-toggle-btn.active {
  background: #ffffff;
  color: #0F2E1E;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.ledger-custom-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.ledger-custom-helper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid #D1FAE5;
  background: #ECFDF5;
  color: #065F46;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ledger-custom-helper-btn:hover {
  background: #D1FAE5;
}

.ledger-checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Split Controls Row (70% Dropdown + 30% Select All) */
.ledger-split-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.ledger-split-controls-row .ledger-split-dropdown {
  flex: 7;
  width: 70%;
  position: relative;
  user-select: none;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-700, #047857);
  background-color: rgba(16, 185, 129, 0.08);
  border: 1.5px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  height: 44px;
  padding: 0 14px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-trigger:hover {
  background-color: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
}

.ledger-split-controls-row .ledger-split-dropdown.active .custom-dropdown-trigger {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-arrow {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  color: var(--text-secondary, #475569);
  opacity: 0.85;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-arrow::before {
  content: '▼';
  font-size: 8px;
}

.ledger-split-controls-row .ledger-split-dropdown.active .custom-dropdown-arrow {
  transform: rotate(180deg);
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  min-width: 220px;
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
  padding: 6px 0;
  z-index: 1100;
  max-height: 250px;
  overflow-y: auto;
  box-sizing: border-box;
  animation: ledgerDropdownSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ledgerDropdownSlideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-item {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-item:hover {
  background-color: #f8fafc;
  color: #059669;
  border-left-color: #10b981;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-item.selected {
  color: #059669;
  font-weight: 700;
  background-color: rgba(16, 185, 129, 0.08);
  border-left-color: #059669;
}

.ledger-split-controls-row .ledger-split-dropdown .custom-dropdown-item svg {
  stroke: #059669;
  flex-shrink: 0;
}

.ledger-select-all-box {
  flex: 3;
  width: 30%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #047857;
  cursor: pointer;
  user-select: none;
  transition: all 0.18s ease;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
}

.ledger-select-all-box:hover {
  background-color: #ecfdf5;
  border-color: #a7f3d0;
}

.ledger-member-meal-badge {
  font-size: 0.70rem;
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 1px;
  width: fit-content;
  border: 1px solid #d1fae5;
}

.ledger-select-all-label {
  font-size: 0.82rem;
  color: #047857;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

/* Custom Checkboxes */
.ledger-custom-checkbox-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.ledger-custom-checkbox-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.ledger-custom-checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.8px solid #CBD5E1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff;
  box-sizing: border-box;
}

.ledger-custom-checkbox-box.mini {
  width: 17px;
  height: 17px;
  border-radius: 5px;
}

.ledger-custom-checkbox-box svg {
  width: 13px;
  height: 13px;
  stroke: #ffffff;
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ledger-custom-checkbox-box.mini svg {
  width: 11px;
  height: 11px;
}

.ledger-custom-checkbox-wrap input[type="checkbox"]:checked+.ledger-custom-checkbox-box {
  background: #059669;
  border-color: #059669;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.ledger-custom-checkbox-wrap input[type="checkbox"]:checked+.ledger-custom-checkbox-box svg {
  transform: scale(1);
}

.ledger-custom-checkbox-wrap:hover .ledger-custom-checkbox-box {
  border-color: #059669;
}

.ledger-members-checklist {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #F8FAFC;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.35) transparent;
}

.ledger-members-checklist::-webkit-scrollbar {
  width: 5px;
}

.ledger-members-checklist::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.ledger-members-checklist::-webkit-scrollbar-thumb {
  background: rgba(16, 185, 129, 0.35);
  border-radius: 10px;
}

.ledger-members-checklist::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 185, 129, 0.6);
}

.ledger-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 11px;
  background: #ffffff;
  border: 1px solid #F1F5F9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.18s ease;
}

.ledger-checklist-item:hover {
  border-color: #A7F3D0;
  background: #F0FDF4;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.08);
}

.ledger-checklist-label {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
  user-select: none;
}

.ledger-checklist-item .member-tia-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  user-select: none !important;
  box-shadow: none !important;
  border: none !important;
}

.ledger-checklist-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ledger-checklist-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2E1E;
  letter-spacing: -0.01em;
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* Distinct Deselected / Excluded State */
.ledger-checklist-item.deselected {
  background: #F1F5F9;
  border-color: #E2E8F0;
  opacity: 0.52;
  box-shadow: none;
}

.ledger-checklist-item.deselected:hover {
  opacity: 0.85;
  background: #E2E8F0;
  border-color: #CBD5E1;
  transform: none;
  box-shadow: none;
}

.ledger-checklist-item.deselected .ledger-checklist-name {
  color: #64748B;
  text-decoration: line-through;
  text-decoration-color: #94A3B8;
}

.ledger-checklist-item.deselected .member-tia-avatar {
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  opacity: 0.85;
}

.ledger-checklist-item.deselected .ledger-member-custom-input-wrap {
  opacity: 0.35;
  pointer-events: none;
}

.ledger-custom-input-group {
  display: flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 2px 8px;
  width: 110px;
}

.ledger-currency-symbol {
  font-size: 0.82rem;
  font-weight: 700;
  color: #059669;
}

.ledger-custom-amt-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0F2E1E;
  text-align: right;
  outline: none;
  padding: 2px 0 2px 4px;
}

.ledger-calc-banner {
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border: 1px solid #A7F3D0;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

.ledger-calc-banner.custom-mode {
  justify-content: space-between;
}

.ledger-calc-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #ffffff;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.1);
  flex-shrink: 0;
}

.ledger-calc-text {
  display: flex;
  flex-direction: column;
}

.ledger-calc-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #047857;
  letter-spacing: 0.05em;
}

.ledger-calc-amount {
  font-size: 1.25rem;
  font-weight: 900;
  color: #064E3B;
  letter-spacing: -0.01em;
}

.ledger-calc-divider {
  width: 1px;
  height: 32px;
  background: #A7F3D0;
}

.ledger-warn-text {
  font-size: 0.8rem;
  color: #DC2626;
  font-weight: 600;
  margin-top: 6px;
}

.ledger-modal-sub {
  font-size: 0.8rem;
  color: #64748B;
  margin: 2px 0 0;
}

.ledger-details-section-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  margin-bottom: 10px;
}

.ledger-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.ledger-detail-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  background: #ffffff;
  transition: all 0.15s ease;
}

.ledger-detail-member-row.paid {
  background: #F0FDF4;
  border-color: #A7F3D0;
}

.ledger-detail-member-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ledger-detail-member-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2E1E;
}

.ledger-detail-member-sub {
  font-size: 0.76rem;
  color: #64748B;
}

.ledger-detail-member-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ledger-detail-member-amt {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0F2E1E;
}

.ledger-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #D1FAE5;
  color: #065F46;
  font-size: 0.76rem;
  font-weight: 700;
}

.ledger-btn-single-collect {
  height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
}

/* Bill ID Tag & Badge */
.ledger-bill-id-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.ledger-bill-id-tag:hover {
  background: #E2E8F0;
  color: #0F2E1E;
  border-color: #CBD5E1;
}

.ledger-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Bill Summary Slip Modal & Paper */
.ledger-slip-modal-dialog {
  max-width: 580px;
  width: 100%;
}

.ledger-slip-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #E2E8F0;
}

.ledger-slip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-slip-modal-body {
  padding: 16px;
  background: #F8FAFC;
  display: flex;
  justify-content: center;
  max-height: 75vh;
  overflow-y: auto;
}

.ledger-slip-paper {
  background: #ffffff;
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  font-family: inherit;
  color: #1E293B;
  box-sizing: border-box;
}

.slip-header-brand {
  margin-bottom: 16px;
}

.slip-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.slip-dining-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.02em;
}

.slip-doc-type {
  font-size: 0.75rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.slip-id-tag-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 4px 10px;
  text-align: right;
}

.slip-id-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.06em;
}

.slip-id-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F2E1E;
}

.slip-header-line {
  height: 2px;
  background: linear-gradient(90deg, #059669, #10B981, transparent);
  border-radius: 2px;
}

.slip-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  background: #F8FAFC;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #F1F5F9;
}

.slip-meta-col {
  display: flex;
  flex-direction: column;
}

.slip-meta-label {
  font-size: 0.72rem;
  color: #64748B;
  font-weight: 600;
}

.slip-meta-val {
  font-size: 0.86rem;
  color: #0F2E1E;
  font-weight: 700;
}

.slip-stats-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.slip-stat-pill {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.slip-stat-label {
  display: block;
  font-size: 0.68rem;
  color: #64748B;
  font-weight: 700;
  margin-bottom: 2px;
}

.slip-stat-num {
  font-size: 0.96rem;
  font-weight: 800;
}

.slip-stat-num.total {
  color: #0F2E1E;
}

.slip-stat-num.collected {
  color: #059669;
}

.slip-stat-num.pending {
  color: #D97706;
}

.slip-table-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.slip-members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 18px;
}

.slip-members-table th {
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1.5px solid #CBD5E1;
}

.slip-members-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #F1F5F9;
  color: #1E293B;
}

.slip-members-table tbody tr:last-child td {
  border-bottom: none;
}

.slip-col-num {
  color: #94A3B8;
  font-weight: 600;
  text-align: center;
}

.slip-col-name {
  font-weight: 700;
}

.slip-col-amount {
  font-weight: 800;
  color: #0F2E1E;
  text-align: right;
}

.slip-col-status {
  text-align: center;
}

.slip-status-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.slip-status-pill.paid {
  background: #DCFCE7;
  color: #15803d;
}

.slip-status-pill.pending {
  background: #FEF3C7;
  color: #B45309;
}

.slip-footer-section {
  margin-top: 14px;
}

.slip-footer-divider {
  border-top: 1px dashed #CBD5E1;
  margin-bottom: 10px;
}

.slip-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
}

.slip-footer-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.05em;
}

/* ============================================================ */
/* USER BILLS & LEDGER SECTION (Member Portal)                  */
/* ============================================================ */

.user-bills-header-row {
  margin-bottom: 14px;
}

.user-bills-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F2E1E;
  letter-spacing: -0.02em;
  margin: 0;
}

.user-bills-subtitle {
  font-size: 0.84rem;
  color: #64748B;
  font-weight: 500;
  margin-top: 2px;
}

/* Segmented Tab Switcher */
.user-bills-tabs-wrap {
  margin-bottom: 18px;
}

.user-bills-tabs {
  position: relative;
  display: flex;
  background: #E2E8F0;
  padding: 4px;
  border-radius: 14px;
  gap: 0;
  user-select: none;
  box-sizing: border-box;
}

.user-bills-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  pointer-events: none;
  z-index: 1;
}

.user-bills-tabs[data-active="overview"] .user-bills-tab-indicator {
  transform: translateX(0%);
}

.user-bills-tabs[data-active="bills"] .user-bills-tab-indicator {
  transform: translateX(100%);
}

.user-bills-tabs[data-active="history"] .user-bills-tab-indicator {
  transform: translateX(200%);
}

.user-bills-tab-btn {
  flex: 1;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748B;
  background: transparent !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.24s cubic-bezier(0.16, 1, 0.3, 1), font-weight 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  position: relative;
  z-index: 2;
  user-select: none;
  outline: none;
  box-shadow: none !important;
}

.user-bills-tab-btn:hover:not(.active) {
  color: #0F2E1E;
}

.user-bills-tab-btn.active {
  color: #0F2E1E;
  font-weight: 800;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Tab Content Slide Transitions */
.user-bills-section-content {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-fill-mode: both;
}

.user-bills-section-content.slide-from-right {
  animation-name: userBillsSlideFromRight;
}

.user-bills-section-content.slide-from-left {
  animation-name: userBillsSlideFromLeft;
}

@keyframes userBillsSlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(28px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes userBillsSlideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-28px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* User Bills / Member Ledger Page Container (Shifted left, transparent background) */
body.user-bills-active .content-area,
.content-area:has(#page-user-bills.active) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#page-user-bills {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 !important;
  padding: 4px 16px 48px 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

@media (min-width: 992px) {
  #page-user-bills {
    max-width: 880px !important;
    padding: 8px 20px 56px 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 1200px) {
  #page-user-bills {
    max-width: 940px !important;
    padding: 8px 24px 56px 0 !important;
    margin: 0 !important;
  }
}

/* Mobile specific overrides (Keep 100% exact mobile layout intact) */
@media (max-width: 767px) {

  /* Hide Top Header on User Bills ONLY on Mobile so body content starts from top */
  body.user-bills-active .top-header,
  body:has(#page-user-bills.active) .top-header {
    display: none !important;
  }

  body.user-bills-active .content-area,
  body:has(#page-user-bills.active) .content-area {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(6px, env(safe-area-inset-top, 6px)) 0 calc(var(--bottom-nav-height) + var(--space-3) + env(safe-area-inset-bottom, 0px)) 0 !important;
  }

  #page-user-bills {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 18px 24px 18px !important;
    box-sizing: border-box !important;
  }

  .user-bills-header-row {
    margin-bottom: 10px !important;
  }

  .user-bills-tabs-wrap {
    margin-bottom: 14px !important;
  }
}

/* ============================================================ */
/* USER BALANCE OVERVIEW CARD (Messliner Emerald Theme)         */
/* ============================================================ */

.user-bills-balance-card {
  background: linear-gradient(160deg, #06281b 0%, #0d3b26 50%, #051a12 100%);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 24px;
  padding: 22px 20px 20px;
  color: #ffffff;
  box-shadow: 0 16px 36px -8px rgba(4, 32, 22, 0.4), 0 0 0 1px rgba(16, 185, 129, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  box-sizing: border-box;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.user-bills-balance-card::before {
  content: '';
  position: absolute;
  top: -35px;
  right: -30px;
  width: 170px;
  height: 170px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, rgba(5, 150, 105, 0.08) 55%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.user-bills-balance-card::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -20px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.user-balance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.user-balance-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a7f3d0;
}

.user-balance-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.user-balance-badge.credit {
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #d1fae5;
}

.user-balance-badge.due {
  background: rgba(239, 68, 68, 0.22);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fecaca;
}

.user-balance-main {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.user-balance-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #a7f3d0;
  line-height: 1;
}

.user-balance-currency .tk-symbol {
  width: 1.32rem;
  height: 1.42rem;
  margin-right: 0px;
  vertical-align: -0.05em;
  transform: scaleX(0.92);
}

.user-balance-num {
  font-size: 2.7rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}

.user-balance-main.is-due .user-balance-currency,
.user-balance-main.is-due .user-balance-num {
  color: #fca5a5;
}

.user-stat-val .tk-symbol {
  width: 0.85em;
  height: 0.88em;
  margin-right: 1.5px;
  vertical-align: -0.08em;
}

.user-balance-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.user-balance-stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

.user-balance-shelf-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.user-balance-stat-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0 6px;
}

.user-balance-stat-col:first-child {
  padding-left: 0;
}

.user-balance-stat-col:last-child {
  padding-right: 0;
}

.user-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.user-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-stat-val.has-due {
  color: #fca5a5;
}

.user-stat-val.has-paid {
  color: #6ee7b7;
}

.user-stat-val.has-pending {
  color: #fcd34d;
}

/* Add Money Button (Cohesive Luxury Dark Forest Emerald Theme) */
.user-add-money-btn,
button.user-add-money-btn,
.btn.user-add-money-btn {
  width: 100%;
  height: 52px;
  border-radius: 18px;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(145deg, #06281b 0%, #0d3b26 100%) !important;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(52, 211, 153, 0.3) !important;
  box-shadow: 0 10px 24px -4px rgba(4, 32, 22, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.12) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.user-add-money-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.45), transparent);
  pointer-events: none;
}

.user-add-money-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(52, 211, 153, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
  flex-shrink: 0;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
}

.user-add-money-icon-badge svg {
  width: 16px;
  height: 16px;
}

.user-add-money-btn:hover,
button.user-add-money-btn:hover,
.btn.user-add-money-btn:hover {
  background: linear-gradient(145deg, #093826 0%, #062418 100%) !important;
  border-color: rgba(52, 211, 153, 0.55) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -4px rgba(4, 32, 22, 0.45), 0 0 18px rgba(16, 185, 129, 0.2) !important;
  color: #ffffff !important;
}

.user-add-money-btn:hover .user-add-money-icon-badge {
  transform: rotate(90deg) scale(1.08);
  background: rgba(16, 185, 129, 0.35);
  border-color: rgba(52, 211, 153, 0.6);
  color: #a7f3d0;
}

.user-add-money-btn:active,
button.user-add-money-btn:active,
.btn.user-add-money-btn:active {
  transform: scale(0.985);
  box-shadow: 0 6px 16px -2px rgba(4, 32, 22, 0.3) !important;
}

.user-bills-pending-banner {
  margin-top: 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.05);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.user-bills-pending-banner.hidden,
.user-bills-pending-banner[style*="display: none"],
.user-bills-pending-banner[style*="display:none"],
.user-bills-pending-banner:empty {
  display: none !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.user-bills-pending-banner:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px -4px rgba(15, 23, 42, 0.08);
}

.user-bills-pending-banner:active {
  transform: scale(0.985);
}

.user-bills-pending-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.user-bills-pending-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.user-bills-pending-banner:hover .user-bills-pending-icon-badge {
  background: #E2E8F0;
  color: #1E293B;
  border-color: #CBD5E1;
}

.user-bills-pending-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-bills-pending-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.2;
}

.user-bills-pending-count-pill {
  font-size: 0.65rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
  border-radius: 9999px;
  padding: 1px 6px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.user-bills-pending-sub {
  font-size: 0.70rem;
  color: #64748B;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-bills-pending-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 10px;
}

.user-bills-pending-amount {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.user-bills-pending-arrow {
  color: #94A3B8;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.user-bills-pending-banner:hover .user-bills-pending-arrow {
  transform: translateX(2.5px);
  color: #334155;
}

/* ============================================================ */
/* USER BILLS TAB SECTION & CYCLE CONTROLLER                    */
/* ============================================================ */

.user-bills-tab-header {
  margin-bottom: 2px;
}

.user-bills-sec-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
  letter-spacing: -0.01em;
}

.user-bills-sec-sub {
  display: none !important;
}

.user-bills-cycle-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 14px;
  padding: 2px 0;
}

.user-bills-cycle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.user-bills-cycle-btn:hover:not(.disabled):not(:disabled) {
  color: #0F2E1E;
  background: #F1F5F9;
}

.user-bills-cycle-btn.disabled,
.user-bills-cycle-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.user-bills-cycle-dropdown-container {
  position: relative;
  display: inline-block;
}

.user-bills-cycle-display-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  color: #0F2E1E;
  transition: all 0.18s ease;
}

.user-bills-cycle-display-btn:hover {
  background: #F1F5F9;
}

.user-bills-cycle-chevron {
  color: #64748B;
  transition: transform 0.2s ease;
}

.user-bills-cycle-dropdown-container.open .user-bills-cycle-chevron {
  transform: rotate(180deg);
}

.user-bills-cycle-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 6px;
  min-width: 175px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
}

.user-bills-cycle-dropdown-container.open .user-bills-cycle-menu {
  display: block;
  animation: fadeInDown 0.18s ease forwards;
}

.user-bills-cycle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.user-bills-cycle-item:hover {
  background: #F8FAFC;
  color: #0F2E1E;
}

.user-bills-cycle-item.active {
  background: #ECFDF5;
  color: #047857;
  font-weight: 700;
}

.user-bills-cycle-item .cycle-check {
  font-weight: 800;
  color: #059669;
  margin-left: 8px;
}

/* ============================================================ */
/* USER BILLS CLEAN CARDS (Matching Screenshot 2)              */
/* ============================================================ */

.user-bills-list-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-bill-clean-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.user-bill-clean-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.user-bill-clean-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.user-bill-clean-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-bill-clean-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #0F2E1E;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-bill-clean-icon svg {
  width: 22px;
  height: 22px;
}

.user-bill-clean-info {
  display: flex;
  flex-direction: column;
}

.user-bill-clean-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 2px 0;
  letter-spacing: -0.01em;
}

.user-bill-clean-sub {
  font-size: 0.78rem;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 5px;
}

.user-bill-clean-dot {
  font-weight: bold;
  color: #94A3B8;
}

.user-bill-clean-right {
  text-align: right;
  flex-shrink: 0;
}

.user-bill-clean-amount {
  font-size: 1.25rem;
  font-weight: 900;
  color: #0F2E1E;
  line-height: 1.1;
}

.user-bill-clean-share-label {
  font-size: 0.75rem;
  color: #64748B;
  margin-top: 2px;
}

.user-bill-clean-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.user-bill-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.user-bill-status-pill.unpaid {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.user-bill-status-pill.pending {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.user-bill-status-pill.pending svg {
  color: #D97706;
}

.user-bill-status-pill.paid {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.user-bill-status-pill.paid svg {
  color: #059669;
}

.user-bill-action-btn {
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.user-bill-action-btn.pay-now {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.user-bill-action-btn.pay-now:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.32);
}

.user-bill-action-btn.pending {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  color: #64748B;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.user-bill-action-btn.pending:hover {
  background: transparent !important;
  color: #0F172A;
}

.user-bill-action-btn.pending svg {
  color: #94A3B8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.user-bill-action-btn.pending:hover svg {
  color: #0F172A;
  transform: translateX(2px);
}

.user-bill-action-btn.paid {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #E2E8F0 !important;
  padding: 6px 14px !important;
  border-radius: 9px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.user-bill-action-btn.paid svg {
  color: #059669;
}

.user-bills-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: #ffffff;
  border: 1px dashed #E2E8F0;
  border-radius: 18px;
}

.user-bills-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(21, 128, 61, 0.08);
  color: #15803D;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.user-bills-empty-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0 0 4px;
}

.user-bills-empty-sub {
  font-size: 0.84rem;
  color: #64748B;
  margin: 0;
}

/* ============================================================ */
/* PAY BILL MODAL (Matching Screenshot 3)                       */
/* ============================================================ */

.pay-bill-modal-dialog {
  max-width: 430px !important;
  width: min(92vw, 430px) !important;
  max-height: min(88vh, 660px) !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 0 !important;
}

.pay-bill-modal-dialog .modal-header {
  padding: 10px 20px 8px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

.pay-bill-modal-dialog .modal-title {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #0F2E1E !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.pay-bill-modal-dialog .btn-close {
  font-size: 1.15rem !important;
  color: #64748B !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  transition: all 0.15s ease !important;
}

.pay-bill-modal-dialog .btn-close:hover {
  color: #0F2E1E !important;
  background: #F1F5F9 !important;
}

.pay-bill-modal-dialog .modal-body {
  padding: 0 20px 20px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  flex: 1 1 auto !important;
  scrollbar-width: thin !important;
}

.modal-drag-indicator {
  width: 36px;
  height: 4px;
  background: #CBD5E1;
  border-radius: 4px;
  margin: 10px auto 2px;
}

/* Compact Horizontal Bill Summary Card */
.pay-bill-summary-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pay-bill-summary-left {
  display: flex;
  flex-direction: column;
}

.pay-bill-for-label {
  font-size: 0.72rem;
  color: #64748B;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.pay-bill-for-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
  letter-spacing: -0.01em;
}

.pay-bill-summary-right {
  text-align: right;
  flex-shrink: 0;
}

.pay-bill-for-amount {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0F2E1E;
  line-height: 1;
}

.pay-bill-method-section {
  margin-bottom: 14px;
}

.pay-bill-method-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}

.pay-bill-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pay-bill-method-pill {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #475569;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pay-bill-method-pill.active {
  background: #ffffff;
  color: #0F2E1E;
  border-color: #0F2E1E;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-weight: 800;
}

.pay-bill-cash-box {
  background: #F0FDF4;
  border: 1px solid #DCFCE7;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pay-bill-cash-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #DCFCE7;
  color: #15803D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pay-bill-cash-icon svg {
  stroke: #15803D;
}

.pay-bill-cash-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F2E1E;
  margin-bottom: 2px;
}

.pay-bill-cash-sub {
  font-size: 0.76rem;
  color: #64748B;
  line-height: 1.35;
}

.pay-bill-modal-footer {
  padding-top: 6px !important;
  margin: 0 !important;
}

.pay-bill-submit-btn {
  width: 100% !important;
  background: #059669 !important;
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.pay-bill-submit-btn:hover {
  background: #047857 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.32) !important;
}

/* ============================================================ */
/* USER PAYMENT HISTORY CARDS                                   */
/* ============================================================ */

.user-history-header-box {
  margin-bottom: 6px;
}

.user-history-heading {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
}

.user-history-subheading {
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 2px;
  margin-bottom: 0;
}

.user-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-history-list .user-bills-cycle-nav {
  margin: 2px 0 6px 0;
  padding: 0;
}

.user-history-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 62px;
  max-height: 62px;
  height: 62px;
  box-sizing: border-box;
}

.user-history-card:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.06);
}

.user-history-card:active {
  transform: scale(0.99);
}

.user-history-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.user-history-left {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.user-history-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.user-history-icon-badge.bkash {
  background: #FDF2F8;
  color: #DB2777;
}

.user-history-icon-badge.nagad {
  background: #FFF7ED;
  color: #EA580C;
}

.user-history-icon-badge.rocket {
  background: #EDE9FE;
  color: #7C3AED;
}

.user-history-icon-badge.cash {
  background: #ECFDF5;
  color: #059669;
}

.user-history-icon-badge.deposit {
  background: #ECFDF5;
  color: #059669;
}

.user-history-icon-badge.deduction {
  background: #FEF2F2;
  color: #DC2626;
}

.user-history-info {
  min-width: 0 !important;
  flex: 1 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.user-history-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F2E1E;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25;
}

.user-history-time {
  font-size: 0.72rem;
  color: #94A3B8;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2;
}

.user-history-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  gap: 2px;
  text-align: right;
}

.user-history-amount {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap !important;
}

.user-history-amount.positive {
  color: #059669;
}

.user-history-amount.negative {
  color: #DC2626;
}

.user-history-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2.5px 8px !important;
  border-radius: 9999px !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
}

.user-history-status-pill svg {
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.user-history-status-pill.pending {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #CBD5E1 !important;
}

.user-history-status-pill.pending svg {
  color: #64748B !important;
}

.user-history-status-pill.approved {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.user-history-status-pill.approved svg {
  color: #059669 !important;
}

.user-history-status-pill.rejected {
  background: #FEF2F2 !important;
  color: #B91C1C !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.user-history-status-pill.rejected svg {
  color: #DC2626 !important;
}

.user-history-status-pill.collected {
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
}

.user-history-status-pill.ledger-cleared {
  background: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
  font-weight: 700 !important;
}

.user-history-status-pill.ledger-cleared svg {
  color: #059669 !important;
}

/* Detail Popup Hero Card Pill Tuning */
.uhd-hero-card .user-history-status-pill {
  padding: 4px 12px !important;
  font-size: 0.74rem !important;
  gap: 5.5px !important;
  margin-top: 4px !important;
}

.uhd-hero-card .user-history-status-pill svg {
  width: 12px !important;
  height: 12px !important;
}

/* Distinct Ledger Bill Payment Card Style - Minimal & Clean */
.user-history-card.ledger-bill-payment {
  background: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 3px solid #10B981 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.user-history-card.ledger-bill-payment:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  border-left-color: #059669 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.06) !important;
}

.user-history-card.ledger-bill-payment.pending {
  border-left-color: #F59E0B !important;
}

.user-history-card.ledger-bill-payment.rejected {
  border-left-color: #EF4444 !important;
}

.user-history-icon-badge.ledger-bill {
  width: 38px;
  height: 38px;
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5px !important;
  padding: 3px 2px !important;
  border-radius: 10px;
}

.user-history-icon-badge.ledger-bill svg {
  display: block;
  width: 14px;
  height: 14px;
}

.user-history-badge-subtext {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em;
  color: #047857 !important;
  text-transform: uppercase;
}

.ledger-pill-tag {
  display: inline-flex;
  align-items: center;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.60rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 5px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  vertical-align: middle;
}

/* User History Detail Modal Styles */
.uhd-hero-card {
  background: linear-gradient(145deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px 10px;
  text-align: center;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.uhd-hero-amount {
  font-size: 1.85rem;
  font-weight: 800;
  font-family: Outfit, Inter, sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.uhd-hero-amount.positive {
  color: #059669;
}

.uhd-hero-amount.negative {
  color: #DC2626;
}

.uhd-details-list {
  display: flex;
  flex-direction: column;
}

.uhd-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.86rem;
  gap: 12px;
}

.uhd-detail-row:last-child {
  border-bottom: none;
}

.uhd-label {
  color: #64748B;
  font-weight: 500;
  flex-shrink: 0;
}

.uhd-val {
  color: #0F2E1E;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.uhd-detail-row.note-row {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  padding: 12px 0 4px 0 !important;
  border-bottom: none !important;
}

.uhd-detail-row.note-row .uhd-label {
  font-size: 0.78rem !important;
  color: #64748B !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

.uhd-detail-row.note-row .uhd-val.note-val {
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 0.86rem !important;
  color: #1E293B !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.uhd-trx-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F1F5F9;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

.uhd-trx-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F2E1E;
}

.uhd-copy-btn {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #059669;
  padding: 1px 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uhd-copy-btn:hover {
  background: #ECFDF5;
  border-color: #10B981;
}

/* ============================================================ */
/* ADD MONEY MODAL STYLES                                       */
/* ============================================================ */

.add-money-modal-dialog {
  max-width: 460px !important;
  width: 100% !important;
  max-height: min(92vh, 720px) !important;
  border-radius: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3) !important;
  overflow: hidden !important;
  margin: auto !important;
  border: 1px solid rgba(241, 245, 249, 0.8) !important;
}

.add-money-modal-dialog .modal-header {
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.add-money-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.add-money-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.add-money-title-group .modal-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0F2E1E !important;
}

.pay-bill-title-group {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 10px !important;
}

.pay-bill-title-group .modal-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0F2E1E !important;
  white-space: nowrap !important;
}

.pay-bill-title-group .add-money-step-badge {
  margin-top: 0 !important;
}

.add-money-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Step 2 (Payment Details) Active States */
#addMoneyModal.step-2-active #addMoneyCloseBtn,
#addMoneyModal.step-2-active .add-money-close-btn,
#payBillModal.step-2-active #payBillCloseBtn,
#payBillModal.step-2-active .add-money-close-btn {
  display: none !important;
}

#addMoneyModal.step-2-active #addMoneyStepBadgeStep2,
#payBillModal.step-2-active #payBillStepBadgeStep2 {
  display: inline-flex !important;
}

#addMoneyModal.step-2-active #addMoneyStepBadgeStep1,
#payBillModal.step-2-active #payBillStepBadgeStep1 {
  display: none !important;
}

#addMoneyModal.step-2-active #addMoneyBackBtn,
#payBillModal.step-2-active #payBillBackBtn {
  display: inline-flex !important;
}

/* Step 1 Active States */
#addMoneyModal.step-1-active #addMoneyCloseBtn,
#addMoneyModal.step-1-active .add-money-close-btn,
#payBillModal.step-1-active #payBillCloseBtn,
#payBillModal.step-1-active .add-money-close-btn {
  display: flex !important;
}

#addMoneyModal.step-1-active #addMoneyStepBadgeStep2,
#payBillModal.step-1-active #payBillStepBadgeStep2 {
  display: none !important;
}

#addMoneyModal.step-1-active #addMoneyStepBadgeStep1,
#payBillModal.step-1-active #payBillStepBadgeStep1 {
  display: inline-flex !important;
}

#addMoneyModal.step-1-active #addMoneyBackBtn,
#payBillModal.step-1-active #payBillBackBtn {
  display: none !important;
}

.add-money-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  padding: 0;
}

.add-money-back-btn:hover {
  background: #E2E8F0;
  color: #0F2E1E;
  transform: translateX(-2px);
}

.add-money-step-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2.5px 8.5px;
  border-radius: 12px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.add-money-step-badge.step-1 {
  margin-top: 3px;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.add-money-step-badge.step-2 {
  margin-top: 0;
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

.add-money-step-view {
  animation: addMoneyStepFade 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes addMoneyStepFade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.add-money-continue-btn {
  width: 100%;
  height: 48px;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: 14px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.add-money-continue-btn:hover {
  background: linear-gradient(135deg, #047857 0%, #065F46 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35);
}

.add-money-continue-btn:disabled,
.add-money-continue-btn[disabled] {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.45 !important;
}

.add-money-continue-btn:disabled svg,
.add-money-continue-btn[disabled] svg {
  color: #ffffff !important;
}

.add-money-breakdown-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.amb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #64748B;
  margin-bottom: 6px;
}

.amb-row:last-child {
  margin-bottom: 0;
}

.amb-val {
  font-weight: 700;
  color: #1E293B;
  font-size: 0.95rem;
}

.amb-fee-val {
  font-weight: 700;
  color: #EA580C;
  font-size: 0.88rem;
}

.amb-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 10px 0;
}

.amb-row.total-row .amb-label {
  font-weight: 700;
  color: #0F172A;
  font-size: 0.94rem;
}

.amb-total-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: #065F46;
  letter-spacing: -0.01em;
}

.amb-method-tag.cash {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}

.add-money-cash-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.ami-cash-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #DCFCE7;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ami-cash-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F2E1E;
  margin-bottom: 4px;
}

.ami-cash-desc {
  font-size: 0.8rem;
  color: #166534;
  line-height: 1.45;
  margin: 0;
}

.ami-card-sublabel {
  font-size: 0.72rem;
  color: #64748B;
  margin-top: 1px;
}

.ami-card-icon.bkash {
  background: #FFF0F6;
  color: #E2136E;
}

.ami-card-icon.nagad {
  background: #FFF7ED;
  color: #F7941D;
}

.ami-card-type-badge.bkash {
  background: #FFF0F6;
  color: #E2136E;
  border-color: #FBCFE8;
}

.ami-card-type-badge.nagad {
  background: #FFF7ED;
  color: #D97706;
  border-color: #FED7AA;
}

.ami-copy-btn.bkash {
  background: #E2136E;
}

.ami-copy-btn.bkash:hover {
  background: #D10056;
}

.ami-copy-btn.nagad {
  background: #F7941D;
}

.ami-copy-btn.nagad:hover {
  background: #EA580C;
}

.add-money-modal-dialog .modal-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
}

.add-money-modal-dialog .modal-body {
  padding: 16px 20px 20px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  scrollbar-width: thin !important;
}

.add-money-alert-box {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #166534;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-bottom: 14px;
}

.add-money-alert-box svg {
  color: #16A34A;
  flex-shrink: 0;
}

.add-money-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: text !important;
}

.add-money-currency-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 18px;
  background-color: #475569;
  -webkit-mask: url('../assets/taka-symbol.png') no-repeat center / contain;
  mask: url('../assets/taka-symbol.png') no-repeat center / contain;
  pointer-events: none;
  display: inline-block;
  flex-shrink: 0;
  z-index: 2;
}

.add-money-amount-field {
  padding-left: 38px !important;
  padding-right: 14px !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  height: 50px !important;
  border-radius: 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
  cursor: text !important;
  caret-color: #059669 !important;
  transition: all 0.2s ease !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.add-money-trx-input,
.add-money-note-input {
  cursor: text !important;
  caret-color: #059669 !important;
}

/* Remove number stepper up/down spinners */
.add-money-amount-field::-webkit-outer-spin-button,
.add-money-amount-field::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Soft muted placeholder so it doesn't look like pre-filled value */
.add-money-amount-field::placeholder {
  color: #94A3B8 !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  opacity: 0.65 !important;
}

.add-money-amount-field:focus,
.add-money-amount-field:active {
  border-color: #059669 !important;
  box-shadow: none !important;
  outline: none !important;
}

.add-money-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.add-money-method-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.add-money-method-pill:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.add-money-method-pill.active,
.pay-bill-method-pill.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.32) !important;
}

/* Brand Theme Colors ONLY when Selected (Active) */
.add-money-method-pill.bkash.active,
.pay-bill-method-pill.bkash.active {
  background: linear-gradient(135deg, #E2136E 0%, #C70D5E 100%) !important;
  border-color: #E2136E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(226, 19, 110, 0.35) !important;
}

.add-money-method-pill.nagad.active,
.pay-bill-method-pill.nagad.active {
  background: linear-gradient(135deg, #F7941D 0%, #EA5421 100%) !important;
  border-color: #EA5421 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(234, 84, 33, 0.35) !important;
}

.add-money-method-pill.rocket.active,
.pay-bill-method-pill.rocket.active {
  background: linear-gradient(135deg, #A855F7 0%, #8C3494 100%) !important;
  border-color: #8C3494 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(140, 52, 148, 0.35) !important;
}

.add-money-method-pill.cash.active,
.pay-bill-method-pill.cash.active {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  border-color: #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.add-money-submit-btn {
  height: 46px;
  font-size: 0.94rem;
  font-weight: 800;
  border-radius: 12px;
  background: #059669;
  border-color: #059669;
  transition: all 0.2s ease;
}

.add-money-submit-btn.bkash-btn {
  background: linear-gradient(135deg, #E2136E 0%, #D10056 100%) !important;
  border-color: #E2136E !important;
  box-shadow: 0 4px 14px rgba(226, 19, 110, 0.25) !important;
}

.add-money-submit-btn.nagad-btn {
  background: linear-gradient(135deg, #F7941D 0%, #EA580C 100%) !important;
  border-color: #F7941D !important;
  box-shadow: 0 4px 14px rgba(247, 148, 29, 0.25) !important;
}

.add-money-submit-btn.rocket-btn {
  background: linear-gradient(135deg, #8C3494 0%, #6B21A8 100%) !important;
  border-color: #8C3494 !important;
  box-shadow: 0 4px 14px rgba(140, 52, 148, 0.25) !important;
}

/* ─── bKash Signature Theme Card ─── */
.bkash-premium-card {
  background: linear-gradient(145deg, #FFF0F6 0%, #FFE4EE 100%);
  border: 1.5px solid #FBCFE8;
  border-radius: 16px;
  padding: 13px 15px;
  margin-top: 12px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(226, 19, 110, 0.08);
  position: relative;
  overflow: hidden;
}

.bkash-premium-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(226, 19, 110, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.bkash-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(226, 19, 110, 0.22);
}

.bkash-brand-badge {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bkash-brand-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #E2136E;
  line-height: 1.15;
}

.bkash-brand-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9D174D;
}

.bkash-fee-badge {
  background: #E2136E;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
}

.bkash-free-badge {
  background: #FDF2F8;
  color: #BE185D;
  border: 1px solid #FBCFE8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

.bkash-account-box {
  background: #ffffff;
  border: 1.5px solid #F472B6;
  border-radius: 12px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bkash-account-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.bkash-account-num {
  font-size: 1.14rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.bkash-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E2136E;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.bkash-copy-btn:hover {
  background: #D10056;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(226, 19, 110, 0.3);
}

.bkash-copy-btn.copied {
  background: #059669 !important;
}

.bkash-guide-steps {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bkash-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #831843;
  line-height: 1.35;
}

.bkash-step-num {
  background: #E2136E;
  color: #ffffff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Nagad Signature Theme Card ─── */
.nagad-premium-card {
  background: linear-gradient(145deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1.5px solid #FED7AA;
  border-radius: 16px;
  padding: 13px 15px;
  margin-top: 12px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(247, 148, 29, 0.08);
}

.nagad-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(247, 148, 29, 0.25);
}

.nagad-brand-badge {
  display: flex;
  align-items: center;
  gap: 9px;
}

.nagad-brand-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #D97706;
  line-height: 1.15;
}

.nagad-brand-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #9A3412;
}

.nagad-fee-badge {
  background: #F7941D;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
}

.nagad-account-box {
  background: #ffffff;
  border: 1.5px solid #FB923C;
  border-radius: 12px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nagad-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F7941D;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.nagad-copy-btn:hover {
  background: #EA580C;
}

.nagad-copy-btn.copied {
  background: #059669 !important;
}

/* ─── Rocket Signature Theme Card ─── */
.rocket-premium-card {
  background: linear-gradient(145deg, #FAF5FF 0%, #F3E8FF 100%);
  border: 1.5px solid #E9D5FF;
  border-radius: 16px;
  padding: 13px 15px;
  margin-top: 12px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(140, 52, 148, 0.08);
}

.rocket-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(140, 52, 148, 0.25);
}

.rocket-brand-badge {
  display: flex;
  align-items: center;
  gap: 9px;
}

.rocket-brand-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #8C3494;
  line-height: 1.15;
}

.rocket-brand-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #6B21A8;
}

.rocket-fee-badge {
  background: #8C3494;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
}

.rocket-account-box {
  background: #ffffff;
  border: 1.5px solid #C084FC;
  border-radius: 12px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rocket-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #8C3494;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.rocket-copy-btn.copied {
  background: #059669 !important;
}

/* ─── Generic / Bank Digital Theme Card ─── */
.generic-premium-card {
  background: linear-gradient(145deg, #F8FAFC 0%, #F1F5F9 100%);
  border: 1.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 13px 15px;
  margin-top: 12px;
  margin-bottom: 14px;
}

.generic-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(100, 116, 139, 0.25);
}

.generic-brand-badge {
  display: flex;
  align-items: center;
  gap: 9px;
}

.generic-brand-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.15;
}

.generic-brand-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
}

.generic-account-box {
  background: #ffffff;
  border: 1.5px solid #94A3B8;
  border-radius: 12px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.generic-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #334155;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
}

.generic-copy-btn.copied {
  background: #059669 !important;
}

/* ============================================================ */
/* ADMIN LEDGER ACTIONS & PAYMENT REQUESTS                      */
/* ============================================================ */

.ledger-header-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ledger-top-action-btn {
  height: 38px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  position: relative;
}

.ledger-badge-counter {
  background: #EF4444;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.2;
}

.ledger-requests-modal-dialog {
  max-width: 540px;
  width: 100%;
}

.ledger-requests-list-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 65vh;
  overflow-y: auto;
}

.ledger-requests-sec-header {
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ledger-req-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.ledger-req-card.pending {
  border-left: 4px solid #F59E0B;
}

.ledger-req-card.bill-req-card {
  border-left: 4px solid #6366F1 !important;
}

.ledger-req-card.deposit-req-card {
  border-left: 4px solid #F59E0B !important;
}

.ledger-req-card.processed {
  background: #F8FAFC;
  opacity: 0.85;
}

.ledger-req-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ledger-req-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ledger-req-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F2E1E;
}

.ledger-req-method-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 6px;
  background: #E2E8F0;
  color: #334155;
}

.ledger-req-method-badge.bkash {
  background: #FDF2F8;
  color: #BE185D;
}

.ledger-req-method-badge.nagad {
  background: #FFF7ED;
  color: #C2410C;
}

.ledger-req-method-badge.cash {
  background: #ECFDF5;
  color: #047857;
}

.ledger-req-amount {
  font-size: 1rem;
  font-weight: 900;
  color: #059669;
}

.ledger-req-amount.positive {
  color: #059669;
}

.ledger-req-amount.rejected {
  color: #94A3B8;
  text-decoration: line-through;
}

.ledger-req-meta-row {
  margin-top: 6px;
  font-size: 0.76rem;
  color: #64748B;
  display: flex;
  gap: 14px;
  align-items: center;
}

.ledger-req-trx {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0F2E1E;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
}

.ledger-req-note {
  margin-top: 6px;
  font-size: 0.76rem;
  color: #475569;
  font-style: italic;
}

.ledger-req-bill-info-grid {
  margin-top: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.ledger-req-bill-info-grid.processed {
  background: #F1F5F9;
  border-color: #E2E8F0;
}

.ledger-req-bill-info-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lrb-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.lrb-val {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F2E1E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lrb-val.lrb-title {
  color: #059669;
}

.lrb-val.lrb-type {
  color: #334155;
}

.lrb-val.lrb-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76rem;
  color: #0284C7;
  background: #E0F2FE;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  max-width: fit-content;
  transition: background 0.15s ease;
}

.lrb-val.lrb-id:hover {
  background: #BAE6FD;
}

.ledger-req-approve-btn {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}

.ledger-req-approve-btn:hover {
  background: #047857 !important;
  border-color: #047857 !important;
}

.ledger-req-actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Admin Payment Setup Card */
.ledger-method-setup-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 14px;
}

.ledger-method-setup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ledger-method-tag {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.ledger-method-tag.bkash {
  background: #FDF2F8;
  color: #DB2777;
}

.ledger-method-tag.nagad {
  background: #FFF7ED;
  color: #EA580C;
}

/* ============================================================ */
/* TOP PAYMENT METHODS SETUP BANNER                             */
/* ============================================================ */

.ledger-methods-banner {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.ledger-methods-banner:hover {
  transform: translateY(-1px);
}

/* Warning Mode (When No Digital Accounts Configured) */
.ledger-methods-banner.warning-mode {
  background: #FFF8F8;
  border-color: #FECDD3;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.05);
}

.ledger-methods-banner.warning-mode:hover {
  border-color: #FDA4AF;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.1);
}

.ledger-methods-banner.warning-mode .ledger-methods-banner-title {
  color: #64748B;
}

.ledger-methods-banner.warning-mode .ledger-methods-banner-right {
  color: #E11D48;
}

/* Configured Mode (Matching Screenshot) */
.ledger-methods-banner.configured-mode {
  background: #ffffff;
  border-color: #E2E8F0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.ledger-methods-banner.configured-mode:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.ledger-methods-banner.configured-mode .ledger-methods-banner-title {
  color: #64748B;
}

.ledger-methods-banner.configured-mode .ledger-methods-banner-right {
  color: #94A3B8;
}

.ledger-methods-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ledger-methods-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ledger-methods-banner-icon.warning {
  background: #FEF2F2;
  color: #E11D48;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.12);
}

.ledger-methods-banner-icon.configured {
  background: #DCFCE7;
  color: #16A34A;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.12);
}

.ledger-methods-banner-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ledger-methods-banner-sub {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F2E1E;
}

.ledger-banner-red-text {
  color: #E11D48;
  font-weight: 700;
}

.ledger-banner-configured-text {
  color: #0F2E1E;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ledger-methods-banner-right {
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

/* ============================================================ */
/* ADMIN LEDGER 2-COLUMN RESPONSIVE LAYOUT                      */
/* ============================================================ */

.ledger-layout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: stretch;
}

.ledger-main-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ledger-side-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1080px) {
  .ledger-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .ledger-main-col {
    display: contents !important;
  }

  .ledger-cycle-header-card {
    order: 1 !important;
    margin-bottom: 0 !important;
  }

  .ledger-stats-grid {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  .ledger-side-col {
    order: 3 !important;
  }

  .ledger-bills-container,
  #ledgerBillsList {
    order: 4 !important;
  }

  .ledger-widget-card-expanded {
    min-height: auto !important;
    height: auto !important;
  }
}

/* ============================================================ */
/* ADMIN LEDGER PAYMENT VERIFICATION WIDGET (Expanded)          */
/* ============================================================ */

.ledger-widget-card-expanded {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  height: 100%;
}

.ledger-widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F1F5F9;
}

.ledger-widget-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
  letter-spacing: -0.01em;
}

.ledger-widget-sub {
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 2px;
}

.ledger-widget-requests-list.expanded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
}

.ledger-widget-pending-badge-row {
  margin-bottom: 4px;
}

.ledger-widget-sec-badge {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #B45309;
  font-size: 0.74rem;
  font-weight: 800;
}

.ledger-widget-req-card {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #F59E0B;
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.15s ease;
}

.ledger-widget-req-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.ledger-widget-req-card.bill-req-card {
  border-left: 4px solid #6366F1;
}

.ledger-widget-req-card.deposit-req-card {
  border-left: 4px solid #F59E0B;
}

/* Compact Single-Line Request Card in Widget (Ultra Minimal) */
.ledger-widget-req-compact-row {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.ledger-widget-req-compact-row:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.ledger-widget-req-compact-row.bill,
.ledger-widget-req-compact-row.deposit {
  border-left: 1px solid #E2E8F0;
}

.ledger-widget-req-compact-row.processed {
  background: #F8FAFC;
  opacity: 0.9;
}

.ledger-widget-avatar-sm {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  color: #15803d !important;
  background: #dcfce7 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
}

.ledger-widget-req-compact-row:hover .ledger-widget-avatar-sm {
  transform: scale(1.06);
}

.ledger-widget-req-compact-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.ledger-widget-req-compact-amt {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
  margin-right: 8px;
  white-space: nowrap;
}

.ledger-widget-req-compact-amt.bill {
  color: #0F172A;
}

.ledger-widget-req-compact-amt.deposit {
  color: #059669;
}

.ledger-btn-review {
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
  transition: all 0.15s ease !important;
}

.ledger-btn-review:hover {
  background: #0F2E1E !important;
  border-color: #0F2E1E !important;
  color: #ffffff !important;
}

/* Single Review Modal Styles */
.ledger-review-single-dialog {
  max-width: 460px !important;
  width: 100% !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.ledger-review-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bill Review Modal Box (Ultra Minimal, No Side Line) */
.bill-review-modal-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.bill-review-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 4px 2px;
}

.bill-review-member-name {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.bill-review-amount-text {
  font-size: 1.4rem;
  font-weight: 900;
  color: #4F46E5;
  letter-spacing: -0.02em;
}

.bill-review-details-grid-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bill-review-grid-row.top-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.1fr;
  gap: 10px;
  align-items: center;
}

.bill-review-grid-row.bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.bill-review-grid-divider {
  height: 1px;
  background: #E2E8F0;
  width: 100%;
}

.bill-review-grid-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bill-trx-sub {
  font-size: 0.72rem;
  color: #64748B;
  cursor: pointer;
  margin-left: 2px;
}

.bill-trx-sub:hover {
  color: #0284C7;
  text-decoration: underline;
}

.bill-review-payment-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #64748B;
  padding: 2px 2px;
}

.bill-review-payment-status-row .status-label {
  font-weight: 700;
  color: #64748B;
}

.bill-review-payment-status-row .status-val-clean {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 0.8rem;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.lrb-id-clean {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0F172A !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  cursor: pointer;
  transition: color 0.15s ease;
}

.lrb-id-clean:hover {
  color: #0284C7 !important;
}

.lrb-id-clean .inline-copy-svg {
  color: #64748B;
  transition: transform 0.15s ease, color 0.15s ease;
}

.lrb-id-clean:hover .inline-copy-svg {
  color: #0284C7;
  transform: scale(1.15);
}

/* Deposit Review Custom Minimal UI */
.deposit-review-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.deposit-review-hero {
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  border: 1px solid #D1FAE5;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.deposit-hero-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.deposit-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #059669;
  margin-top: 2px;
}

.deposit-hero-amount-box {
  text-align: right;
}

.deposit-hero-amount-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.deposit-hero-amount-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: #059669;
  line-height: 1.1;
}

.deposit-info-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deposit-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid #F1F5F9;
  gap: 12px;
}

.deposit-info-row:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.deposit-info-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.deposit-custom-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #F1F5F9 !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
}

.deposit-custom-icon svg {
  color: #334155 !important;
}

.deposit-custom-icon.channel,
.deposit-custom-icon.trx,
.deposit-custom-icon.time,
.deposit-custom-icon.note {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
}

.deposit-info-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
}

.deposit-info-val {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.deposit-trx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #CBD5E1;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 0.78rem;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.15s ease;
}

.deposit-trx-badge:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #0284C7;
}

.deposit-cash-pill {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
}

.deposit-review-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.deposit-btn-reject {
  padding: 8px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  color: #DC2626 !important;
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  transition: all 0.15s ease !important;
}

.deposit-btn-reject:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
}

.deposit-btn-approve {
  padding: 8px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2) !important;
  transition: all 0.15s ease !important;
}

.deposit-btn-approve:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

.deposit-status-pill {
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.deposit-status-pill.approved {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.deposit-status-pill.rejected {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.ledger-btn-reject-modal {
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  color: #DC2626 !important;
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
}

.ledger-btn-reject-modal:hover {
  background: #FEE2E2 !important;
  border-color: #F87171 !important;
}

.ledger-btn-approve-modal {
  padding: 8px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ledger-btn-approve-modal.bill {
  background: #4F46E5 !important;
  border-color: #4F46E5 !important;
  color: #ffffff !important;
}

.ledger-btn-approve-modal.bill:hover {
  background: #4338CA !important;
  border-color: #4338CA !important;
}

.ledger-btn-approve-modal.deposit {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.ledger-btn-approve-modal.deposit:hover {
  background: #047857 !important;
  border-color: #047857 !important;
}

.ledger-review-status-pill-full {
  width: 100%;
  text-align: center;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.ledger-review-status-pill-full.approved {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.ledger-review-status-pill-full.rejected {
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
}

.ledger-pv-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ledger-pv-section {
  background: #FAFBFD;
  border: 1px solid #EAEEF4;
  border-radius: 12px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ledger-pv-sec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 2px 2px 2px;
}

.ledger-pv-sec-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ledger-pv-sec-title svg {
  color: #475569;
}

.ledger-pv-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
}

.ledger-pv-badge.bill,
.ledger-pv-badge.deposit {
  background: #F1F5F9;
  color: #334155;
  border: 1px solid #E2E8F0;
}

.ledger-pv-sec-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ledger-pv-sec-empty {
  background: #ffffff;
  border: 1px dashed #CBD5E1;
  border-radius: 9px;
  padding: 10px 12px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ledger-widget-req-type-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ledger-widget-req-type-pill.bill {
  background: #EEF2FF;
  color: #4F46E5;
}

.ledger-widget-req-type-pill.deposit {
  background: #FEF3C7;
  color: #B45309;
}

.ledger-widget-req-amt.bill {
  color: #4F46E5;
}

.ledger-widget-bill-info-box {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 6px 9px;
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ledger-wb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ledger-wb-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
}

.ledger-wb-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.ledger-wb-meta {
  border-top: 1px dashed #CBD5E1;
  padding-top: 4px;
}

.ledger-wb-type-tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: #475569;
  background: #E2E8F0;
  padding: 1px 5px;
  border-radius: 4px;
}

.ledger-wb-id-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.70rem;
  font-weight: 700;
  color: #0284C7;
  background: #E0F2FE;
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ledger-wb-id-tag:hover {
  background: #BAE6FD;
}

.ledger-widget-cash-pill {
  font-size: 0.70rem;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 1px 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.ledger-btn-approve-bill {
  background: #4F46E5 !important;
  border-color: #4F46E5 !important;
  color: #ffffff !important;
}

.ledger-btn-approve-bill:hover {
  background: #4338CA !important;
  border-color: #4338CA !important;
}

.btn-xs {
  height: 28px;
  padding: 0 10px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ledger-widget-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  text-align: center;
  flex: 1;
}

.ledger-widget-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #ECFDF5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
}

.ledger-widget-empty-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0F2E1E;
  margin-bottom: 4px;
}

.ledger-widget-empty-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748B;
  max-width: 240px;
}

.ledger-widget-recent-header {
  font-size: 0.75rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 6px;
}

.ledger-widget-history-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 10px;
}

/* Modal Overlay Global Priority */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.22s ease, visibility 0.22s ease !important;
}

.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.modal-overlay .modal {
  position: relative !important;
  z-index: 100000 !important;
}

/* ============================================================
   Payment Methods Modal & Add Method Form Styles
   ============================================================ */
.payment-methods-dialog {
  max-width: 480px !important;
  width: 100% !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.25) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.payment-methods-dialog .modal-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-methods-dialog .modal-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.modal-close-btn,
.payment-methods-dialog .btn-close,
.ledger-modal-dialog .btn-close,
.ledger-review-single-dialog .btn-close,
.ledger-modal-close-btn,
#ledgerReviewSingleModal .btn-close,
#ledgerBillModal .btn-close,
#ledgerDetailsModal .btn-close,
#ledgerPaymentRequestsModal .btn-close,
#ledgerPaymentMethodsModal .btn-close,
#ledgerAddMethodModal .btn-close,
#ledgerDeleteConfirmModal .btn-close,
#addMoneyModal .btn-close,
#payBillModal .btn-close,
#addMoneyCloseBtn,
#payBillCloseBtn,
.add-money-modal-dialog .btn-close,
.pay-bill-modal-dialog .btn-close,
.add-money-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.modal-close-btn:hover,
.payment-methods-dialog .btn-close:hover,
.ledger-modal-dialog .btn-close:hover,
.ledger-review-single-dialog .btn-close:hover,
.ledger-modal-close-btn:hover,
#ledgerReviewSingleModal .btn-close:hover,
#ledgerBillModal .btn-close:hover,
#ledgerDetailsModal .btn-close:hover,
#ledgerPaymentRequestsModal .btn-close:hover,
#ledgerPaymentMethodsModal .btn-close:hover,
#ledgerAddMethodModal .btn-close:hover,
#ledgerDeleteConfirmModal .btn-close:hover,
#addMoneyModal .btn-close:hover,
#payBillModal .btn-close:hover,
#addMoneyCloseBtn:hover,
#payBillCloseBtn:hover,
.add-money-modal-dialog .btn-close:hover,
.pay-bill-modal-dialog .btn-close:hover,
.add-money-close-btn:hover {
  background: #FEE2E2 !important;
  border-color: #FECACA !important;
  color: #EF4444 !important;
  transform: rotate(90deg) scale(1.1) !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.2) !important;
}

.modal-close-btn:active,
.payment-methods-dialog .btn-close:active,
.ledger-modal-dialog .btn-close:active,
.ledger-review-single-dialog .btn-close:active,
.ledger-modal-close-btn:active,
#ledgerReviewSingleModal .btn-close:active,
#ledgerBillModal .btn-close:active,
#ledgerDetailsModal .btn-close:active,
#ledgerPaymentRequestsModal .btn-close:active,
#ledgerPaymentMethodsModal .btn-close:active,
#ledgerAddMethodModal .btn-close:active,
#ledgerDeleteConfirmModal .btn-close:active,
#addMoneyModal .btn-close:active,
#payBillModal .btn-close:active,
#addMoneyCloseBtn:active,
#payBillCloseBtn:active,
.add-money-modal-dialog .btn-close:active,
.pay-bill-modal-dialog .btn-close:active,
.add-money-close-btn:active {
  transform: rotate(90deg) scale(0.94) !important;
  background: #FECACA !important;
}

.payment-methods-dialog .modal-body {
  padding: 20px 22px 24px;
  max-height: 78vh;
  overflow-y: auto;
}

/* Built-in Cash Card (Clean Minimal Fintech Redesign) */
.payment-method-cash-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s ease;
}

.payment-method-cash-card:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.payment-method-cash-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-method-cash-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ECFDF5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #A7F3D0;
}

.payment-method-cash-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}

.payment-method-cash-sub {
  font-size: 0.76rem;
  color: #64748B;
  font-weight: 500;
  margin-top: 2px;
}

.payment-method-builtin-tag {
  background: #ECFDF5;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid #A7F3D0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.01em;
}


/* Empty State */
.payment-methods-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 28px;
  text-align: center;
}

.empty-wallet-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  margin-bottom: 12px;
}

.empty-wallet-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #475569;
  margin: 0 0 4px;
}

.empty-wallet-sub {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
  max-width: 260px;
  line-height: 1.45;
}

/* Methods List */
.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.payment-method-item-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
}

.payment-method-item-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.payment-method-item-card.inactive {
  opacity: 0.6;
  background: #F8FAFC;
}

.platform-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.platform-dot.bkash {
  background: #E2136E;
  box-shadow: 0 0 0 3px rgba(226, 19, 110, 0.18);
}

.platform-dot.nagad {
  background: #F7941D;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.18);
}

.platform-dot.rocket {
  background: #8C3494;
  box-shadow: 0 0 0 3px rgba(140, 52, 148, 0.18);
}

.platform-dot.upay {
  background: #0081C9;
  box-shadow: 0 0 0 3px rgba(0, 129, 201, 0.18);
}

.platform-dot.other {
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

.payment-method-item-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
}

.payment-method-item-number {
  font-size: 0.84rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #64748B;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.payment-method-charge-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  padding: 1px 6px;
  border-radius: 6px;
}

.payment-method-inactive-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 6px;
}

.btn-icon-soft {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #F1F5F9;
  border: none;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon-soft:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.btn-icon-danger {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #FEF2F2;
  border: none;
  color: #EF4444;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-icon-danger:hover {
  background: #FEE2E2;
  color: #DC2626;
}

/* Trigger Add Method Button */
.btn-add-payment-method-trigger {
  width: 100%;
  padding: 13px 16px;
  border-radius: 13px;
  background: #DCFCE7;
  border: 1.5px dashed #86EFAC;
  color: #059669;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-top: 14px;
}

.btn-add-payment-method-trigger:hover {
  background: #BBF7D0;
  border-color: #4ADE80;
  color: #047857;
  transform: translateY(-1px);
}

/* Platform selector pills */
.platform-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.platform-pill-btn {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-weight: 700;
  font-size: 0.82rem;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}

.platform-pill-btn:hover {
  border-color: #CBD5E1;
  background: #F1F5F9;
}

.platform-pill-btn.active.bkash {
  background: #E2136E !important;
  color: #ffffff !important;
  border-color: #E2136E !important;
  box-shadow: 0 4px 12px rgba(226, 19, 110, 0.3) !important;
}

.platform-pill-btn.active.nagad {
  background: #F7941D !important;
  color: #ffffff !important;
  border-color: #F7941D !important;
  box-shadow: 0 4px 12px rgba(247, 148, 29, 0.3) !important;
}

.platform-pill-btn.active.rocket {
  background: #8C3494 !important;
  color: #ffffff !important;
  border-color: #8C3494 !important;
  box-shadow: 0 4px 12px rgba(140, 52, 148, 0.3) !important;
}

.platform-pill-btn.active.upay {
  background: #0081C9 !important;
  color: #ffffff !important;
  border-color: #0081C9 !important;
  box-shadow: 0 4px 12px rgba(0, 129, 201, 0.3) !important;
}

.platform-pill-btn.active.other {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
}

.input-addon-group {
  display: flex;
  align-items: center;
  position: relative;
}

.input-addon-suffix {
  position: absolute;
  right: 14px;
  font-weight: 800;
  color: #64748B;
  font-size: 0.92rem;
  pointer-events: none;
}

.toggle-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}

/* ============================================================
   ADD MONEY & PAY BILL MODALS (Bottom Sheet Popup with Micro-Animations)
   ============================================================ */

#addMoneyModal.modal-overlay,
#payBillModal.modal-overlay,
#userHistoryDetailModal.modal-overlay {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10005 !important;
}

#addMoneyModal.modal-overlay.active,
#payBillModal.modal-overlay.active,
#userHistoryDetailModal.modal-overlay.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#addMoneyModal .add-money-modal-dialog,
#payBillModal .pay-bill-modal-dialog,
#userHistoryDetailModal .user-history-detail-dialog {
  width: 100% !important;
  max-width: 500px !important;
  max-height: min(85vh, 560px) !important;
  border-radius: 28px 28px 0 0 !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-bottom: none !important;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  transform: translateY(100%) !important;
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

#addMoneyModal.modal-overlay.active .add-money-modal-dialog,
#payBillModal.modal-overlay.active .pay-bill-modal-dialog,
#userHistoryDetailModal.modal-overlay.active .user-history-detail-dialog {
  transform: translateY(0) !important;
}

#addMoneyModal .modal-drag-indicator,
#payBillModal .modal-drag-indicator,
#userHistoryDetailModal .modal-drag-indicator {
  width: 42px;
  height: 4.5px;
  background: #CBD5E1;
  border-radius: 999px;
  margin: 12px auto 4px auto;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

#addMoneyModal:hover .modal-drag-indicator,
#payBillModal:hover .modal-drag-indicator,
#userHistoryDetailModal:hover .modal-drag-indicator {
  background: #94A3B8;
}

#addMoneyModal .modal-header,
#payBillModal .modal-header,
#userHistoryDetailModal .modal-header {
  padding: 10px 22px 14px 22px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
}

#addMoneyModal .modal-title,
#payBillModal .modal-title,
#userHistoryDetailModal .modal-title {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: #0F2E1E !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

#addMoneyModal .modal-body,
#payBillModal .modal-body,
#userHistoryDetailModal .modal-body {
  padding: 16px 22px 20px 22px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  overscroll-behavior: contain !important;
}

#addMoneyModal .modal-body::-webkit-scrollbar,
#payBillModal .modal-body::-webkit-scrollbar,
#userHistoryDetailModal .modal-body::-webkit-scrollbar {
  width: 5px;
}

#addMoneyModal .modal-body::-webkit-scrollbar-thumb,
#payBillModal .modal-body::-webkit-scrollbar-thumb,
#userHistoryDetailModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.22);
  border-radius: 999px;
}

#addMoneyModal .modal-body::-webkit-scrollbar-thumb:hover,
#payBillModal .modal-body::-webkit-scrollbar-thumb:hover,
#userHistoryDetailModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.38);
}

@media (max-width: 640px) {

  #addMoneyModal .add-money-modal-dialog,
  #payBillModal .pay-bill-modal-dialog,
  #userHistoryDetailModal .user-history-detail-dialog {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
  }
}

.add-money-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #065F46;
  font-weight: 500;
}

.add-money-alert-box svg {
  flex-shrink: 0;
  color: #059669;
  margin-top: 1px;
}

.add-money-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.add-money-currency-icon {
  position: absolute;
  left: 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #059669;
  pointer-events: none;
}

.add-money-input-wrapper input {
  padding-left: 36px !important;
}

.add-money-amount-field {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em;
}

/* Method Pills */
.add-money-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.add-money-method-pill {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-weight: 700;
  font-size: 0.85rem;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.16s ease;
}

.add-money-method-pill:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  transform: translateY(-1px);
}

.add-money-method-pill.active:not(.bkash):not(.nagad):not(.rocket):not(.cash) {
  background: #059669;
  border-color: #059669;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

/* ============================================================
   PREMIUM CLEAN PAYMENT INSTRUCTIONS CARD
   ============================================================ */

.add-money-instructions-box {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin-top: 14px;
}

/* ============================================================
   ADD MONEY STEP 2: UNIFIED COMPACT CARD
   ============================================================ */
/* Taka Symbol (Inherits font size and color) */
.tk-symbol,
.taka-icon,
.tk-icon {
  display: inline-block;
  width: 0.88em;
  height: 0.95em;
  background-color: currentColor;
  -webkit-mask: url('../assets/taka-symbol.png') no-repeat center / contain;
  mask: url('../assets/taka-symbol.png') no-repeat center / contain;
  vertical-align: -0.1em;
  margin-right: 2px;
  flex-shrink: 0;
}

.add-money-unified-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.add-money-unified-card.bkash {
  border-color: #FBCFE8;
  background: linear-gradient(180deg, #FFF5F9 0%, #FFFFFF 100%);
}

.add-money-unified-card.nagad {
  border-color: #FED7AA;
  background: linear-gradient(180deg, #FFFBF5 0%, #FFFFFF 100%);
}

.add-money-unified-card.rocket {
  border-color: #DDD6FE;
  background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 100%);
}

.add-money-unified-card.cash {
  border-color: #BBF7D0;
  background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 100%);
}

.amu-account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.amu-account-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.amu-account-provider {
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
  text-transform: capitalize;
}

.amu-account-provider.bkash {
  color: #BE185D;
}

.amu-account-provider.nagad {
  color: #D97706;
}

.amu-account-provider.cash {
  color: #059669;
}

.amu-account-type {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 5px;
  background: #DCFCE7;
  color: #047857;
  border: 1px solid #A7F3D0;
  white-space: nowrap;
}

.amu-account-type.bkash {
  background: #FCE7F3;
  color: #BE185D;
  border-color: #FBCFE8;
}

.amu-account-type.nagad {
  background: #FFF7ED;
  color: #D97706;
  border-color: #FED7AA;
}

.amu-number-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 9px;
  padding: 6px 10px;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.amu-number-text-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.amu-phone-icon {
  color: #64748B;
  flex-shrink: 0;
}

.amu-number-val {
  font-family: 'Space Grotesk', ui-monospace, monospace, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.03em;
  user-select: all;
  line-height: 1;
}

.amu-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #059669;
  color: #ffffff;
  border: none;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2);
  flex-shrink: 0;
}

.amu-copy-btn:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
}

.amu-copy-btn:active {
  transform: scale(0.96);
}

.amu-copy-btn.bkash {
  background: #E2136E;
  box-shadow: 0 1px 3px rgba(226, 19, 110, 0.25);
}

.amu-copy-btn.nagad {
  background: #F7941D;
  box-shadow: 0 1px 3px rgba(247, 148, 29, 0.25);
}

.amu-copy-btn.rocket {
  background: #8B5CF6;
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.25);
}

.amu-copy-btn.copied {
  background: #047857 !important;
}

.amu-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 8px 0;
}

.add-money-unified-card.bkash .amu-divider {
  background: #FCE7F3;
}

.add-money-unified-card.nagad .amu-divider {
  background: #FED7AA;
}

.add-money-unified-card.cash .amu-divider {
  background: #DCFCE7;
}

.amu-breakdown-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.amu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #64748B;
}

.amu-row-label {
  font-weight: 500;
}

.amu-row-val {
  font-weight: 700;
  color: #1E293B;
  font-size: 0.84rem;
}

.amu-row-val.fee {
  color: #EA580C;
}

.amu-subdivider {
  height: 1px;
  background: #E2E8F0;
  margin: 3px 0 2px;
}

.amu-row.total-row {
  margin-top: 1px;
}

.amu-total-label {
  font-weight: 700;
  color: #0F172A;
  font-size: 0.82rem;
}

.amu-total-val {
  font-size: 0.84rem;
  font-weight: 700;
  color: #059669;
  letter-spacing: -0.01em;
}

/* Remove outline shadow from Transaction ID and Note input boxes */
#addMoneyTrxIdInput,
#addMoneyNoteInput,
.add-money-trx-input,
.add-money-note-input {
  box-shadow: none !important;
  outline: none !important;
  border: 1.5px solid #E2E8F0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  transition: border-color 0.16s ease !important;
}

#addMoneyNoteInput,
.add-money-note-input {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

#addMoneyTrxIdInput:focus,
#addMoneyNoteInput:focus,
.add-money-trx-input:focus,
.add-money-note-input:focus {
  box-shadow: none !important;
  outline: none !important;
  border-color: #10B981 !important;
}

/* Pay button disabled state (when TrxID < 8 characters) */
#btnSubmitAddMoney:disabled,
#btnSubmitAddMoney[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
  filter: grayscale(0.4) !important;
}

.amu-cash-note {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #166534;
  font-size: 0.76rem;
  font-weight: 600;
}

.amu-cash-note svg {
  color: #059669;
  flex-shrink: 0;
}

.amu-tip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 6px;
  padding-left: 2px;
}

.amu-tip svg {
  color: #10B981;
  flex-shrink: 0;
}

.add-money-instruction-card {
  background: linear-gradient(180deg, #F0FDF4 0%, #F8FAFC 100%);
  border: 1.5px solid #BBF7D0;
  border-radius: 16px;
  padding: 13px 14px 12px;
  box-shadow: 0 4px 16px -4px rgba(5, 150, 105, 0.08);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: all 0.2s ease;
}

.ami-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ami-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ami-card-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #DCFCE7;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ami-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #065F46;
  letter-spacing: -0.01em;
}

.ami-card-type-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #047857;
  background: #DCFCE7;
  border: 1px solid #A7F3D0;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: capitalize;
  white-space: nowrap;
}

.ami-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 8px 12px;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ami-number-text {
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: 0.04em;
  user-select: all;
}

.ami-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #059669;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
  flex-shrink: 0;
}

.ami-copy-btn:hover {
  background: #047857;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.35);
}

.ami-copy-btn:active {
  transform: scale(0.96);
}

.ami-copy-btn.copied {
  background: #047857 !important;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.3) !important;
}

.ami-fee-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  font-weight: 700;
  color: #B45309;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 4px 9px;
  border-radius: 8px;
}

.ami-fee-badge svg {
  flex-shrink: 0;
  color: #D97706;
}

.ami-footer-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  padding-left: 2px;
}

.ami-footer-tip svg {
  flex-shrink: 0;
  color: #10B981;
}

.add-money-submit-btn {
  font-weight: 800 !important;
  padding: 12px !important;
  border-radius: 12px !important;
}

/* ============================================================
   LEDGER DELETE BILL CONFIRMATION MODAL
   ============================================================ */
.ledger-delete-modal-dialog {
  max-width: 440px !important;
  width: 94% !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.25) !important;
  overflow: hidden !important;
  margin: auto !important;
}

.ledger-delete-warning-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FEF2F2;
  color: #DC2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ledger-delete-modal-msg {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.5;
  margin: 0 0 10px;
}

.ledger-delete-warning-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #92400E;
  line-height: 1.45;
  font-weight: 500;
}

.ledger-delete-warning-card svg {
  flex-shrink: 0;
  color: #D97706;
  margin-top: 1px;
}

.ledger-delete-preview-card {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 0 10px;
}

.ledger-delete-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EDF2F7;
}

.ledger-delete-bill-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.ledger-delete-preview-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ledger-delete-preview-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ledger-delete-item-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ledger-delete-item-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
}

.ledger-delete-item-val.total {
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-weight: 800;
  color: #059669;
  font-size: 0.98rem;
}

/* ==========================================================================
   Ledger Details & Member Deductions Modal Styling
   ========================================================================== */
.ledger-details-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  margin-bottom: 10px;
}

.ledger-details-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}

.ledger-detail-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.ledger-detail-member-row:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}

.ledger-detail-member-row.paid {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.ledger-detail-member-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ledger-detail-member-left .member-tia-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: #dcfce7 !important;
  color: #15803d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.ledger-detail-member-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ledger-detail-member-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: #0F172A;
}

.ledger-detail-member-sub {
  font-size: 0.78rem;
  color: #64748B;
  font-weight: 500;
}

.ledger-detail-member-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ledger-detail-member-amt {
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #0F172A;
}

.ledger-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #DCFCE7;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 700;
}

.ledger-paid-badge svg {
  color: #15803d;
}

.ledger-btn-single-collect {
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.82rem;
}

/* ============================================================
   MODERN BAZAR MODULE STYLING
   ============================================================ */

.bazar-topbar {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.bazar-topbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.bazar-date-selector-group {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
  box-shadow: none;
}

.bazar-nav-arrow-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bazar-nav-arrow-btn:hover {
  background: #F1F5F9;
  color: #0F172A;
}

.bazar-today-btn {
  border: 1px solid #D1FAE5;
  background: #ECFDF5;
  color: #059669;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.bazar-today-btn:hover {
  background: #D1FAE5;
  border-color: #A7F3D0;
}

.bazar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bazar-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.84rem;
  border-radius: 8px;
  padding: 9px 16px;
  min-height: 38px;
  transition: all 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: none !important;
  box-sizing: border-box;
}

.bazar-action-btn.btn-outline {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
  box-shadow: none !important;
}

.bazar-action-btn.btn-outline:hover {
  background: #F8FAFC !important;
  border-color: #059669 !important;
  color: #059669 !important;
  transform: none !important;
}

.bazar-action-btn.btn-primary {
  background: #059669 !important;
  border: 1px solid #059669 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.bazar-action-btn.btn-primary:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  transform: none !important;
}

/* --- Top Analytics Overview Card --- */
.bazar-overview-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 18px 22px;
  box-shadow: 0 4px 20px -4px rgba(5, 150, 105, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease;
}

.bazar-overview-card:hover {
  border-color: #A7F3D0;
  box-shadow: 0 8px 30px -4px rgba(5, 150, 105, 0.10), 0 0 0 1px #D1FAE5;
}

.bazar-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F5F9;
}

@media (max-width: 900px) {
  .bazar-stats-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.bazar-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bazar-stat-icon-wrapper {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.bazar-stat-icon-wrapper svg {
  width: 21px;
  height: 21px;
}

.bazar-stat-item:hover .bazar-stat-icon-wrapper {
  transform: translateY(-2px);
}

.bazar-stat-icon-wrapper.ring-emerald {
  background: #ECFDF5;
  color: #059669;
  border: 1.5px solid #D1FAE5;
  box-shadow: none;
}

.bazar-stat-icon-wrapper.ring-indigo {
  background: #EEF2FF;
  color: #4F46E5;
  border: 1.5px solid #E0E7FF;
  box-shadow: none;
}

.bazar-stat-content {
  display: flex;
  flex-direction: column;
}

.bazar-stat-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
  display: block;
  margin-bottom: 2px;
}

.bazar-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.bazar-stat-highlight {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: 1.1 !important;
}

.bazar-curr-symbol {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  margin-right: 2px !important;
  color: #0F172A !important;
  line-height: 1 !important;
  display: inline-block !important;
  -webkit-text-stroke: 1px #0F172A !important;
  text-shadow: 0.2px 0 0 #0F172A, -0.2px 0 0 #0F172A !important;
  paint-order: stroke fill !important;
}

.bazar-stat-total-days {
  font-size: 0.84rem;
  font-weight: 600;
  color: #94A3B8;
  margin-left: 2px;
}

/* Today's Duty Badge */
.today-duty-wrapper {
  justify-content: flex-end;
}

.bazar-today-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  transition: all 0.2s ease;
  width: 100%;
  max-width: 320px;
}

.bazar-today-badge.assigned {
  background: #F0FDF4;
  border-color: #DCFCE7;
}

.bazar-today-badge.done {
  background: #ECFDF5;
  border-color: #A7F3D0;
}

.bazar-today-badge:hover {
  border-color: #CBD5E1;
}

.bazar-today-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #059669;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bazar-today-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bazar-today-avatar.empty {
  background: #E2E8F0;
  color: #64748B;
}

.bazar-today-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bazar-today-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

.bazar-today-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bazar-today-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bazar-today-status.done {
  background: #10B981;
  color: #FFFFFF;
}

.bazar-today-status.upcoming {
  background: #2563EB;
  color: #FFFFFF;
}

.bazar-btn-quick-assign {
  border: 1px solid #059669;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  box-shadow: none;
}

.bazar-btn-quick-assign:hover {
  background: #047857;
  border-color: #047857;
}

/* Progress Bar Section */
.bazar-progress-card-section {
  padding-top: 14px;
}

.bazar-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.bazar-progress-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bazar-progress-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: -0.01em;
}

.bazar-progress-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
  background: #F1F5F9;
  color: #475569;
  border: 1px solid #E2E8F0;
  transition: all 0.2s;
}

.bazar-progress-badge.badge-success {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.bazar-progress-badge.badge-warning {
  background: #FEF3C7;
  color: #B45309;
  border-color: #FDE68A;
}

.bazar-progress-badge.badge-danger {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FECACA;
}

.bazar-progress-meta-right {
  font-size: 0.8rem;
  font-weight: 500;
  color: #64748B;
}

.bazar-progress-meta-right strong {
  color: #0F172A;
  font-weight: 700;
}

.bazar-progress-sep {
  margin: 0 6px;
  color: #CBD5E1;
}

.bazar-progress-bar-track {
  width: 100%;
  height: 8px;
  background: #F1F5F9;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bazar-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #10B981 0%, #EAB308 55%, #EF4444 100%);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25);
}

/* View Selector Tabs — Flat & Sleek */
.bazar-view-tabs {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}

.bazar-view-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  min-height: 38px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #64748B;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
}

.bazar-view-tab-btn:hover {
  color: #0F172A;
  background: rgba(255, 255, 255, 0.6);
}

.bazar-view-tab-btn.active {
  background: #059669;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}

/* Layout Grid: Calendar Main + Duty Fairness (50% - 50% split) */
.bazar-calendar-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

@media (max-width: 960px) {
  .bazar-calendar-layout-grid {
    grid-template-columns: 1fr;
  }
}

.bazar-calendar-main-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px rgba(5, 150, 105, 0.04);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.22s ease;
}

.bazar-calendar-main-card:hover {
  border-color: #A7F3D0;
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.08), 0 0 0 1px #D1FAE5;
}

.bazar-calendar-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.bazar-cal-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.bazar-cal-nav-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.bazar-cal-center-title {
  text-align: center;
}

.bazar-calendar-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}

.bazar-calendar-card-subtitle {
  font-size: 0.74rem;
  color: #94A3B8;
  margin: 2px 0 0;
  font-weight: 500;
}

/* 7-Column Grid */
.bazar-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}

.bazar-cal-header-cell {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #94A3B8;
  padding: 6px 0;
  background: transparent;
  user-select: none;
}

/* Calendar Cells */
.bazar-cal-cell {
  border-radius: 12px;
  min-height: 58px;
  padding: 5px 4px 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}

.bazar-cal-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Cell State 1: Done (Green) */
.bazar-cal-cell.status-done {
  background: #ECFDF5;
  border: 1.5px solid #10B981;
}

.bazar-cal-cell.status-done .bazar-cal-date-num {
  color: #047857;
}

/* Cell State 2: Missed Duty (Yellow / Amber) */
.bazar-cal-cell.status-missed {
  background: #FEF3C7;
  border: 1.5px solid #F59E0B;
}

.bazar-cal-cell.status-missed .bazar-cal-date-num {
  color: #92400E;
}

/* Cell State 3: Assigned / Upcoming */
.bazar-cal-cell.status-assigned {
  background: #FAF5F0;
  border: 1.5px solid #E2E8F0;
}

.bazar-cal-cell.status-assigned .bazar-cal-date-num {
  color: #334155;
}

/* Cell State 4: Unassigned */
.bazar-cal-cell.unassigned {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}

.bazar-cal-cell.unassigned .bazar-cal-date-num {
  color: #64748B;
}

/* Today Cell Highlight */
.bazar-cal-cell.is-today {
  border: 2px solid #059669 !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

.bazar-cal-cell.empty-prev,
.bazar-cal-cell.empty-next {
  background: #F8FAFC;
  border-color: #F1F5F9;
  cursor: default;
  opacity: 0.35;
}

.bazar-cal-cell.empty-prev:hover,
.bazar-cal-cell.empty-next:hover {
  transform: none;
  box-shadow: none;
}

.bazar-cal-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
  line-height: 1;
}

.bazar-cal-date-num {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  line-height: 1;
}

.bazar-cal-date-num.faint {
  color: #94A3B8;
}

.bazar-cal-warning-badge {
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bazar-cal-duty-slot {
  width: 100%;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Member Initials Pill */
.bazar-cal-member-pill {
  width: 100%;
  height: 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
}

.bazar-cal-member-pill.status-done {
  background: #059669;
}

.bazar-cal-member-pill.status-missed {
  background: #D97706;
}

.bazar-cal-member-pill.status-assigned {
  background: #78350F;
}

.bazar-cal-empty-pill {
  width: 100%;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 3px;
}

.bazar-cal-cell:hover .bazar-cal-empty-pill {
  color: #059669;
}

.bazar-cal-cell:hover .bazar-cal-empty-pill {
  color: #059669;
}

/* Bottom Legend */
.bazar-calendar-bottom-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
}

.bazar-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.green {
  background: #10B981;
}

.legend-dot.orange {
  background: #D97706;
}

.legend-dot.brown {
  background: #78350F;
}

.bazar-cal-cell:hover .bazar-cal-unassigned-slot {
  color: #059669;
  border-color: #059669;
  background: #ECFDF5;
}

/* Right: Duty Distribution Tracker Card */
.bazar-duty-fairness-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 18px rgba(5, 150, 105, 0.04);
  min-width: 0;
  box-sizing: border-box;
  transition: all 0.22s ease;
}

.bazar-duty-fairness-card:hover {
  border-color: #A7F3D0;
  box-shadow: 0 6px 24px rgba(5, 150, 105, 0.08), 0 0 0 1px #D1FAE5;
}

.bazar-fairness-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.bazar-fairness-title h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F2E1E;
  margin: 0;
}

.bazar-fairness-title p {
  font-size: 0.72rem;
  color: #64748B;
  margin: 2px 0 0;
}

.bazar-btn-icon-link {
  border: none;
  background: #F1F5F9;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.bazar-btn-icon-link:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.bazar-fairness-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.bazar-fairness-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  transition: all 0.2s;
}

.bazar-fairness-item:hover {
  background: #F1F5F9;
}

.bazar-fairness-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bazar-fairness-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bazar-fairness-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bazar-fairness-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bazar-fairness-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bazar-fairness-sub {
  font-size: 0.68rem;
  color: #16A34A;
  font-weight: 600;
}

.bazar-fairness-count-badge {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  color: #475569;
  flex-shrink: 0;
}

.bazar-fairness-count-badge strong {
  color: #059669;
  font-size: 0.85rem;
  font-weight: 800;
}

.bazar-fairness-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
}

/* Expense Logs Tab Styling */
.bazar-expense-logs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bazar-log-day-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.bazar-log-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
}

.bazar-log-day-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bazar-log-calendar-tag {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #059669;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bazar-log-tag-month {
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

.bazar-log-tag-day {
  font-size: 1.15rem;
  font-weight: 900;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  margin-top: 2px;
}

.bazar-log-day-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.bazar-log-day-count {
  font-size: 0.78rem;
  color: #64748B;
}

.bazar-log-day-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: #059669;
  font-family: 'Space Grotesk', monospace, sans-serif;
}

.bazar-log-items-table-wrapper {
  overflow-x: auto;
}

.bazar-log-items-table {
  width: 100%;
  border-collapse: collapse;
}

.bazar-log-items-table th {
  background: #FFFFFF;
  text-align: left;
  padding: 8px 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #F1F5F9;
}

.bazar-log-items-table td {
  padding: 10px 18px;
  font-size: 0.85rem;
  border-bottom: 1px solid #F8FAFC;
  vertical-align: middle;
}

.bazar-shopper-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  font-weight: 600;
  font-size: 0.78rem;
  color: #334155;
}

/* Modals & Dialogs */
.bazar-modal-dialog {
  max-width: 480px;
  width: 100%;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: #FFFFFF !important;
}

.bazar-modal-dialog .modal-header,
#bazarAssignModal .modal-header,
#bazarWeeklyRoutineModal .modal-header,
#bazarDayDetailsModal .modal-header {
  padding: 16px 20px 14px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
}

.bazar-modal-dialog .modal-title,
#bazarAssignModal .modal-title,
#bazarWeeklyRoutineModal .modal-title,
#bazarDayDetailsModal .modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

/* Modal Close Button with Animated Rotating Cross Effect */
.bazar-modal-dialog .btn-close,
#bazarAssignModal .btn-close,
#bazarWeeklyRoutineModal .btn-close,
#bazarDayDetailsModal .btn-close,
#bazarSwipeRequestModal .btn-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
}

.bazar-modal-dialog .btn-close:hover,
#bazarAssignModal .btn-close:hover,
#bazarWeeklyRoutineModal .btn-close:hover,
#bazarDayDetailsModal .btn-close:hover,
#bazarSwipeRequestModal .btn-close:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
  transform: rotate(90deg) scale(1.12);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
}

.bazar-modal-dialog .modal-body {
  padding: 18px 20px;
}

.bazar-modal-dialog .modal-actions {
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid #F1F5F9;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.bazar-weekly-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(240, 253, 244, 0.7) 100%);
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.bazar-weekly-banner-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bazar-weekly-banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bazar-weekly-banner-text {
  font-size: 0.78rem;
  color: #065F46;
  line-height: 1.35;
}

.bazar-weekly-banner-text strong {
  font-weight: 800;
  color: #047857;
}

.bazar-btn-swipe-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  background: #FFFFFF;
  border: 1.5px solid #059669;
  color: #059669;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.bazar-btn-swipe-all:hover {
  background: #059669;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
  transform: translateY(-1px);
}

#bazarWeeklyRoutineModal .bazar-modal-dialog {
  max-width: 540px !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#bazarWeeklyRoutineModal .modal-body {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 20px 18px !important;
  overflow: hidden !important;
}

#bazarWeeklyRoutineModal form#bazarWeeklyRoutineForm {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.bazar-weekly-routine-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  max-height: 48vh;
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 24px;
  margin-bottom: 4px;
}

.bazar-weekly-routine-grid::-webkit-scrollbar {
  width: 5px;
}

.bazar-weekly-routine-grid::-webkit-scrollbar-track {
  background: transparent;
}

.bazar-weekly-routine-grid::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 99px;
}

.bazar-weekly-routine-grid::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

.bazar-weekly-day-card {
  padding: 11px 14px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  transition: all 0.2s ease;
}

.bazar-weekly-day-card:hover {
  border-color: #6EE7B7;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.06);
}

.bazar-weekly-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bazar-weekly-day-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.bazar-weekly-count-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}

.bazar-weekly-count-tag.neutral {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #E2E8F0;
}

.bazar-weekly-count-tag.single {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

.bazar-btn-swipe-order {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bazar-btn-swipe-order:hover {
  background: #059669;
  color: #FFFFFF;
  border-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.2);
}

.bazar-weekly-day-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bazar-weekly-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.bazar-weekly-empty-text {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 500;
}

.bazar-weekly-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 3px 8px;
  transition: all 0.15s ease;
}

.bazar-weekly-member-chip:hover {
  border-color: #10B981;
  background: #F0FDF4;
}

.bazar-weekly-chip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #059669;
  color: #FFFFFF;
  font-size: 0.58rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bazar-weekly-chip-week-badge {
  background: #059669;
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.bazar-weekly-chip-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0F172A;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bazar-weekly-chip-remove {
  background: transparent;
  border: none;
  color: #94A3B8;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bazar-weekly-chip-remove:hover {
  background: #FEE2E2;
  color: #EF4444;
}

.bazar-weekly-add-select {
  border-radius: 8px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #059669 !important;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bazar-weekly-add-select:hover,
.bazar-weekly-add-select:focus {
  background: #ECFDF5 !important;
  border-color: #10B981 !important;
  color: #047857 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12) !important;
}

.bazar-day-modal-duty-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
}

.bazar-day-modal-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #059669;
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.bazar-day-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bazar-day-modal-duty-meta {
  flex: 1;
}

.bazar-day-modal-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #059669;
  display: block;
}

.bazar-day-modal-name {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 1px 0;
}

.bazar-day-modal-note {
  font-size: 0.78rem;
  color: #64748B;
  font-style: italic;
  margin: 2px 0 0;
}

.bazar-day-modal-duty-actions {
  display: flex;
  gap: 6px;
}

.bazar-day-modal-empty-duty {
  padding: 14px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 600;
}

.bazar-day-modal-bazar-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  margin-bottom: 10px;
}

.bazar-day-entries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bazar-day-entry-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #F1F5F9;
  background: #FFFFFF;
}

.bazar-day-entry-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0F172A;
  display: block;
}

.bazar-day-entry-shopper {
  font-size: 0.75rem;
  color: #64748B;
}

.bazar-day-entry-amt {
  color: #059669;
  font-family: 'Space Grotesk', monospace, sans-serif;
  font-weight: 800;
}

.bazar-day-modal-no-bazar {
  text-align: center;
  padding: 16px;
  color: #94A3B8;
  font-size: 0.85rem;
}

/* Responsive adjustments */
@media (max-width: 1180px) {
  .bazar-calendar-layout-grid {
    grid-template-columns: 1fr;
  }

  .bazar-duty-fairness-card {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  .bazar-stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .today-duty-wrapper {
    grid-column: span 2;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .bazar-stats-row {
    grid-template-columns: 1fr;
  }

  .today-duty-wrapper {
    grid-column: span 1;
  }

  .bazar-calendar-main-card {
    padding: 10px;
  }

  .bazar-calendar-grid {
    gap: 3px;
  }

  .bazar-cal-cell {
    min-height: 58px;
    padding: 3px;
    border-radius: 6px;
  }

  .bazar-cal-header-cell {
    font-size: 0.68rem;
    padding: 4px 2px;
  }

  .bazar-cal-date-num {
    font-size: 0.72rem;
  }

  .bazar-cal-cost-badge {
    font-size: 0.58rem;
    padding: 0 3px;
  }

  .bazar-cal-unassigned-text {
    display: none;
  }

  .bazar-cal-status-indicator span {
    font-size: 0.55rem;
  }

  .bazar-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .bazar-date-selector-group {
    width: 100%;
    justify-content: space-between;
  }
}

/* ============================================================
   CUSTOM PAYMENT ACTION CONFIRMATION MODAL (Reject / Approve)
   ============================================================ */
.ledger-confirm-overlay {
  z-index: 100050 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.ledger-confirm-action-dialog {
  max-width: 390px !important;
  width: 90% !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px 22px 20px !important;
  text-align: center !important;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  animation: ledgerConfirmPopIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  border: none !important;
  box-sizing: border-box !important;
}

@keyframes ledgerConfirmPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ledger-confirm-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ledger-confirm-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.ledger-confirm-icon-ring.reject {
  background: #FEF2F2;
  color: #DC2626;
  border: 4px solid #FEE2E2;
}

.ledger-confirm-icon-ring.approve {
  background: #ECFDF5;
  color: #059669;
  border: 4px solid #D1FAE5;
}

.ledger-confirm-title {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.ledger-confirm-msg {
  font-size: 0.82rem !important;
  color: #64748B !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
  max-width: 320px;
}

.ledger-confirm-details-card {
  width: 100%;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ledger-confirm-card-top {
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF2F6;
}

.ledger-confirm-card-bottom {
  padding-top: 2px;
}

.ledger-confirm-meta-lbl {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  flex-shrink: 0;
}

.ledger-confirm-meta-val {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.ledger-confirm-type-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0;
}

.ledger-confirm-type-badge.bill {
  background: #EEF2FF !important;
  color: #4F46E5 !important;
}

.ledger-confirm-type-badge.deposit {
  background: #ECFDF5 !important;
  color: #059669 !important;
}

.ledger-confirm-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.ledger-confirm-btn-cancel {
  width: 100% !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.ledger-confirm-btn-cancel:hover {
  background: #E2E8F0 !important;
  color: #1E293B !important;
}

.ledger-confirm-btn-action {
  width: 100% !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.ledger-confirm-btn-action.reject {
  background: #DC2626 !important;
  border: 1px solid #DC2626 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

.ledger-confirm-btn-action.reject:hover {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35) !important;
  transform: translateY(-1px);
}

.ledger-confirm-btn-action.approve {
  background: #059669 !important;
  border: 1px solid #059669 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

.ledger-confirm-btn-action.approve:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
  transform: translateY(-1px);
}

.ledger-confirm-btn-action.approve.bill {
  background: #4F46E5 !important;
  border: 1px solid #4F46E5 !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25) !important;
}

.ledger-confirm-btn-action.approve.bill:hover {
  background: #4338CA !important;
  border-color: #4338CA !important;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35) !important;
}

.ledger-confirm-btn-action.approve.deposit {
  background: #059669 !important;
  border: 1px solid #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
}

.ledger-confirm-btn-action.approve.deposit:hover {
  background: #047857 !important;
  border-color: #047857 !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
}

/* Previous Activity Circular Status Badges */
.ledger-activity-circle-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ledger-activity-circle-badge:hover {
  transform: scale(1.1);
}

.ledger-activity-circle-badge.approved {
  background: #DCFCE7 !important;
  color: #16A34A !important;
  border: 1px solid #BBF7D0 !important;
}

.ledger-activity-circle-badge.rejected {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  border: 1px solid #FECACA !important;
}

/* Previous Activity Circular Pagination Controls */
.ledger-activity-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 6px 4px 2px;
  border-top: 1px dashed #E2E8F0;
}

.ledger-page-circle-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.16s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
}

.ledger-page-circle-btn:hover:not(:disabled) {
  background: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
  transform: scale(1.08) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
}

.ledger-page-circle-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

.ledger-page-counter-text {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #64748B !important;
  letter-spacing: 0.02em !important;
}

/* ============================================================
   Meal Configuration Number Inputs - Remove Spinners
   ============================================================ */
#settingsDueLimitAmount::-webkit-inner-spin-button,
#settingsDueLimitAmount::-webkit-outer-spin-button,
.settings-rate-num-input::-webkit-inner-spin-button,
.settings-rate-num-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

#settingsDueLimitAmount,
.settings-rate-num-input {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* ============================================================
   Bazar Modal (Log Bazar / Add Bazar) Redesign
   ============================================================ */
.bazar-field-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
  user-select: none;
}

.bazar-label-opt {
  font-weight: 400;
  color: #94A3B8;
  font-size: 0.82rem;
}

/* Date Picker Wrap */
.bazar-date-picker-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1.5px solid #D1E7DD;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.2s ease;
  overflow: hidden;
}

.bazar-date-picker-wrap:hover {
  border-color: #10B981;
}

.bazar-date-display-text {
  font-size: 0.94rem;
  font-weight: 500;
  color: #1E293B;
  pointer-events: none;
  user-select: none;
}

.bazar-date-icon {
  color: #0F172A;
  pointer-events: none;
  flex-shrink: 0;
}

.bazar-date-native-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* Shopper Dropdown Select Box */
.bazar-select-box {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1.5px solid #D1E7DD;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.bazar-select-box:hover,
.custom-dropdown.active .bazar-select-box {
  border-color: #10B981;
}

.bazar-dropdown-chevron {
  color: #64748B;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.custom-dropdown.active .bazar-dropdown-chevron {
  transform: rotate(180deg);
}

/* Total Amount Input */
.bazar-amount-input-group {
  display: flex;
  align-items: stretch;
  height: 48px;
  background: #FFFFFF;
  border: 1.5px solid #D1E7DD;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.bazar-amount-input-group:focus-within {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.bazar-currency-symbol {
  width: 44px;
  background: #EEF5F0;
  color: #475569;
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #D1E7DD;
  flex-shrink: 0;
  user-select: none;
}

.bazar-amount-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  padding: 0 14px !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: #1E293B !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.bazar-amount-input::-webkit-inner-spin-button,
.bazar-amount-input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

.bazar-amount-input::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

/* Items Bought Textarea */
.bazar-textarea {
  width: 100%;
  border: 1.5px solid #D1E7DD;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #1E293B;
  background: #FFFFFF;
  resize: none;
  min-height: 90px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
  font-family: inherit;
}

.bazar-textarea:focus {
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.bazar-textarea::placeholder {
  color: #94A3B8;
  font-weight: 400;
}

/* Submit Button */
.bazar-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 700;
  border: none;
  outline: none;
  background: #10B981;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bazar-submit-btn:hover:not(:disabled) {
  background: #059669;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.bazar-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.bazar-submit-btn:disabled {
  background: #E2E8F0 !important;
  color: #94A3B8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: none !important;
  border: 1px solid #CBD5E1 !important;
}

/* ============================================================ */
/* BAZAR ROSTER SWIPE SUBPAGE STYLES — Premium Emerald Edition  */
/* ============================================================ */

/* --- Duty card: premium gradient + glass feel --- */
.br-swipe-next-card {
  position: relative;
  background: linear-gradient(135deg, #064E3B 0%, #065F46 40%, #047857 100%);
  border: 1.5px solid rgba(167, 243, 208, 0.18);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(5, 150, 105, 0.28),
    0 1px 3px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(167, 243, 208, 0.10);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Subtle decorative circle glows inside the card */
.br-swipe-next-card::before {
  content: '';
  position: absolute;
  top: -28px;
  right: -20px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.20) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.br-swipe-next-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 30px;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.br-swipe-next-card:hover {
  box-shadow:
    0 8px 28px rgba(5, 150, 105, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(167, 243, 208, 0.12);
  transform: translateY(-1px);
}

/* No-duty fallback card — stays light/muted */
.br-swipe-next-card.no-duty {
  background: #FFFFFF;
  border: 1.5px solid #D1FAE5;
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.07);
  padding: 14px 16px;
  border-radius: 16px;
}

.br-swipe-next-card.no-duty::before,
.br-swipe-next-card.no-duty::after {
  display: none;
}

.br-no-duty-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.br-no-duty-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.br-no-duty-content {
  flex: 1;
  min-width: 0;
}

.br-no-duty-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #065F46;
  margin: 0 0 2px 0;
}

.br-no-duty-desc {
  font-size: 0.76rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.35;
}

/* --- Left section: date badge + info --- */
.br-swipe-next-left {
  display: flex;
  align-items: center;
  gap: 13px;
  position: relative;
  z-index: 1;
}

/* Date badge — frosted glass over the dark gradient */
.br-swipe-date-badge {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(167, 243, 208, 0.35);
  color: #FFFFFF;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition: transform 0.2s ease;
}

.br-swipe-next-card:hover .br-swipe-date-badge {
  transform: scale(1.04);
}

.br-swipe-date-badge .day-name {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6EE7B7;
  line-height: 1;
  margin-bottom: 2px;
}

.br-swipe-date-badge .day-num {
  font-size: 1.28rem;
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Info text — white on dark gradient */
.br-swipe-next-info {
  position: relative;
  z-index: 1;
}

.br-swipe-next-info h4 {
  font-size: 0.97rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.br-swipe-next-info p {
  font-size: 0.70rem;
  color: #6EE7B7;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* --- Request Swipe button — crisp pill with shimmer --- */
.br-btn-request-swipe {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  border: 1.5px solid rgba(167, 243, 208, 0.40);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shimmer sweep on hover */
.br-btn-request-swipe::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}

.br-btn-request-swipe:hover::before {
  left: 135%;
}

.br-btn-request-swipe:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(167, 243, 208, 0.65);
  transform: translateY(-1px);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.br-btn-request-swipe:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.br-swipe-section-wrapper {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.br-swipe-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.br-swipe-section-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.br-swipe-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.br-swipe-badge.neutral {
  background: #F1F5F9;
  color: #64748B;
  border-color: #E2E8F0;
}

.br-swipe-requests-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Signature Messliner Ultra-Compact Mini Card for Bazar Swipes */
.br-mini-card-wrap {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 13px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.br-mini-card-wrap:hover {
  border-color: #CBD5E1;
  box-shadow: 0 3px 10px -2px rgba(15, 23, 42, 0.05);
}

/* Top Member Banner */
.br-mini-member-banner {
  border-radius: 8px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.br-mini-member-banner.incoming {
  background: #ECFDF5;
  border: 1px solid rgba(5, 150, 105, 0.15);
}

.br-mini-member-banner.outgoing {
  background: #ECFDF5;
  border: 1px solid rgba(5, 150, 105, 0.15);
}

.br-mini-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.br-mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #D1FAE5;
  color: #059669;
}

.br-mini-user-info {
  min-width: 0;
}

.br-mini-user-name {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.2;
  word-break: break-word;
}

/* Mini Details Box with Row Icons */
.br-mini-details-box {
  background: #FFFFFF;
  border: 1px solid #F1F5F9;
  border-radius: 8px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
}

.br-mini-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4.5px 0;
}

.br-mini-detail-row:not(:last-child) {
  border-bottom: 1px solid #F8FAFC;
}

.br-mini-row-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.br-mini-icon-sq {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #F1F5F9;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.br-mini-row-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #475569;
}

.br-mini-row-value {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0F172A;
  text-align: right;
  word-break: break-word;
}

.br-mini-row-value.date-badge {
  background: #F8FAFC;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid #E2E8F0;
  font-size: 0.72rem;
}

.br-mini-status-badge {
  font-size: 0.74rem;
  font-weight: 800;
  color: #059669;
}

.br-mini-status-badge.declined {
  color: #DC2626;
}

/* Full Width Red Cancel Button */
.br-mini-btn-cancel-req {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.br-mini-btn-cancel-req:hover {
  background: #FEE2E2;
  border-color: #F87171;
  color: #B91C1C;
}

/* Incoming Dual Actions */
.br-mini-dual-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.br-mini-btn-accept {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #059669;
  color: #FFFFFF;
  border: 1px solid #059669;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease;
}

.br-mini-btn-accept:hover {
  background: #047857;
  border-color: #047857;
}

.br-mini-btn-decline {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #FEF2F2;
  color: #DC2626;
  border: 1px solid #FECACA;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.br-mini-btn-decline:hover {
  background: #FEE2E2;
  border-color: #F87171;
}

/* Empty State Card for Bazar Swipe */
.br-swipe-empty-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
}

.br-swipe-empty-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.br-swipe-empty-icon.neutral {
  background: #F1F5F9;
  color: #64748B;
  border: 1px solid #CBD5E1;
}

.br-swipe-empty-text {
  font-size: 0.82rem;
  font-weight: 500;
  color: #475569;
  margin: 0;
  line-height: 1.45;
  flex: 1;
}

/* ============================================================ */
/* BAZAR SWIPE REQUEST MODAL - FULL WIDTH & RESPONSIVE DESIGN   */
/* ============================================================ */
.br-swipe-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.br-swipe-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
}

.bazar-swipe-modal-dialog {
  width: 100% !important;
  max-width: 520px !important;
  background: #FFFFFF !important;
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
  overflow: hidden !important;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  margin: auto;
}

.br-swipe-modal-overlay.active .bazar-swipe-modal-dialog {
  transform: scale(1) translateY(0);
}

.br-swipe-modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
}

#bazarSwipeRequestModal .btn-close,
.br-swipe-modal-header .btn-close,
.bazar-swipe-modal-dialog .btn-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  outline: none;
  flex-shrink: 0;
}

#bazarSwipeRequestModal .btn-close:hover,
.br-swipe-modal-header .btn-close:hover,
.bazar-swipe-modal-dialog .btn-close:hover {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #DC2626;
  transform: rotate(90deg) scale(1.15);
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.22);
}

#bazarSwipeRequestModal .btn-close:active,
.br-swipe-modal-header .btn-close:active,
.bazar-swipe-modal-dialog .btn-close:active {
  transform: rotate(90deg) scale(0.95);
}

.br-swipe-modal-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.2px;
}

.br-swipe-modal-subtitle {
  font-size: 0.78rem;
  color: #64748B;
  margin: 2px 0 0;
}

.br-swipe-modal-body {
  padding: 20px 22px 22px;
  background: #FFFFFF;
}

.br-swipe-field-group {
  margin-bottom: 16px;
}

.br-swipe-field-group:last-of-type {
  margin-bottom: 20px;
}

.br-swipe-field-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.br-swipe-duty-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  font-weight: 700;
  color: #0F172A;
  font-size: 0.92rem;
}

.br-swipe-select,
.br-swipe-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0F172A;
  transition: all 0.2s ease;
  outline: none;
  font-family: inherit;
}

.br-swipe-select {
  cursor: pointer;
  appearance: auto;
}

.br-swipe-select:focus,
.br-swipe-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3.5px rgba(5, 150, 105, 0.15);
  background: #FFFFFF;
}

.br-swipe-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.br-swipe-btn-cancel {
  flex: 1;
  max-width: 130px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.br-swipe-btn-cancel:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.br-swipe-btn-submit {
  flex: 2;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.br-swipe-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45);
}

.br-swipe-btn-submit:active {
  transform: translateY(0);
}

/* Mobile full width / bottom-sheet styling */
@media (max-width: 640px) {
  .br-swipe-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .bazar-swipe-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .br-swipe-modal-header {
    padding: 18px 20px 14px;
  }

  .br-swipe-modal-body {
    padding: 16px 20px 20px;
  }
}

br-swipe-select:focus,
.br-swipe-input:focus {
  border-color: #059669;
  box-shadow: 0 0 0 3.5px rgba(5, 150, 105, 0.15);
  background: #FFFFFF;
}

.br-swipe-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #F1F5F9;
}

.br-swipe-btn-cancel {
  flex: 1;
  max-width: 130px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
  background: #FFFFFF;
  color: #475569;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.br-swipe-btn-cancel:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

.br-swipe-btn-submit {
  flex: 2;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.br-swipe-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.45);
}

.br-swipe-btn-submit:active {
  transform: translateY(0);
}

/* Mobile full width / bottom-sheet styling */
@media (max-width: 640px) {
  .br-swipe-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .bazar-swipe-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  .br-swipe-modal-header {
    padding: 18px 20px 14px;
  }

  .br-swipe-modal-body {
    padding: 16px 20px 20px;
  }
}

/* ============================================================
   MINIMAL NOTIFICATION SCREEN & DOUBLE-LINE CARDS
   ============================================================ */

/* Global container reset for Notifications Page */
body:has(#page-notifications.active) .content-area {
  padding: 0 !important;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
}

#page-notifications.page-section {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Screen Header: Flush to top, left and right with zero gap */
.notif-screen-header {
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
  padding: 10px 16px 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.notif-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 4px 0 10px;
}

.notif-circle-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #F1F5F9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E293B;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  flex-shrink: 0;
  z-index: 2;
}

.notif-circle-back-btn:hover {
  background: #F8FAFC;
  border-color: #E2E8F0;
  transform: scale(1.05);
}

.notif-circle-back-btn:active {
  transform: scale(0.96);
}

.notif-page-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: -0.01em;
  text-align: center;
  pointer-events: none;
}

.notif-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  z-index: 2;
}

.notif-action-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.notif-action-icon-btn:hover {
  background: #F1F5F9;
  color: #059669;
}

.notif-action-icon-btn.del:hover {
  background: #FEE2E2;
  color: #EF4444;
}

/* Horizontal Underline Tabs Row */
.notif-tabs-underline-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F1F5F9;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  gap: 4px;
}

.notif-tabs-underline-bar::-webkit-scrollbar {
  display: none;
}

.notif-u-tab {
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748B;
  padding: 10px 10px;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.notif-u-tab:hover {
  color: #1E293B;
}

.notif-u-tab.active {
  color: #059669;
  font-weight: 700;
  border-bottom-color: #059669;
}

/* Notification Feed List — Wide matching Home Page */
.notif-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 24px;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Swipe Wrapper for Mobile Swipe-to-Delete */
.notif-swipe-wrapper {
  position: relative;
  width: 100% !important;
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-sizing: border-box;
  flex-shrink: 0 !important;
  background: transparent;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.notif-swipe-wrapper.removing {
  opacity: 0 !important;
  transform: scale(0.92) translateX(-30px) !important;
  max-height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

/* Red Delete Action revealed behind card on swipe */
.notif-swipe-action-right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #EF4444 0%, #DC2626 100%);
  border-radius: 0 10px 10px 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: opacity 0.18s ease, visibility 0.18s ease, background 0.15s ease;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.notif-swipe-wrapper.is-swiping .notif-swipe-action-right,
.notif-swipe-wrapper.is-swiped-open .notif-swipe-action-right,
.notif-swipe-wrapper:has(.is-swiped-open) .notif-swipe-action-right,
.notif-swipe-wrapper:has(.is-swiping) .notif-swipe-action-right {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.notif-swipe-delete-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: inherit;
}

.notif-swipe-icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, background 0.15s ease;
}

.notif-swipe-delete-btn:active .notif-swipe-icon-circle {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.35);
}

.notif-swipe-delete-btn svg {
  stroke: #FFFFFF;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.notif-swipe-delete-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-transform: capitalize;
}

.notif-swipe-action-right:active {
  background: #B91C1C;
}

/* Clean Outline Card matching user's requested style */
.notif-m-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, border-radius 0.18s ease;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0 !important;
  min-height: 60px !important;
  width: 100% !important;
  touch-action: pan-y;
  will-change: transform;
}

/* Corner attachment & seamless curve fill when swiped or swiping */
.notif-swipe-wrapper.is-swiping .notif-m-card,
.notif-m-card.is-swiped-open {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right-color: transparent !important;
}

.notif-m-card:hover {
  background: #FAFAFA;
  border-color: #CBD5E1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.notif-m-card:active {
  transform: scale(0.99);
}

/* Clean unread outline style */
.notif-m-card.is-unread {
  background: #FFFFFF;
  border: 1.2px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.06);
}

.notif-m-card.is-unread:hover {
  background: #F0FDF4;
  border-color: rgba(16, 185, 129, 0.6);
}

.notif-m-card.removing {
  opacity: 0;
  transform: translateX(30px) scale(0.97);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: none;
  transition: all 0.22s ease-out;
}

/* Minimal Rounded Pastel Icon Box */
.notif-m-icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.notif-m-icon.theme-meal {
  background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
  color: #0d9488;
  border: 1px solid rgba(13, 148, 136, 0.22);
}

.notif-m-icon.theme-deposit {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.notif-m-icon.theme-bazar {
  background: #E0F2FE;
  color: #0284C7;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.notif-m-icon.theme-info {
  background: #F3E8FF;
  color: #7C3AED;
  border: 1px solid rgba(147, 51, 234, 0.2);
}

.notif-m-icon.theme-bell {
  background: #ECFDF5;
  color: #059669;
  border: none;
}

.notif-m-dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  border: 1.5px solid #FFFFFF;
}

/* Double-line Body */
.notif-m-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.notif-m-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Title: lighter font-weight (600 instead of 700) */
.notif-m-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: #1E293B;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.notif-m-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.notif-m-time {
  font-size: 0.74rem;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

.notif-m-del-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(148, 163, 184, 0.14);
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
  padding: 0;
  opacity: 0.95;
}

.notif-m-card:hover .notif-m-del-btn {
  opacity: 1;
  color: #0F172A;
  background: rgba(148, 163, 184, 0.26);
}

.notif-m-del-btn:hover {
  color: #DC2626 !important;
  background: #FEE2E2 !important;
  transform: scale(1.12);
}

.notif-m-subtitle {
  font-size: 0.78rem;
  font-weight: 400;
  color: #64748B;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* Empty State */
.notif-empty-state {
  text-align: center;
  padding: 48px 24px;
  background: #FFFFFF;
  border: 1.5px dashed #E2E8F0;
  border-radius: 18px;
  margin-top: 14px;
}

.notif-empty-ambient {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.notif-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.notif-empty-subtitle {
  font-size: 0.82rem;
  color: #64748B;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.45;
}

.notif-loading-card {
  text-align: center;
  padding: 36px 20px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid #F1F5F9;
}

.notif-loading-card p {
  margin-top: 10px;
  font-size: 0.82rem;
  color: #64748B;
}

/* Screen Wrapper — Full width on mobile, centered elevated card on desktop */
.notif-screen-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Desktop Notification Dropdown Popover (Attached to Bell Icon) */
.desktop-notif-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  width: 420px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 1050;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.desktop-notif-popover.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.desktop-notif-header {
  padding: 14px 16px 0;
  background: #FFFFFF;
  border-bottom: 1px solid #F1F5F9;
}

.desktop-notif-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.desktop-notif-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.desktop-notif-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desktop-notif-feed-list {
  max-height: 420px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}

.desktop-notif-feed-list::-webkit-scrollbar {
  width: 5px;
}

.desktop-notif-feed-list::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}

/* Responsive Viewports */
@media (min-width: 769px) {
  body:has(#page-notifications.active) .content-area {
    padding: 32px 24px 60px !important;
    background: #F8FAFC !important;
  }

  .notif-screen-wrapper {
    max-width: 700px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 24px -4px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    overflow: hidden;
  }

  .notif-screen-header {
    padding: 16px 20px 0 !important;
    border-bottom: 1px solid #F1F5F9;
  }

  .notif-tabs-underline-bar {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  .notif-feed-list {
    padding: 14px 18px 22px !important;
    max-width: 100% !important;
  }

  .notif-swipe-action-right {
    display: none !important;
  }

  .notif-m-del-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 768px) {
  body:has(#page-notifications.active) {
    background: #FFFFFF !important;
  }

  body:has(#page-notifications.active) .content-area {
    background: #FFFFFF !important;
    padding: 0 !important;
    padding-bottom: calc(var(--bottom-nav-height, 64px) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #page-notifications {
    background: #FFFFFF !important;
  }

  .notif-screen-wrapper {
    background: #FFFFFF !important;
  }

  .notif-screen-header {
    background: #FFFFFF !important;
    padding: 10px 14px 0 !important;
    border-bottom: 1px solid #F1F5F9;
  }

  /* List container: zero outline, clean spacing */
  .notif-feed-list {
    background: #FFFFFF !important;
    padding: 8px 14px 24px !important;
    gap: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Swipe wrapper: zero outline, rounded corners */
  .notif-swipe-wrapper {
    background: transparent !important;
    border-radius: 12px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .notif-swipe-wrapper.is-swiping,
  .notif-swipe-wrapper.is-swiped-open,
  .notif-swipe-wrapper:has(.notif-m-card.is-swiped-open) {
    background: #EF4444 !important;
  }

  /* Swipe action: hidden by default so no corner radius or red leaks out */
  .notif-swipe-action-right {
    display: flex !important;
    border-radius: 0 12px 12px 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, visibility 0.18s ease !important;
  }

  .notif-swipe-wrapper.is-swiping .notif-swipe-action-right,
  .notif-swipe-wrapper.is-swiped-open .notif-swipe-action-right,
  .notif-swipe-wrapper:has(.is-swiped-open) .notif-swipe-action-right,
  .notif-swipe-wrapper:has(.is-swiping) .notif-swipe-action-right {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .notif-m-del-btn {
    display: none !important;
  }

  /* Notification Card: No outline/border, soft corners, exact integer height to prevent subpixel issues */
  .notif-m-card {
    background: #FFFFFF !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    gap: 12px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    transition: background 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .notif-m-card:hover,
  .notif-m-card:active {
    background: #F8FAFC !important;
  }

  /* Thin subtle ash divider line: clean 1px hairline visible on every single notification */
  .notif-swipe-wrapper:not(:last-child) .notif-m-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px !important;
    background: #E2E8F0 !important;
    pointer-events: none !important;
  }

  /* Unread Card: Soft light green tint, cushioned spacing */
  .notif-m-card.is-unread {
    background: #F0FDF4 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    margin: 3px 0 !important;
  }

  .notif-swipe-wrapper:not(:last-child) .notif-m-card.is-unread::after {
    background: rgba(16, 185, 129, 0.25) !important;
  }

  .notif-m-card.is-unread:hover,
  .notif-m-card.is-unread:active {
    background: #DCFCE7 !important;
  }

  /* Notification Icon: Smaller circular badge with smooth borderless pastel background */
  .notif-m-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: #ECFDF5 !important;
    color: #059669 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Unread Icon: Green circular badge with emerald bell (no white bg) */
  .notif-m-card.is-unread .notif-m-icon {
    background: #DCFCE7 !important;
    color: #047857 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .notif-m-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* Hide small dot on mobile (unread state is indicated by the soft green card tint) */
  .notif-m-dot {
    display: none !important;
  }

  /* Content typography matching screenshot */
  .notif-m-body {
    flex: 1 !important;
    min-width: 0 !important;
    gap: 3px !important;
  }

  .notif-m-row-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .notif-m-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
  }

  .notif-m-time {
    font-size: 0.74rem !important;
    font-weight: 400 !important;
    color: #94A3B8 !important;
  }

  .notif-m-subtitle {
    font-size: 0.81rem !important;
    font-weight: 400 !important;
    color: #64748B !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }

  /* Dark theme overrides for mobile notifications */
  [data-theme="dark"] body:has(#page-notifications.active),
  body.dark-mode:has(#page-notifications.active),
  [data-theme="dark"] #page-notifications,
  body.dark-mode #page-notifications,
  [data-theme="dark"] .notif-screen-wrapper,
  body.dark-mode .notif-screen-wrapper,
  [data-theme="dark"] .notif-screen-header,
  body.dark-mode .notif-screen-header,
  [data-theme="dark"] .notif-feed-list,
  body.dark-mode .notif-feed-list {
    background: #0B132B !important;
  }

  [data-theme="dark"] .notif-m-card,
  body.dark-mode .notif-m-card {
    background: #111C44 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .notif-m-card.is-unread,
  body.dark-mode .notif-m-card.is-unread {
    background: rgba(16, 185, 129, 0.16) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .notif-swipe-wrapper:not(:last-child) .notif-m-card::after,
  body.dark-mode .notif-swipe-wrapper:not(:last-child) .notif-m-card::after {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  [data-theme="dark"] .notif-m-title,
  body.dark-mode .notif-m-title {
    color: #F8FAFC !important;
  }

  [data-theme="dark"] .notif-m-subtitle,
  body.dark-mode .notif-m-subtitle {
    color: #94A3B8 !important;
  }

  [data-theme="dark"] .notif-m-icon,
  body.dark-mode .notif-m-icon {
    background: rgba(16, 185, 129, 0.14) !important;
    color: #34D399 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  [data-theme="dark"] .notif-m-card.is-unread .notif-m-icon,
  body.dark-mode .notif-m-card.is-unread .notif-m-icon {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #34D399 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .desktop-notif-popover {
    display: none !important;
  }

  body:has(#page-notifications.active) .top-header {
    display: none !important;
  }
}

/* ========================================================
   MESSLINER — PROFILE PAGE REDESIGN (MATCHING USER UI)
   ======================================================== */

/* Hide Top Header when Profile page is active (Desktop & Mobile) */
body:has(#page-profile.active) .top-header {
  display: none !important;
}

body:has(#page-profile.active),
body:has(#page-profile.active) .content-area,
.content-area:has(#page-profile.active) {
  background-color: #f8fafc !important;
  background-image: none !important;
}

body:has(#page-profile.active) .content-area {
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
  padding-bottom: calc(var(--bottom-nav-height, 64px) + 32px + env(safe-area-inset-bottom, 14px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#page-profile.page-section {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 580px !important;
  width: 100% !important;
  background: #f8fafc !important;
  background-image: none !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

.profile-page-wrapper {
  max-width: 580px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px 24px !important;
  /* EXACT 16px matching Home page */
  box-sizing: border-box !important;
}

/* 1. Dedicated Profile Top Navigation Bar (Centered Title) */
.profile-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0 12px;
  min-height: 40px;
}

.profile-nav-back-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
}

.profile-nav-back-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1 !important;
  transform: translateY(-50%) scale(1.04);
}

.profile-nav-title {
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  text-align: center;
  letter-spacing: -0.015em;
}

/* 2. Centered Avatar & Identity Section (Mockup DL Style) */
.profile-identity-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2px 0 14px;
}

.profile-avatar-wrapper {
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
}

.profile-avatar-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(145deg, #064E3B 0%, #065F46 45%, #022C22 100%) !important;
  color: #FFFFFF !important;
  font-size: 1.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #10B981 !important;
  outline: none;
  box-shadow: 0 10px 24px -4px rgba(2, 44, 34, 0.45), 0 0 0 4px rgba(16, 185, 129, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.25) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  letter-spacing: 0.02em;
}

.profile-avatar-wrapper:hover .profile-avatar-circle {
  transform: scale(1.05);
  box-shadow: 0 14px 28px -4px rgba(2, 44, 34, 0.55), 0 0 0 5px rgba(16, 185, 129, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.35) !important;
}

.profile-avatar-edit-badge {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #022C22 !important;
  color: #34D399 !important;
  border: 2px solid #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.profile-avatar-wrapper:hover .profile-avatar-edit-badge {
  transform: scale(1.15);
  background: #064e3b !important;
  color: #FFFFFF !important;
}

.profile-member-fullname {
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 3px !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.profile-member-caption {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #64748B !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 3. Single Line Meals Stats Card */
.profile-meals-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px;
  padding: 12px 10px;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  display: flex;
  align-items: center;
  justify-content: space-around;
  outline: none !important;
}

.profile-meal-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.profile-meal-stat-num {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
}

.profile-meal-stat-label {
  font-size: 0.70rem;
  font-weight: 500;
  color: #64748B;
  margin-top: 2px;
  white-space: nowrap;
}

.profile-meal-stat-divider {
  width: 1px;
  height: 26px;
  background: #E2E8F0;
  flex-shrink: 0;
}

/* 4. Dining Information Card (Responsive 2 Columns with Refined Balanced Font) */
.profile-dining-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  outline: none !important;
}

.profile-section-title {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}

.profile-accent-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
}

.profile-accent-cell {
  border-left: 2px solid #10B981 !important;
  padding-left: 8px !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-accent-label {
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  color: #64748B !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.profile-accent-val {
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  line-height: 1.25;
  word-break: break-word;
}

#profileDiningJoinId {
  font-family: inherit !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.profile-accent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.profile-icon-copy-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #94A3B8;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
  flex-shrink: 0;
}

.profile-icon-copy-btn:hover {
  color: #10B981;
}

/* Responsive text switches for Profile items */
.profile-text-desktop {
  display: inline !important;
}

.profile-text-mobile {
  display: none !important;
}

@media (max-width: 768px) {
  .profile-text-desktop {
    display: none !important;
  }

  .profile-text-mobile {
    display: inline !important;
  }
}

/* 5. Mess Rules Card (Click to open full-screen modal) */
.profile-rules-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none !important;
}

.profile-rules-card:hover {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px);
}

.profile-rules-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-rules-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  background: #E8F8F2;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-rules-card-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.profile-rules-title {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

.profile-rules-sub {
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: #64748B !important;
  margin: 0 !important;
}

.profile-rules-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.profile-rules-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 99px;
  padding: 2px 8px;
}

/* 6. Outside Group Headers & Compact Menu Cards */
.profile-section-group {
  margin-bottom: 12px !important;
}

.profile-section-group:last-child {
  margin-bottom: 0 !important;
}

.profile-group-header {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #64748B !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 2px 5px !important;
  margin: 0 !important;
}

.profile-group-danger {
  color: #DC2626 !important;
}

.profile-menu-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 4px 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  outline: none !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.profile-menu-list {
  display: flex;
  flex-direction: column;
}

.profile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px !important;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease;
  gap: 10px;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  outline: none !important;
}

.profile-menu-row:not(:last-child) {
  border-bottom: 1px solid #F1F5F9;
}

.profile-menu-row:hover {
  background: #F8FAFC;
}

.profile-menu-row:active {
  background: #F1F5F9 !important;
  transform: scale(0.995);
}

.profile-menu-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-menu-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
  background: #E8F8F2;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-menu-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.profile-menu-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.profile-menu-title {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

.profile-menu-sub {
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: #64748B !important;
  margin: 0 !important;
}

.profile-menu-chevron {
  color: #94A3B8;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.profile-menu-row:hover .profile-menu-chevron {
  color: #059669;
  transform: translateX(2px);
}

/* Profile Notification Preferences Toggle Switch */
.profile-toggle-row {
  cursor: pointer;
  user-select: none;
  margin: 0;
}

/* Smooth transition on profile toggle icon */
.profile-toggle-row .profile-menu-icon {
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* OFF state: ash / muted gray icon (Desktop and Mobile) */
.profile-toggle-row:has(input:not(:checked)) .profile-menu-icon,
.profile-toggle-row.is-off .profile-menu-icon {
  background: #F1F5F9 !important;
  color: #94A3B8 !important;
  border-color: #E2E8F0 !important;
}

.profile-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.profile-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.profile-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E1;
  border-radius: 9999px;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  box-sizing: border-box;
}

.profile-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-toggle-switch input:checked+.profile-toggle-slider {
  background-color: #10B981;
}

.profile-toggle-switch input:checked+.profile-toggle-slider::before {
  transform: translateX(20px);
}

.profile-toggle-row:hover .profile-toggle-slider {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Dark Theme Harmonization */
body.dark-theme .profile-toggle-slider,
[data-theme="dark"] .profile-toggle-slider {
  background-color: #334155;
}

body.dark-theme .profile-toggle-switch input:checked+.profile-toggle-slider,
[data-theme="dark"] .profile-toggle-switch input:checked+.profile-toggle-slider {
  background-color: #10B981;
}

body.dark-theme .profile-toggle-slider::before,
[data-theme="dark"] .profile-toggle-slider::before {
  background-color: #F8FAFC;
}

body.dark-theme .profile-toggle-row:has(input:not(:checked)) .profile-menu-icon,
body.dark-theme .profile-toggle-row.is-off .profile-menu-icon,
[data-theme="dark"] .profile-toggle-row:has(input:not(:checked)) .profile-menu-icon,
[data-theme="dark"] .profile-toggle-row.is-off .profile-menu-icon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #64748B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure mobile toggle row subtitles strictly stay single-line without wrapping */
@media (max-width: 768px) {
  .profile-toggle-row .profile-menu-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .profile-toggle-row .profile-menu-text {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
  }

  .profile-toggle-row .profile-menu-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .profile-toggle-row .profile-menu-sub {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

.profile-danger-card {
  border-color: #FEE2E2 !important;
}

.profile-danger-icon {
  background: #FEE2E2;
  color: #DC2626;
}

.profile-danger-title {
  color: #DC2626 !important;
}

.profile-danger-row:hover .profile-menu-chevron {
  color: #DC2626;
}

.profile-copy-btn {
  background: #F8FAFC;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.profile-copy-btn:hover {
  background: #F1F5F9;
  border-color: #CBD5E1 !important;
}

.profile-copy-btn.copied {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #059669 !important;
  font-weight: 700 !important;
}

/* Base / Mobile Containers for Profile (Zero visual change on mobile) */
.profile-top-hero-card {
  display: contents;
}

.profile-hero-right-group {
  display: contents;
}

.profile-switch-area-wrapper {
  display: flex;
  width: 100%;
}

.profile-switch-card {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 10px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: all 0.2s ease;
}

.profile-switch-card:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
}

.profile-switch-icon-plate {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.profile-switch-card.mode-to-manager .profile-switch-icon-plate {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
  color: #2563EB;
}

.profile-switch-card-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0F172A;
  margin: 0;
  white-space: nowrap;
}

.profile-identity-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-desktop-grid {
  display: contents;
}

.profile-desktop-col {
  display: contents;
}

.profile-desktop-full {
  display: contents;
}

.profile-danger-full-width {
  display: block;
  width: 100%;
}

.profile-danger-action {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-danger-badge {
  display: none !important;
}

@media (max-width: 768px) {
  .profile-desktop-col:first-child>.profile-section-group:last-child {
    margin-bottom: 12px !important;
  }

  .profile-danger-full-width .profile-section-group,
  .profile-group-danger-zone {
    padding-top: 14px !important;
  }
}

/* Unified Signature Emerald Icon Badges for all Profile Menus */
.profile-icon-blue,
.profile-icon-emerald,
.profile-icon-amber,
.profile-icon-purple,
.profile-icon-slate,
.profile-menu-icon,
.profile-rules-icon {
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  color: #059669 !important;
}

.profile-danger-icon {
  background: #FEE2E2 !important;
  border: 1px solid #FECACA !important;
  color: #DC2626 !important;
}

.profile-pro-header {
  display: none;
}

/* ============================================================ */
/* DESKTOP PROFILE VIEW (Matching Reference: Mint Hero & Full Width) */
/* ============================================================ */
@media (min-width: 769px) {
  #page-profile.page-section {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 28px 48px !important;
    box-sizing: border-box !important;
  }

  .profile-page-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hide mobile-specific navigation bar on desktop */
  .profile-nav-bar {
    display: none !important;
  }

  /* 1. Full-Width Emerald Forest Hero Card (Matching Meal Card & Balance Card Style) */
  .profile-top-hero-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(160deg, #06281b 0%, #0d3b26 50%, #051a12 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.22) !important;
    border-radius: 22px !important;
    padding: 24px 32px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 16px 36px -8px rgba(4, 32, 22, 0.35), 0 0 0 1px rgba(16, 185, 129, 0.12) !important;
    gap: 24px !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ambient glowing orbs matching meal card */
  .profile-top-hero-card::before {
    content: '' !important;
    position: absolute !important;
    top: -40px !important;
    right: -30px !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(5, 150, 105, 0.08) 50%, transparent 70%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  .profile-top-hero-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: -40px !important;
    left: -30px !important;
    width: 180px !important;
    height: 180px !important;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.20) 0%, transparent 65%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
  }

  .profile-identity-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 20px !important;
    padding: 0 !important;
    flex: 1;
    min-width: 0;
    position: relative !important;
    z-index: 2 !important;
  }

  .profile-avatar-wrapper {
    margin-bottom: 0 !important;
    flex-shrink: 0;
  }

  .profile-avatar-circle {
    width: 76px !important;
    height: 76px !important;
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%) !important;
    color: #FFFFFF !important;
    border: 3px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
    text-shadow: none !important;
  }

  .profile-avatar-edit-badge {
    width: 24px !important;
    height: 24px !important;
    background: #059669 !important;
    border: 2px solid #06281b !important;
    color: #FFFFFF !important;
  }

  .profile-identity-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px;
    min-width: 0;
  }

  .profile-member-fullname {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }

  .profile-member-caption {
    font-size: 0.90rem !important;
    font-weight: 500 !important;
    color: #A7F3D0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* Embedded Glassmorphic Meal Stats Card on Top Right */
  .profile-meals-card {
    position: relative !important;
    z-index: 2 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 18px !important;
    padding: 14px 28px !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
  }

  .profile-meal-stat-col {
    padding: 0 6px;
    text-align: center;
  }

  .profile-meal-stat-num {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: #34D399 !important;
    line-height: 1.15;
    text-align: center;
  }

  .profile-meal-stat-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
    margin-top: 4px !important;
    text-align: center;
  }

  .profile-meal-stat-divider {
    height: 32px !important;
    background: rgba(255, 255, 255, 0.18) !important;
  }

  /* Embedded Glassmorphic Mode Switcher Card Beside Meal Stats Card */
  .profile-hero-right-group {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
  }

  .profile-switch-area-wrapper {
    display: flex !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
  }

  .profile-switch-card {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: auto !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 18px !important;
    padding: 12px 20px !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    text-decoration: none !important;
    min-width: 92px !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease !important;
  }

  .profile-switch-card:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
  }

  .profile-switch-card:active {
    transform: translateY(0) scale(0.97) !important;
  }

  .profile-switch-icon-plate {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(52, 211, 153, 0.18) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #34D399 !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease !important;
  }

  .profile-switch-card.mode-to-manager .profile-switch-icon-plate {
    background: rgba(56, 189, 248, 0.18) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #38BDF8 !important;
  }

  .profile-switch-card:hover .profile-switch-icon-plate {
    background: rgba(52, 211, 153, 0.28) !important;
    border-color: rgba(52, 211, 153, 0.6) !important;
    color: #6EE7B7 !important;
    transform: rotate(180deg) !important;
  }

  .profile-switch-card.mode-to-manager:hover .profile-switch-icon-plate {
    background: rgba(56, 189, 248, 0.28) !important;
    border-color: rgba(56, 189, 248, 0.6) !important;
    color: #7DD3FC !important;
    transform: rotate(180deg) !important;
  }

  .profile-switch-card-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #CBD5E1 !important;
    margin-top: 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    transition: color 0.2s ease !important;
  }

  .profile-switch-card:hover .profile-switch-card-label {
    color: #FFFFFF !important;
  }

  /* 2. Desktop 2-Column Grid (Full Width, Mobile-Identical Elements) */
  .profile-desktop-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .profile-desktop-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    min-width: 0 !important;
  }

  /* Full Width Danger Zone Section on Desktop */
  .profile-danger-full-width,
  .profile-desktop-full {
    width: 100% !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
  }

  .profile-section-group {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* Clean Native Section Headers on Desktop */
  .profile-group-header {
    display: block !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 10px 2px !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
  }

  .profile-group-danger {
    color: #DC2626 !important;
  }

  /* Elevated Native Cards on Desktop */
  .profile-dining-card,
  .profile-rules-card,
  .profile-menu-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 18px !important;
    padding: 20px 22px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    margin: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .profile-dining-card:hover,
  .profile-rules-card:hover,
  .profile-menu-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  }

  /* Dining Grid Enlarged on Desktop */
  .profile-accent-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }

  .profile-accent-cell {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 3px solid #10B981 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    transition: background 0.15s ease, border-color 0.15s ease;
  }

  .profile-accent-cell:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
  }

  /* Refined, non-thick label and values for Dining Information */
  .profile-accent-label {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    color: #64748B !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  .profile-accent-val {
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    word-break: break-word !important;
  }

  #profileDiningJoinId {
    font-size: 0.94rem !important;
    font-weight: 600 !important;
  }

  /* Mess Rules Card on Desktop */
  .profile-rules-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    padding: 16px 20px !important;
  }

  .profile-rules-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .profile-rules-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .profile-rules-title {
    font-size: 0.96rem !important;
    font-weight: 650 !important;
    color: #0F172A !important;
  }

  .profile-rules-sub {
    font-size: 0.82rem !important;
    color: #64748B !important;
    margin-top: 2px !important;
  }

  .profile-rules-badge {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    background: #ECFDF5 !important;
    color: #059669 !important;
    border: 1px solid #A7F3D0 !important;
  }

  /* Menu Rows on Desktop */
  .profile-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .profile-menu-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: #F8FAFC !important;
    border: 1px solid #F1F5F9 !important;
    border-radius: 12px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    outline: none !important;
  }

  .profile-menu-row:hover {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
  }

  .profile-menu-row:active {
    background: #E2E8F0 !important;
    transform: scale(0.995);
  }

  .profile-menu-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .profile-menu-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .profile-menu-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    margin: 0 0 2px 0 !important;
  }

  .profile-menu-sub {
    font-size: 0.82rem !important;
    color: #64748B !important;
    margin: 0 !important;
  }

  .profile-menu-sub-nowrap {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .profile-copy-btn {
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0F172A !important;
    cursor: pointer !important;
  }

  /* Full Width Danger Card on Desktop */
  .profile-danger-card {
    background: #FFFDFD !important;
    border: 1.5px solid #FECACA !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.04) !important;
    padding: 16px 22px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
  }

  .profile-danger-card:hover {
    background: #FEF2F2 !important;
    border-color: #F87171 !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.08) !important;
  }

  .profile-danger-row {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    cursor: pointer !important;
  }

  .profile-danger-row:hover {
    background: transparent !important;
  }

  .profile-danger-icon {
    background: #FEE2E2 !important;
    border: 1px solid #FECACA !important;
    color: #DC2626 !important;
  }

  .profile-danger-title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #DC2626 !important;
    margin: 0 0 2px 0 !important;
  }

  .profile-danger-sub {
    font-size: 0.82rem !important;
    color: #991B1B !important;
    margin: 0 !important;
  }

  .profile-danger-action {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  .profile-danger-badge {
    display: inline-flex !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 8px !important;
    background: #FEE2E2 !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
  }

  .profile-danger-card:hover .profile-menu-chevron {
    color: #DC2626 !important;
    transform: translateX(2px) !important;
  }
}

/* 7. Mess Rules Full Screen / Modal Styles */
.mess-rules-modal-content {
  max-width: 520px;
  width: 92%;
  max-height: 88vh;
  border-radius: 20px;
  background: #ffffff;
  padding: 0;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mess-rules-mobile-topbar {
  display: none;
}

.mess-rules-modal-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid #F1F5F9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  background: #FFFFFF;
  flex-shrink: 0;
}

.mess-rules-badge-pill {
  font-size: 0.65rem;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 2px 8px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}

.mess-rules-modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px;
  letter-spacing: -0.015em;
}

.mess-rules-modal-sub {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
}

.mess-rules-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.mess-rules-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

.mess-rules-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}

/* Onboarding style rules list */
#messRulesModal .join-rules-wrapper {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

#messRulesModal .join-rules-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

#messRulesModal .rule-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 1px 0 !important;
}

#messRulesModal .rule-dot {
  width: 5px !important;
  height: 5px !important;
  min-width: 5px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}

#messRulesModal .rule-text {
  font-size: 0.86rem !important;
  color: #334155 !important;
  line-height: 1.40 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-family: 'SolaimanLipi', 'Kalpurush', 'Noto Sans Bengali', 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
  word-break: break-word !important;
}

/* In-Body Title Banner for Mess Rules (Minimal Ash B&W Style) */
.mess-rules-body-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  flex-shrink: 0 !important;
}

.mess-rules-banner-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.mess-rules-banner-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.mess-rules-banner-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
  gap: 2px !important;
}

.mess-rules-banner-tag {
  display: none !important;
}

.mess-rules-banner-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mess-rules-banner-sub {
  font-size: 0.76rem !important;
  color: #64748B !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 769px) {
  .mess-rules-body-header {
    display: none !important;
  }
}

.mess-rules-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #F1F5F9;
  background: #FFFFFF;
  flex-shrink: 0;
}

.mess-rules-confirm-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  background: #059669;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mess-rules-confirm-btn:hover {
  background: #047857;
}

/* ============================================================
   MESS RULES (Mobile Full Page View)
   ============================================================ */
@media (max-width: 768px) {
  #messRulesModal.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 10050 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #messRulesModal.modal-overlay.active {
    display: flex !important;
    flex-direction: column !important;
  }

  #messRulesModal .mess-rules-modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .mess-rules-mobile-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: max(14px, env(safe-area-inset-top, 14px)) 16px 14px 16px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #F1F5F9 !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
  }

  .mess-rules-back-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
  }

  .mess-rules-back-btn:active {
    background: #E2E8F0 !important;
  }

  .mess-rules-mobile-page-title {
    font-size: 1.10rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 !important;
    letter-spacing: -0.015em !important;
  }

  .mess-rules-modal-header {
    display: none !important;
  }

  .mess-rules-modal-footer {
    display: none !important;
  }

  .mess-rules-modal-body {
    background: #ffffff !important;
    padding: 14px 14px max(24px, env(safe-area-inset-bottom, 24px)) 14px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  #messRulesModal .join-rules-wrapper {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px 14px !important;
    box-sizing: border-box !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  #messRulesModal .join-rules-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }

  #messRulesModal .rule-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 1px 0 !important;
  }

  #messRulesModal .rule-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
  }

  #messRulesModal .rule-text {
    font-size: 0.86rem !important;
    color: #334155 !important;
    line-height: 1.40 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-family: 'SolaimanLipi', 'Kalpurush', 'Noto Sans Bengali', 'Hind Siliguri', 'Plus Jakarta Sans', sans-serif !important;
    word-break: break-word !important;
  }
}

/* Dark Theme Support */
body.dark-theme #messRulesModal.modal-overlay,
[data-theme="dark"] #messRulesModal.modal-overlay,
body.dark-theme #messRulesModal .mess-rules-modal-content,
[data-theme="dark"] #messRulesModal .mess-rules-modal-content,
body.dark-theme .mess-rules-mobile-topbar,
[data-theme="dark"] .mess-rules-mobile-topbar,
body.dark-theme .mess-rules-modal-header,
[data-theme="dark"] .mess-rules-modal-header,
body.dark-theme .mess-rules-modal-body,
[data-theme="dark"] .mess-rules-modal-body,
body.dark-theme .mess-rules-modal-footer,
[data-theme="dark"] .mess-rules-modal-footer {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body.dark-theme .mess-rules-mobile-page-title,
[data-theme="dark"] .mess-rules-mobile-page-title,
body.dark-theme .mess-rules-modal-title,
[data-theme="dark"] .mess-rules-modal-title {
  color: #f8fafc !important;
}

body.dark-theme .mess-rules-modal-sub,
[data-theme="dark"] .mess-rules-modal-sub {
  color: #94A3B8 !important;
}

body.dark-theme .mess-rules-back-btn,
[data-theme="dark"] .mess-rules-back-btn,
body.dark-theme .mess-rules-close-btn,
[data-theme="dark"] .mess-rules-close-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.dark-theme #messRulesModal .join-rules-wrapper,
[data-theme="dark"] #messRulesModal .join-rules-wrapper {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border-color: #334155 !important;
}

body.dark-theme #messRulesModal .rule-text,
[data-theme="dark"] #messRulesModal .rule-text {
  color: #e2e8f0 !important;
}

body.dark-theme .mess-rules-body-header,
[data-theme="dark"] .mess-rules-body-header {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

body.dark-theme .mess-rules-banner-icon,
[data-theme="dark"] .mess-rules-banner-icon {
  background: #0f172a !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
  box-shadow: none !important;
}

body.dark-theme .mess-rules-banner-tag,
[data-theme="dark"] .mess-rules-banner-tag {
  display: none !important;
}

body.dark-theme .mess-rules-banner-title,
[data-theme="dark"] .mess-rules-banner-title {
  color: #F8FAFC !important;
}

body.dark-theme .mess-rules-banner-sub,
[data-theme="dark"] .mess-rules-banner-sub {
  color: #94A3B8 !important;
}

/* ============================================================
   CONTACT SUPPORT MODAL (Desktop Dialog & Mobile Bottom Sheet)
   ============================================================ */
.support-modal-dialog {
  max-width: 440px;
  width: 92%;
  border-radius: 22px;
  background: #ffffff;
  padding: 24px 22px 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  position: relative;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

.support-modal-drag-indicator {
  display: none;
}

.support-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  z-index: 5;
}

.support-modal-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

.support-modal-header {
  text-align: center;
  margin-bottom: 18px;
}

.support-header-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.support-header-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.support-header-sub {
  font-size: 0.83rem;
  color: #64748B;
  margin: 0;
}

.support-channels-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.support-channel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
}

.support-card-report:hover {
  border-color: #7C3AED;
  background: #F5F3FF;
}

.support-card-wa:hover {
  border-color: #25D366;
  background: #F0FDF4;
}

.support-card-blue:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}

.support-channel-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.support-channel-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-channel-icon-box.icon-purple {
  background: #EDE9FE;
  color: #7C3AED;
  box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.25);
}

.support-channel-icon-box.icon-green {
  background: #DCFCE7;
  color: #15803D;
}

.support-channel-icon-box.icon-blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.support-channel-text {
  display: flex;
  flex-direction: column;
}

.support-channel-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.support-channel-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F172A;
}

.support-badge-online {
  font-size: 0.68rem;
  font-weight: 700;
  color: #15803D;
  background: #DCFCE7;
  padding: 1px 6px;
  border-radius: 99px;
}

.support-channel-sub {
  font-size: 0.76rem;
  color: #64748B;
}

.support-channel-chevron {
  flex-shrink: 0;
}

.support-email-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support-email-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-email-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #ECFDF5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-email-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.support-email-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0F172A;
  font-family: monospace;
}

.support-copy-btn {
  background: #ffffff;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.support-copy-btn:hover {
  border-color: #059669;
  color: #059669;
}

.support-actions-row {
  display: flex;
  gap: 10px;
}

.support-btn-close {
  flex: 1;
  height: 40px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.support-btn-close:hover {
  background: #E2E8F0;
}

.support-btn-help {
  flex: 1.3;
  height: 40px;
  border-radius: 12px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.support-btn-help:hover {
  background: #D1FAE5;
}

/* Mobile Support Bottom Popup Sheet */
@media (max-width: 768px) {
  #supportModal.modal-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10010 !important;
  }

  .support-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 8px 16px max(16px, env(safe-area-inset-bottom, 16px)) 16px !important;
    margin: 0 !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18) !important;
    max-height: 85vh !important;
    transform: translateY(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #supportModal.modal-overlay.active .support-modal-dialog {
    transform: translateY(0) !important;
  }

  .support-modal-drag-indicator {
    display: block !important;
    width: 38px !important;
    height: 4px !important;
    background: #CBD5E1 !important;
    border-radius: 99px !important;
    margin: 4px auto 10px auto !important;
  }

  .support-modal-close-btn {
    top: 12px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.80rem !important;
  }

  .support-modal-header {
    margin-bottom: 12px !important;
  }

  .support-header-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    margin-bottom: 5px !important;
  }

  .support-header-icon-box svg {
    width: 16px !important;
    height: 16px !important;
  }

  .support-header-title {
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
  }

  .support-header-sub {
    font-size: 0.72rem !important;
    font-weight: 400 !important;
    color: #64748B !important;
  }

  .support-channels-list {
    gap: 7px !important;
    margin-bottom: 10px !important;
  }

  /* Compact Card Heights on Mobile */
  .support-channel-card {
    padding: 8px 12px !important;
    border-radius: 11px !important;
    border-width: 1px !important;
  }

  .support-channel-left {
    gap: 9px !important;
  }

  /* Smaller Icons on Mobile */
  .support-channel-icon-box {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
  }

  .support-channel-icon-box svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Reduced Font Weight and Compact Text */
  .support-channel-title {
    font-size: 0.80rem !important;
    font-weight: 600 !important;
  }

  .support-channel-sub {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
  }

  .support-badge-online {
    font-size: 0.60rem !important;
    padding: 1px 5px !important;
  }

  .support-channel-chevron {
    width: 14px !important;
    height: 14px !important;
  }

  /* Bottom Email Card Compact */
  .support-email-card {
    padding: 7px 11px !important;
    margin-bottom: 12px !important;
    border-radius: 11px !important;
  }

  .support-email-left {
    gap: 8px !important;
  }

  .support-email-icon-box {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
  }

  .support-email-icon-box svg {
    width: 13px !important;
    height: 13px !important;
  }

  .support-email-label {
    font-size: 0.60rem !important;
    font-weight: 600 !important;
  }

  .support-email-val {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
  }

  .support-copy-btn {
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
  }

  /* Action Buttons Compact */
  .support-actions-row {
    gap: 8px !important;
  }

  .support-btn-close,
  .support-btn-help {
    height: 34px !important;
    font-size: 0.80rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
  }
}

/* Ensure no green outline anywhere on profile cards */
#page-profile .card {
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

/* ============================================================ */
/* EDIT PROFILE MODAL (Desktop & Shared Styles)                 */
/* ============================================================ */
.edit-profile-modal-dialog {
  max-width: 420px;
  width: 90%;
  border-radius: 22px;
  background: #ffffff;
  padding: 26px 22px 22px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  position: relative;
  box-sizing: border-box;
}

.edit-profile-drag-indicator {
  display: none;
}

.edit-profile-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.edit-profile-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg) scale(1.08);
}

.edit-profile-close-btn:active {
  transform: scale(0.92);
}

.edit-profile-header-area {
  text-align: center;
  margin-bottom: 20px;
}

.edit-profile-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.edit-profile-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.edit-profile-subtitle {
  font-size: 0.84rem;
  color: #64748B;
  margin: 0;
}

.edit-profile-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.edit-profile-field-group {
  display: flex;
  flex-direction: column;
}

.edit-profile-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.edit-profile-input {
  width: 100%;
  height: 42px;
  font-size: 0.9rem;
  border-radius: 12px;
  border: 1.5px solid #CBD5E1;
  padding: 0 14px;
  box-sizing: border-box;
  background: #ffffff;
  color: #0F172A;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.edit-profile-input:focus {
  outline: none;
  border-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.edit-profile-input.readonly {
  border-color: #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  cursor: not-allowed;
}

.edit-profile-actions-row {
  display: flex;
  gap: 10px;
}

.edit-profile-btn-cancel {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.edit-profile-btn-cancel:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.edit-profile-btn-save {
  flex: 1.4;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.edit-profile-btn-save:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.edit-profile-btn-save:active {
  transform: scale(0.98);
}

/* ============================================================ */
/* MOBILE BOTTOM POPUP SHEET (Edit Profile) - ONLY FOR MOBILE  */
/* ============================================================ */
@media (max-width: 768px) {
  #editProfileModal.modal-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100050 !important;
  }

  .edit-profile-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
    padding: 8px 18px max(18px, env(safe-area-inset-bottom, 18px)) 18px !important;
    margin: 0 !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(100%) !important;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    background: #ffffff !important;
  }

  #editProfileModal.modal-overlay.active .edit-profile-modal-dialog {
    transform: translateY(0) !important;
  }

  .edit-profile-drag-indicator {
    display: block !important;
    width: 38px !important;
    height: 4px !important;
    background: #CBD5E1 !important;
    border-radius: 99px !important;
    margin: 4px auto 14px auto !important;
  }

  .edit-profile-close-btn {
    top: 14px !important;
    right: 16px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.80rem !important;
  }

  .edit-profile-header-area {
    margin-bottom: 14px !important;
  }

  .edit-profile-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    margin: 0 auto 8px !important;
  }

  .edit-profile-icon-box svg {
    width: 20px !important;
    height: 20px !important;
  }

  .edit-profile-title {
    font-size: 1.05rem !important;
  }

  .edit-profile-subtitle {
    font-size: 0.78rem !important;
  }

  .edit-profile-form-body {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .edit-profile-label {
    font-size: 0.80rem !important;
    margin-bottom: 5px !important;
  }

  .edit-profile-input {
    height: 40px !important;
    font-size: 0.90rem !important;
  }

  .edit-profile-actions-row {
    gap: 8px !important;
  }

  .edit-profile-btn-cancel,
  .edit-profile-btn-save {
    height: 38px !important;
    font-size: 0.84rem !important;
  }
}


/* ============================================================ */
/* CHANGE PASSWORD MODAL (Desktop & Shared Styles)              */
/* ============================================================ */
.change-password-modal-dialog {
  max-width: 440px;
  width: 92%;
  border-radius: 22px;
  background: #ffffff;
  padding: 24px 22px 20px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  position: relative;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

.change-password-drag-indicator {
  display: none;
}

.change-password-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F1F5F9;
  border: none;
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  z-index: 5;
}

.change-password-close-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
  transform: rotate(90deg);
}

.change-password-header-area {
  text-align: center;
  margin-bottom: 20px;
}

.change-password-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.change-password-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.change-password-subtitle {
  font-size: 0.83rem;
  color: #64748B;
  margin: 0;
}

.change-password-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.change-password-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.change-password-input {
  width: 100% !important;
  height: 44px !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
  border: 1.5px solid #CBD5E1 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.change-password-input:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
  outline: none;
}

.change-password-actions-row {
  display: flex;
  gap: 10px;
}

.change-password-btn-cancel {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #475569;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.change-password-btn-cancel:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.change-password-btn-save {
  flex: 1.4;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.change-password-btn-save:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.change-password-btn-save:active {
  transform: scale(0.98);
}

/* ============================================================ */
/* MOBILE BOTTOM POPUP SHEET (Change Password) - LIKE SUPPORT   */
/* ============================================================ */
@media (max-width: 768px) {
  #changePasswordModal.modal-overlay {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10010 !important;
  }

  .change-password-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 8px 18px max(18px, env(safe-area-inset-bottom, 18px)) 18px !important;
    margin: 0 !important;
    box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.18) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
    background: #ffffff !important;
  }

  #changePasswordModal.modal-overlay.active .change-password-modal-dialog {
    transform: translateY(0) !important;
  }

  .change-password-drag-indicator {
    display: block !important;
    width: 38px !important;
    height: 4px !important;
    background: #CBD5E1 !important;
    border-radius: 99px !important;
    margin: 4px auto 14px auto !important;
  }

  .change-password-close-btn {
    top: 12px !important;
    right: 14px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.80rem !important;
  }

  .change-password-header-area {
    margin-bottom: 14px !important;
  }

  .change-password-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    margin: 0 auto 6px !important;
  }

  .change-password-icon-box svg {
    width: 18px !important;
    height: 18px !important;
  }

  .change-password-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
  }

  .change-password-subtitle {
    font-size: 0.78rem !important;
    color: #64748B !important;
  }

  .change-password-form-body {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .change-password-label {
    font-size: 0.80rem !important;
    margin-bottom: 5px !important;
  }

  .change-password-input {
    height: 40px !important;
    font-size: 0.90rem !important;
  }

  .change-password-actions-row {
    gap: 8px !important;
  }

  .change-password-btn-cancel,
  .change-password-btn-save {
    height: 38px !important;
    font-size: 0.84rem !important;
  }
}