/* ═══════════════════════════════════════════════════════════════════════════
   GURPURAB CALENDAR — Premium iOS 18 Mobile-First
   Version: 4.0.0 — Full Mobile Reconstruction
═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand Colors */
  --kesri: #FF6B00;
  --kesri-soft: rgba(255, 107, 0, 0.12);
  --kesri-glow: rgba(255, 107, 0, 0.25);

  /* iOS System Colors */
  --ios-blue: #007AFF;
  --ios-green: #34C759;
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;
  --ios-purple: #AF52DE;

  /* Background - THEME ENGINE */
  --bg-primary: var(--cal-bg, #F2F2F7);
  --bg-secondary: var(--cal-card, #FFFFFF);
  --bg-elevated: var(--cal-card, rgba(255, 255, 255, 0.95));

  /* Glass Effects */
  --glass-bg: var(--cal-card, rgba(255, 255, 255, 0.85));
  --glass-border: var(--cal-border, rgba(0, 0, 0, 0.08));
  --glass-blur: 20px;

  /* Typography - THEME ENGINE */
  --text-primary: var(--cal-text, #000000);
  --text-secondary: var(--cal-muted, rgba(60, 60, 67, 0.7));
  --text-tertiary: var(--cal-muted, rgba(60, 60, 67, 0.45));

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;

  /* Radius - iOS Standard */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 450ms;

  /* Safe Areas */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* Modal z-index layers */
  --z-nav: 100;
  --z-backdrop-1: 500;
  --z-modal-1: 510;
  --z-backdrop-2: 600;
  --z-modal-2: 610;
  --z-backdrop-3: 700;
  --z-modal-3: 710;
  --z-toast: 2000;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE STYLES
───────────────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior: smooth removed — causes scroll jank on large DOMs */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.47;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ═══ BODY SCROLL LOCK — prevents page overscroll when modals are open ═══ */
body.modal-open {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* iOS Safari — freeze the page behind modals */
body.modal-open .page {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN PAGE CONTAINER
───────────────────────────────────────────────────────────────────────────── */

.page {
  padding: var(--space-md);
  padding-bottom: calc(var(--space-xxl) + var(--safe-area-bottom));
  max-width: 680px;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
  /* FIX: Removed transform that caused text disappearing during scroll */
}

/* FIX: Ensure stable rendering during scroll - REMOVED problematic properties
   Previous backface-visibility rules removed as they caused render issues */


/* ─────────────────────────────────────────────────────────────────────────────
   NAVIGATION HEADER - iOS Style
───────────────────────────────────────────────────────────────────────────── */

.page-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-area-top) + var(--space-sm)) var(--space-md) var(--space-sm);
  background: var(--bg-primary);
  /* backdrop-filter removed — extremely expensive during scroll */
  border-bottom: 0.5px solid var(--glass-border);
  /* REMOVED: will-change and transform that caused scroll rendering glitches */
}

.nav-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--ios-blue);
  font-weight: 400;
  font-size: 17px;
  cursor: pointer;
  transition: opacity var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}

.nav-btn:active {
  opacity: 0.5;
}

.nav-btn span:first-child {
  font-size: 24px;
  font-weight: 300;
  margin-right: -2px;
}

