/* ========================================
   LIGHT MODE (Default)
   ======================================== */
.geo-pattern {
    background-color: #FDF2F8;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C026D3' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); }
.glass-strong { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); }
.glass-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 241, 242, 0.8) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 8px 32px rgba(192, 38, 211, 0.08), 0 2px 8px rgba(136, 19, 55, 0.04); }
.text-gradient { background: linear-gradient(135deg, #881337 0%, #C026D3 50%, #FB7185 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FDF2F8; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #C026D3, #FB7185); border-radius: 4px; }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); transform: rotate(30deg); animation: shimmer 3s infinite; }
.hover-lift { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; animation: float 8s ease-in-out infinite; }
.floating-object { position: fixed; pointer-events: none; z-index: 1; opacity: 0.1; }
.flower-pulse { animation: flowerPulse 3s ease-in-out infinite; display: inline-block; }

@keyframes flowerPulse { 0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); } 25% { transform: scale(1.2) rotate(-5deg); filter: brightness(1.2); } 50% { transform: scale(1) rotate(0deg); filter: brightness(1); } 75% { transform: scale(1.15) rotate(5deg); filter: brightness(1.1); } }

.calendar-logo { position: relative; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #FDF2F8 0%, #FFF1F2 100%); border: 1.5px solid rgba(192, 38, 211, 0.15); box-shadow: 0 2px 8px rgba(192, 38, 211, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.calendar-logo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: linear-gradient(90deg, rgba(192, 38, 211, 0.08) 0%, rgba(251, 113, 133, 0.08) 100%); border-bottom: 1px solid rgba(192, 38, 211, 0.1); }
.calendar-logo::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent 0%, rgba(192, 38, 211, 0.2) 30%, rgba(251, 113, 133, 0.2) 70%, transparent 100%); }
.calendar-logo svg { position: relative; z-index: 2; width: 22px; height: 22px; color: #C026D3; filter: drop-shadow(0 1px 2px rgba(192, 38, 211, 0.2)); }

/* ========================================
   DARK MODE
   ======================================== */
html.dark .geo-pattern { background-color: #0f0514; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C026D3' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
html.dark body { color: #f8fafc; }
html.dark .glass { background: rgba(40, 15, 55, 0.75); border: 1px solid rgba(192, 38, 211, 0.3); }
html.dark .glass-strong { background: rgba(45, 18, 62, 0.88); border: 1px solid rgba(192, 38, 211, 0.35); }
html.dark .glass-card { background: linear-gradient(135deg, rgba(45, 18, 62, 0.92) 0%, rgba(60, 22, 75, 0.85) 100%); border: 1px solid rgba(192, 38, 211, 0.3); box-shadow: 0 8px 32px rgba(192, 38, 211, 0.2), 0 2px 8px rgba(136, 19, 55, 0.15); }
html.dark .text-slate-800 { color: #f8fafc !important; }
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .text-musli-burgundy { color: #f472b6 !important; }
html.dark .bg-white\/60 { background: rgba(45, 18, 62, 0.7) !important; }
html.dark .bg-white\/50 { background: rgba(45, 18, 62, 0.6) !important; }
html.dark ::-webkit-scrollbar-track { background: #0f0514; }
html.dark footer { background: rgba(30, 10, 45, 0.4) !important; }

/* =========================================================================
   PREMIUM CALENDAR STYLES
   ========================================================================= */
.calendar-container, .calendar-wrapper, #calendar-wrapper, .cal-wrapper, #view-calendar .section-card, .calendar-section, .cal-section { max-width: 450px; margin-left: auto; margin-right: auto; width: 100%; }
.calendar-grid, .cal-grid, #calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; border-collapse: collapse; max-width: 450px; margin: 0 auto; }
.calendar-header, .cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; max-width: 450px; margin-left: auto; margin-right: auto; }
.calendar-header-cell, .cal-header-cell { text-align: center; font-size: 0.75rem; font-weight: 600; color: #94a3b8; padding: 6px 0; text-transform: uppercase; letter-spacing: 0.05em; }

.cal-cell { position: relative; z-index: 1; overflow: hidden; transition: all 0.2s ease; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 500; border-radius: 6px; cursor: pointer; background: #ffffff; color: #334155; border: none; }
.cal-cell.cal-empty { background: transparent; cursor: default; pointer-events: none; }
.cal-cell.cal-today { font-weight: 700; color: #881337; background: #fdf2f8; }

.cal-haid { background-color: #ffe4e6 !important; color: #881337 !important; }
.cal-suci { background-color: #f0fdf4 !important; color: #166534 !important; }
.cal-istihadhah { background-color: #fef9c3 !important; color: #854d0e !important; }
.cal-nifas { background-color: #f3e8ff !important; color: #6b21a8 !important; }
.cal-hamil { background-color: #e0f2fe !important; color: #075985 !important; }
.cal-fertile { background-color: #dcfce7 !important; color: #166534 !important; }
.cal-prediction { border: 2px dashed #cbd5e1 !important; background-color: #f8fafc !important; color: #64748b !important; }
.cal-selected { outline: 2.5px solid #10b981 !important; outline-offset: -2px; font-weight: 800; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: scale(1.05); z-index: 10; border-radius: 8px; }

/* =========================================================================
   MM PAGE STYLES
   ========================================================================= */
.mm-page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.mm-page-title{ font-size:1.6rem; font-weight:800; color:#7c2d52; line-height:1.2; }
.mm-page-subtitle{ margin-top:.35rem; color:#8f7280; font-size:.92rem; }
.mm-panel{ background:rgba(255,255,255,.58); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.5); border-radius:26px; padding:1.4rem; box-shadow:0 10px 35px rgba(140,70,100,.08); }
.mm-card-header{ margin-bottom:1rem; }
.mm-section-title{ font-size:1.05rem; font-weight:700; color:#5b2a43; }
.mm-stat-card{ border-radius:22px; padding:1.3rem; backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.55); box-shadow:0 8px 24px rgba(0,0,0,.05); }
.mm-pink{ background:linear-gradient(145deg,#ffe5ef,#fff8fb); }
.mm-amber{ background:linear-gradient(145deg,#fff2d8,#fffaf1); }
.mm-emerald{ background:linear-gradient(145deg,#dcfff3,#f5fffb); }
.mm-stat-label{ display:block; font-size:.9rem; color:#7b6572; margin-bottom:.45rem; }
.mm-stat-value{ font-size:1.8rem; font-weight:800; color:#702c4f; }
.mm-chart-wrapper{ position:relative; height:280px; border-radius:22px; padding:1.5rem; background:linear-gradient(180deg,#fffafc,#fff); overflow:hidden; }
.mm-chart-grid{ position:absolute; inset:0; background: linear-gradient(to top, rgba(172,120,140,.08) 1px, transparent 1px); background-size:100% 20%; pointer-events:none; }
.mm-bars{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; height:100%; gap:.8rem; }
.mm-bar-group{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.mm-bar{ width:100%; max-width:42px; border-radius:18px 18px 8px 8px; background:linear-gradient(to top,#7c2d52,#f29bb9); box-shadow:0 8px 16px rgba(124,45,82,.15); transition:.3s; }
.mm-bar-group span{ margin-top:.75rem; font-size:.82rem; color:#8f7280; font-weight:600; }
.mm-insight-box{ padding:1.25rem; border-radius:20px; background:linear-gradient(145deg,#fff4f8,#fffdfd); border:1px solid rgba(233,195,212,.5); line-height:1.75; color:#63404f; }
.mm-clear-btn{ background:#ffe0e4; color:#b91c1c; border:none; border-radius:16px; padding:.75rem 1rem; font-size:.88rem; font-weight:700; transition:.25s; }
.mm-timeline{ position:relative; margin-left:1rem; padding-left:1.6rem; }
.mm-timeline::before{ content:''; position:absolute; left:9px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,#f7a8c3,#f4d5de,#e8fff4); }
.mm-timeline-item{ position:relative; display:flex; gap:1rem; margin-bottom:2rem; }
.mm-dot{ position:absolute; left:-1.95rem; top:.4rem; width:16px; height:16px; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.08); }
.mm-burgundy{background:#7c2d52;}
.mm-pinkdot{background:#ec4899;}
.mm-amberdot{background:#f59e0b;}
.mm-emeralddot{background:#10b981;}
.mm-timeline-content{ flex:1; background:rgba(255,255,255,.72); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.5); border-radius:20px; padding:1rem 1.15rem; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.mm-time{ font-size:.76rem; color:#a38a95; display:block; margin-bottom:.35rem; }
.mm-timeline-content h4{ font-weight:700; color:#5f2844; margin-bottom:.35rem; }
.mm-timeline-content p{ font-size:.92rem; color:#6e5661; line-height:1.6; }

/* =========================================================================
   EDU-MODAL BOTTOM SHEET COMPONENT
   ========================================================================= */
.mm-edu-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; background: rgba(30, 18, 26, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 1; transition: opacity 0.3s ease; }
.mm-edu-overlay.hidden { opacity: 0; pointer-events: none; }
.mm-edu-modal { width: 100%; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(24px); border-radius: 28px 28px 0 0; padding: 0 1.25rem 1.25rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-height: 88vh; overflow: hidden; }
.mm-edu-overlay.tooltip-active .mm-edu-modal { transform: translateY(0); }
.mm-edu-handle-wrap { display: flex; justify-content: center; padding: .8rem 0 .45rem; }
.mm-edu-handle { width: 54px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #f9c6d9, #dba2bd); opacity: .95; }
.mm-edu-header { display: flex; align-items: center; gap: .95rem; padding: .55rem 0 1rem; border-bottom: 1px solid rgba(236, 208, 220, .55); }
.mm-edu-icon-box { width: 54px; height: 54px; border-radius: 18px; background: linear-gradient(145deg, #ffe7f0, #fff7fa); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(214, 116, 152, .12); flex-shrink: 0; }
.mm-edu-icon { width: 24px; height: 24px; color: #7c2d52; }
.mm-edu-head-text h3 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #6f284a; line-height: 1.2; }
.mm-edu-head-text p { margin: .25rem 0 0; font-size: .84rem; color: #9a7d8a; }
.mm-edu-body { padding: 1rem 0; overflow-y: auto; max-height: 52vh; }
.mm-edu-body p { font-size: .96rem; line-height: 1.85; color: #5b4753; margin-bottom: 1rem; text-align: left; }
.mm-edu-note { margin-top: 1.15rem; background: linear-gradient(145deg, #fff7ef, #fffdf9); border: 1px solid rgba(255, 224, 188, .8); border-radius: 18px; padding: 1rem; font-size: .88rem; line-height: 1.7; color: #7a5a48; }
.mm-edu-footer { padding-top: .5rem; }
.mm-edu-close-btn { width: 100%; border: none; border-radius: 18px; padding: 1rem; font-size: .95rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c2d52, #d85f8d); box-shadow: 0 10px 24px rgba(124, 45, 82, .18); cursor: pointer; transition: .28s ease; }

.mm-edu-modal textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; font-family: inherit; font-size: 0.9rem; margin-bottom: 12px; resize: vertical; min-height: 100px; }
.mm-edu-modal textarea:focus { outline: none; border-color: #C026D3; box-shadow: 0 0 0 3px rgba(192,38,211,0.1); }
.mm-edu-submit { width: 100%; background: linear-gradient(135deg, #881337, #C026D3); color: white; border: none; border-radius: 12px; padding: 12px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.mm-edu-submit:hover { opacity: 0.9; transform: translateY(-2px); }

/* =========================================================================
   RING CYCLE & QADHA CARD 
   ========================================================================= */
.mm-ring-cycle { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#C026D3 var(--progress, 0%), #f1f5f9 0); display: flex; align-items: center; justify-content: center; }
.mm-ring-inner { width: 100px; height: 100px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mm-qadha-card { background: #ffffff; border: 1px solid #f1f5f9; border-radius: 16px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); transition: all 0.3s ease; }