/* Settings button */
.settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-btn svg {
  color: var(--ios-blue);
  stroke: var(--ios-blue);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLAYMORPHISM CARDS — Cushion effect with warm light colors
───────────────────────────────────────────────────────────────────────────── */

.clay-card {
  background: linear-gradient(140deg, #FFF3E0 0%, #FFE0B2 100%);
  border: none;
  border-radius: 24px;
  box-shadow:
    12px 12px 30px rgba(0, 0, 0, 0.08),
    -6px -6px 20px rgba(255, 255, 255, 0.95),
    inset 2px 2px 8px rgba(255, 255, 255, 0.9),
    inset -2px -2px 8px rgba(0, 0, 0, 0.03);
}

.clay-card:active {
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.06),
    inset -6px -6px 12px rgba(255, 255, 255, 0.95);
}

.glass-card {
  background: linear-gradient(140deg, #FFF3E0 0%, #FFE0B2 100%);
  border-radius: 24px;
  border: none;
  box-shadow:
    12px 12px 30px rgba(0, 0, 0, 0.08),
    -6px -6px 20px rgba(255, 255, 255, 0.95),
    inset 2px 2px 8px rgba(255, 255, 255, 0.9),
    inset -2px -2px 8px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.glass-optics {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION STYLES
───────────────────────────────────────────────────────────────────────────── */

.section {
  margin-top: var(--space-md);
}

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

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.08px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.section-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TODAY CARD
───────────────────────────────────────────────────────────────────────────── */

.today-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.today-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.today-nk {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  font-family: 'Noto Sans Gurmukhi', system-ui, sans-serif;
  color: var(--text-primary);
}

.today-g {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--kesri) 0%, #FF8C40 100%);
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTROLS SECTION
───────────────────────────────────────────────────────────────────────────── */

.controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

.search {
  width: 100%;
  border: none;
  background: rgba(118, 118, 128, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 400;
  font-size: 17px;
  color: var(--text-primary);
  outline: none;
  transition: background var(--duration-fast);
}

.search:focus {
  background: rgba(118, 118, 128, 0.18);
}

.search::placeholder {
  color: var(--text-secondary);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-chip {
  border-radius: var(--radius-full);
  padding: 8px 14px;
  border: none;
  background: rgba(118, 118, 128, 0.12);
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-ios);
  color: var(--text-secondary);
  -webkit-tap-highlight-color: transparent;
}

.filter-chip:active {
  transform: scale(0.96);
}

.filter-chip.active {
  background: var(--kesri);
  color: white;
}

/* Segmented Control */
.view-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(118, 118, 128, 0.12);
}

.view-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 7px;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-primary);
  transition: all var(--duration-fast) var(--ease-ios);
  -webkit-tap-highlight-color: transparent;
}

.view-btn:active {
  opacity: 0.7;
}

.view-btn.active {
  background: var(--bg-secondary);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 3px 1px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UPCOMING & EVENT LIST
───────────────────────────────────────────────────────────────────────────── */

.upcoming-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

.event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 0.5px solid var(--glass-border);
  cursor: pointer;
  transition: background var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
  /* FIX: Remove content-visibility to prevent scroll disappearing */
  position: relative;
}

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

.event-row:active {
  background: rgba(0, 0, 0, 0.04);
  margin: 0 calc(var(--space-lg) * -1);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.event-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.event-title {
  font-weight: 500;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.event-sub {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.days-left {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALENDAR
───────────────────────────────────────────────────────────────────────────── */

.calendar-wrap {
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.month-label {
  font-weight: 600;
  font-size: 17px;
  color: var(--text-primary);
}

.icon-pill {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(118, 118, 128, 0.12);
  cursor: pointer;
  font-weight: 500;
  font-size: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}

.icon-pill:active {
  background: rgba(118, 118, 128, 0.24);
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: var(--space-sm) 0;
  text-align: center;
}

.weekdays div {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  /* REMOVED: contain and transform that caused scroll disappearing */
}

.day {
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F0 100%);
  border: none;
  border-radius: 14px;
  min-height: 60px;
  padding: var(--space-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all var(--duration-fast);
  box-shadow:
    4px 4px 10px rgba(0, 0, 0, 0.04),
    -2px -2px 8px rgba(255, 255, 255, 0.9),
    inset 1px 1px 3px rgba(255, 255, 255, 0.8);
  -webkit-tap-highlight-color: transparent;
}

.day:hover {
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.06),
    -3px -3px 10px rgba(255, 255, 255, 0.95),
    inset 1px 1px 3px rgba(255, 255, 255, 0.8);
}

.day:active {
  box-shadow:
    inset 3px 3px 8px rgba(0, 0, 0, 0.06),
    inset -3px -3px 8px rgba(255, 255, 255, 0.95);
}

.day.other {
  opacity: 0.4;
  cursor: default;
  background: transparent;
  box-shadow: none;
}

.day.other:hover,
.day.other:active {
  background: transparent;
  box-shadow: none;
}

.day.today .day-number {
  background: var(--kesri);
  color: white !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -4px;
}

.day-number {
  font-weight: 400;
  font-size: 17px;
  color: var(--text-primary);
  min-height: 28px;
  display: flex;
  align-items: center;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
}

.dots .dot {
  width: 6px;
  height: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEGEND
───────────────────────────────────────────────────────────────────────────── */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  border-top: 0.5px solid var(--glass-border);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.legend-item .dot {
  width: 8px;
  height: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   YEARLY VIEW
───────────────────────────────────────────────────────────────────────────── */

#yearGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

#yearGrid .glass-card {
  padding: var(--space-md);
}

#yearGrid .grid {
  gap: 2px;
}

#yearGrid .day {
  min-height: 36px;
  padding: 4px;
  border-radius: 6px;
}

#yearGrid .day .day-number {
  font-size: 13px;
}

#yearGrid .day.today .day-number {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

#yearGrid .dots .dot {
  width: 5px;
  height: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS BACKDROP — Shared backdrop system
═══════════════════════════════════════════════════════════════════════════ */

.ios-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-ios),
    visibility var(--duration-normal);
  -webkit-tap-highlight-color: transparent;
}

.ios-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

/* Layer 1 — Event modal backdrop */
#modalBackdrop {
  z-index: var(--z-backdrop-1);
}

/* Layer 2 — Settings + Arth backdrop */
#settingsBackdrop,
#arthBackdrop {
  z-index: var(--z-backdrop-2);
}

/* Layer 3 — Reminder backdrop (always on top) */
#reminderBackdrop {
  z-index: var(--z-backdrop-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS MODAL — Premium Bottom Sheet on Mobile
   Desktop: Centered floating card
   Mobile: Full-width bottom sheet with drag handle
═══════════════════════════════════════════════════════════════════════════ */

.ios-modal {
  position: fixed;
  background: var(--bg-secondary);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--duration-normal) var(--ease-ios);

  /* Desktop default: centered card */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: 85vh;
  border-radius: 14px;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.12);
}

.ios-modal.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Layer 1 — Event modal */
#eventModal {
  z-index: var(--z-modal-1);
}

/* Layer 2 — Settings + Arth modals */
#settingsModal,
#arthModal {
  z-index: var(--z-modal-2);
}

/* ─── MOBILE: Convert modals to bottom sheets ─── */
@media (max-width: 600px) {
  .ios-modal {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.25);
  }

  .ios-modal.visible {
    transform: translateY(0);
  }

  /* Drag handle indicator on mobile */
  .ios-modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    background: rgba(120, 120, 128, 0.3);
    border-radius: 3px;
    z-index: 10;
  }

  .ios-modal .modal-header {
    padding-top: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL HEADER
───────────────────────────────────────────────────────────────────────────── */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 0.5px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.modal-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-cancel {
  border: none;
  background: transparent;
  color: var(--ios-blue);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.modal-cancel:active {
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL BODY
───────────────────────────────────────────────────────────────────────────── */

.modal-body {
  padding: var(--space-xl);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-title-pa {
  font-family: 'Noto Sans Gurmukhi', system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-primary);
}

.modal-title-en {
  margin-top: 4px;
  font-weight: 500;
  font-size: 17px;
  color: var(--text-secondary);
}

/* Key-Value pairs */
.kv {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: rgba(118, 118, 128, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}

.kv div {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-secondary);
  padding: 2px 0;
}

/* Info blocks */
.block {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: rgba(118, 118, 128, 0.06);
  border-radius: 12px;
}

.block-title {
  font-weight: 700;
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.block-text {
  font-weight: 400;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   iOS BOTTOM SHEET — Reminder Sheet
   Always slides from bottom, layered above event modal
═══════════════════════════════════════════════════════════════════════════ */

.ios-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--ease-ios);
  z-index: var(--z-modal-3);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-area-bottom);
  box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.3);
  overscroll-behavior: contain;
}

.ios-sheet.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Drag handle */
.ios-sheet::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  background: rgba(120, 120, 128, 0.3);
  border-radius: 3px;
  z-index: 10;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--space-lg) var(--space-lg);
  border-bottom: 0.5px solid var(--glass-border);
  flex-shrink: 0;
}

.sheet-header h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.sheet-close {
  border: none;
  background: transparent;
  color: var(--ios-blue);
  font-size: 17px;
  font-weight: 400;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.sheet-close:active {
  opacity: 0.5;
}

#reminderSave {
  font-weight: 600;
}

.sheet-content {
  padding: var(--space-lg);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ─────────────────────────────────────────────────────────────────────────────
   REMINDER UI — iOS Native Style
───────────────────────────────────────────────────────────────────────────── */

.reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: 0.5px solid var(--glass-border);
}

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

.reminder-row span {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 400;
}

/* iOS Toggle Switch */
.sheet-content label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  border-bottom: 0.5px solid var(--glass-border);
  font-weight: 500;
  font-size: 17px;
  color: var(--text-primary);
  cursor: pointer;
}

.sheet-content input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 51px;
  height: 31px;
  background: rgba(120, 120, 128, 0.2);
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  transition: background var(--duration-fast);
  flex-shrink: 0;
}

.sheet-content input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
  transition: transform var(--duration-fast) var(--ease-ios);
}

.sheet-content input[type="checkbox"]:checked {
  background: var(--ios-green);
}

.sheet-content input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

/* Time Input */
.time {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 10px;
  border: none;
  background: rgba(118, 118, 128, 0.12);
  padding: 12px 16px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ios-blue);
  outline: none;
  cursor: pointer;
  min-width: 110px;
  text-align: center;
}

.time::-webkit-calendar-picker-indicator {
  display: none;
}

/* Day Pills */
.day-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}

.day-pill {
  border-radius: var(--radius-full);
  padding: 12px 18px;
  border: none;
  background: rgba(118, 118, 128, 0.12);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-ios);
  color: var(--text-primary);
  -webkit-tap-highlight-color: transparent;
}

.day-pill:active {
  transform: scale(0.96);
}

.day-pill.active {
  background: var(--ios-green);
  color: white;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.35);
}

.day-pill:hover:not(.active) {
  background: rgba(118, 118, 128, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACTION BUTTONS — Event Modal
───────────────────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  border-top: 0.5px solid var(--glass-border);
  flex-shrink: 0;
  background: var(--bg-secondary);
  padding-bottom: calc(var(--space-xl) + var(--safe-area-bottom));
}

.primary {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  background: linear-gradient(135deg, #007AFF 0%, #0056B3 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}

.primary:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.secondary {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 500;
  font-size: 17px;
  cursor: pointer;
  background: rgba(118, 118, 128, 0.12);
  color: var(--ios-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}

.secondary:active {
  background: rgba(118, 118, 128, 0.24);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TOAST NOTIFICATION
───────────────────────────────────────────────────────────────────────────── */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-area-bottom));
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  padding: 14px 24px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: white;
  font-weight: 600;
  font-size: 15px;
  opacity: 0;
  transition: opacity var(--duration-normal), transform var(--duration-normal);
  pointer-events: none;
  white-space: nowrap;
}

#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HIDDEN UTILITY
───────────────────────────────────────────────────────────────────────────── */

.hidden {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIQUID BACKGROUND — Disabled
───────────────────────────────────────────────────────────────────────────── */

.liquid-background {
  display: none !important;
}

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS MODAL — iOS Style Theme Picker
   Mobile: Full bottom sheet | Desktop: Centered card
═══════════════════════════════════════════════════════════════════════════ */

.settings-modal {
  max-width: 400px;
}

@media (max-width: 600px) {
  .settings-modal {
    max-width: 100%;
    max-height: 70vh;
  }
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.08px;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-left: 4px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(118, 118, 128, 0.08);
  border: 2.5px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s var(--ease-ios);
  -webkit-tap-highlight-color: transparent;
}

.theme-option:active {
  transform: scale(0.96);
}

.theme-option.active {
  border-color: var(--ios-blue);
  background: rgba(0, 122, 255, 0.08);
}

.theme-option span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Theme preview thumbnails */
.theme-preview {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-preview-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
}

.theme-preview-card {
  position: absolute;
  top: 18px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 6px;
}

.theme-preview--light {
  background: #F2F2F7;
}
.theme-preview--light .theme-preview-bar {
  background: rgba(242, 242, 247, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.theme-preview--light .theme-preview-card {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-preview--dark {
  background: #0d0d12;
}
.theme-preview--dark .theme-preview-bar {
  background: rgba(30, 30, 35, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.theme-preview--dark .theme-preview-card {
  background: rgba(255, 255, 255, 0.08);
}

.theme-preview--gold {
  background: linear-gradient(180deg, #1a1510 0%, #0d0a06 100%);
}
.theme-preview--gold .theme-preview-bar {
  background: rgba(26, 21, 16, 0.95);
  border-bottom: 1px solid rgba(201, 168, 108, 0.15);
}
.theme-preview--gold .theme-preview-card {
  background: rgba(201, 168, 108, 0.12);
  border: 1px solid rgba(201, 168, 108, 0.2);
}

.theme-preview--sepia {
  background: #f4ecd8;
}
.theme-preview--sepia .theme-preview-bar {
  background: rgba(244, 236, 216, 0.95);
  border-bottom: 1px solid rgba(92, 75, 55, 0.1);
}
.theme-preview--sepia .theme-preview-card {
  background: #faf6eb;
  box-shadow: 0 1px 3px rgba(92, 75, 55, 0.08);
}

/* Settings Info Box */
.settings-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(118, 118, 128, 0.08);
  border-radius: 12px;
  margin-top: 16px;
}

.info-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.info-text {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT TYPE SPECIFIC STYLING — Jyoti Jyot vs Celebrations
   Version: 3.0 — Production-ready memorial vs celebration differentiation
═══════════════════════════════════════════════════════════════════════════ */

/* ─── REMEMBRANCE EVENTS (Jyoti Jyot, Shaheedi) — Respectful, somber styling ─── */
.event-row.event-remembrance,
.event-card.event-remembrance {
  position: relative;
  background: rgba(60, 60, 67, 0.02);
}

.event-row.event-remembrance .event-title {
  color: var(--text-primary);
  font-weight: 500;
}

.event-row.event-remembrance .days-left {
  color: rgba(60, 60, 67, 0.6);
  font-weight: 400;
}

/* Remembrance badge — subtle gray tone */
.event-row.event-remembrance .badge,
.event-card.event-remembrance .badge {
  background: linear-gradient(135deg, rgba(60, 60, 67, 0.65) 0%, rgba(60, 60, 67, 0.85) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Soft glow for remembrance events on today - SAME as celebrations */
.event-row.event-remembrance.event-today {
  background: linear-gradient(90deg, 
    rgba(255, 107, 0, 0.05) 0%, 
    rgba(255, 215, 0, 0.08) 50%, 
    rgba(255, 107, 0, 0.05) 100%);
  box-shadow: 
    0 0 20px rgba(255, 107, 0, 0.15),
    0 0 40px rgba(255, 215, 0, 0.1);
  border-left: 3px solid var(--kesri);
  padding-left: calc(var(--space-md) - 3px);
}

/* Neutral events today - visible highlight */
.event-row.event-neutral.event-today {
  background: linear-gradient(90deg, 
    rgba(0, 122, 255, 0.06) 0%, 
    rgba(0, 122, 255, 0.1) 50%, 
    rgba(0, 122, 255, 0.06) 100%);
  border-left: 3px solid var(--ios-blue);
  padding-left: calc(var(--space-md) - 3px);
  box-shadow: 0 0 16px rgba(0, 122, 255, 0.12);
}

/* ─── CELEBRATION EVENTS (Prakash, Gurgaddi, Vaisakhi) — Ring lights effect ─── */
.event-row.event-celebration,
.event-card.event-celebration {
  position: relative;
}

/* Animated ring light border for celebration events */
.event-row.event-celebration.event-today::before,
.event-card.event-celebration.event-today::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(90deg, 
    var(--kesri) 0%, 
    #FFD700 25%, 
    #FFA500 50%, 
    #FFD700 75%, 
    var(--kesri) 100%);
  background-size: 300% 100%;
  animation: ringLightFlow 3s linear infinite;
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}

@keyframes ringLightFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* Celebration glow effect */
.event-row.event-celebration.event-today {
  background: linear-gradient(90deg, 
    rgba(255, 107, 0, 0.05) 0%, 
    rgba(255, 215, 0, 0.08) 50%, 
    rgba(255, 107, 0, 0.05) 100%);
  box-shadow: 
    0 0 20px rgba(255, 107, 0, 0.15),
    0 0 40px rgba(255, 215, 0, 0.1);
  border-left: 3px solid var(--kesri);
  padding-left: calc(var(--space-md) - 3px);
}

/* Celebration badge with animated gradient */
.event-row.event-celebration .badge,
.event-card.event-celebration .badge {
  background: linear-gradient(135deg, 
    var(--kesri) 0%, 
    #FFD700 50%, 
    var(--kesri) 100%);
  background-size: 200% 200%;
  animation: celebrationGradient 2.5s ease infinite;
  box-shadow: 
    0 4px 12px rgba(255, 107, 0, 0.4),
    0 0 20px rgba(255, 215, 0, 0.2);
  font-weight: 700;
}

@keyframes celebrationGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Celebration dot with pulse effect */
.event-row.event-celebration.event-today .dot {
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px currentColor;
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* ─── NEUTRAL EVENTS — Uses base .event-row styles, no overrides needed ─── */

/* ─── HOMEPAGE GURPURAB CARD — Ring lights for celebrations ─── */
.glass-card.celebration-today {
  position: relative;
  overflow: visible;
}

.glass-card.celebration-today::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  background: linear-gradient(90deg, 
    var(--kesri) 0%, 
    #FFD700 25%, 
    #FFA500 50%, 
    #FFD700 75%, 
    var(--kesri) 100%);
  background-size: 300% 100%;
  animation: ringLightFlow 3s linear infinite;
  opacity: 0.7;
  z-index: -1;
  filter: blur(10px);
}

.glass-card.celebration-today::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, 
    var(--kesri) 0%, 
    #FFD700 50%, 
    var(--kesri) 100%);
  background-size: 200% 200%;
  animation: celebrationGradient 2.5s ease infinite;
  opacity: 0.5;
  z-index: -1;
}

/* Memorial card on homepage — subtle, respectful */
.glass-card.memorial-today {
  border: 2px solid rgba(60, 60, 67, 0.25);
  box-shadow:
    0 0 0 0.5px var(--glass-border),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 0 20px rgba(60, 60, 67, 0.05);
}

/* ─── CALENDAR GRID CELLS — Event type indicators ─── */
.day.has-celebration {
  position: relative;
}

.day.has-celebration::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--kesri) 50%, 
    transparent 100%);
  opacity: 0.6;
}

.day.has-memorial {
  position: relative;
}

.day.has-memorial::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: rgba(60, 60, 67, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE ADJUSTMENTS
───────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .page {
    padding: var(--space-xl);
  }

  .section {
    margin-top: var(--space-lg);
  }

  .glass-card {
    border-radius: 16px;
  }

  .today-nk {
    font-size: 26px;
  }

  .day {
    min-height: 72px;
    padding: var(--space-md);
  }

  .day-number {
    font-size: 15px;
  }

  .day.today .day-number {
    width: 32px;
    height: 32px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS — REMOVED problematic compositing layers
   These were causing text to disappear during scroll on mobile browsers.
   
   REMOVED: transform: translateZ(0) and backface-visibility on .glass-card,
   .section, .calendar-wrap, .grid - these forced GPU layers that glitched
   during momentum scrolling, causing text/content to disappear.
   
   REMOVED: transform and will-change on .page-nav that caused sticky header glitches.
═══════════════════════════════════════════════════════════════════════════ */

.modal-body,
.sheet-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}