/** * parent-magic-common.css — Shared shell for schedule / family / settings magic view. */ /* Set in before paint when localStorage prefers magic — prevents classic flash. */ html.parent-magic-early, html.parent-magic-early body { background: #07071a !important; color: #f4f4ff !important; } html.parent-magic-early body.bg-sky, html.parent-magic-early body.bg-cream, body.parent-magic-view.bg-sky, body.parent-magic-view.bg-cream { background: #07071a !important; } html.parent-magic-early body .bg-sky, html.parent-magic-early body .bg-cream, body.parent-magic-view:not(.parent-theme-light) .bg-sky, body.parent-magic-view.parent-magic-page-for-dig:not(.parent-theme-light) main .bg-sky, body.parent-magic-view.for-dig-page:not(.parent-theme-light) .bg-sky { background: transparent !important; border-color: transparent !important; } html.parent-magic-early body nav#sidebar, html.parent-magic-early body nav.w-full.md\:w-64, html.parent-magic-early body .md\:hidden.bg-navy.sticky, html.parent-magic-early body .mobile-topbar { display: none !important; } body.parent-magic-view:not(.parent-theme-light) { background: #07071a; color: #f4f4ff; } /* Soft nav: no opacity flash — content swaps instantly */ body.parent-magic-nav-loading main { opacity: 1; } body.parent-magic-view .parent-magic-legacy-hide { display: none !important; } /* Notifications / legacy page headers hidden in magic (hero replaces them) */ body.parent-magic-page-notifications main > .bg-sky.border-b.parent-magic-legacy-hide, body.parent-magic-page-notifications main > .bg-sky.border-b:first-of-type:not(.app-view-toggle-wrap) { display: none !important; } /* Family child card — prominent settings CTA in magic view */ body.parent-magic-view .family-child-settings-btn { box-shadow: 0 4px 0 rgba(180, 120, 0, 0.35), 0 8px 20px rgba(255, 204, 51, 0.25); } /* Dashboard: hide classic header as soon as magic view is on (before hub mount). */ body.parent-magic-view.parent-magic-page-dashboard .parent-magic-hide-header { display: none !important; } body.parent-magic-view nav.w-full.md\:w-64, body.parent-magic-view nav#sidebar, body.parent-magic-view .md\:hidden.bg-navy.sticky, body.parent-magic-view .mobile-topbar { display: none !important; } body.parent-magic-view main { padding-bottom: max(96px, calc(env(safe-area-inset-bottom, 0px) + 96px)); } body.parent-magic-view .parent-bottom-nav:not([hidden]) { display: flex; } /* Floating help + feedback above magic bottom dock (tablet + phone) */ body.parent-magic-view #globalFeedbackBtn, body.parent-magic-view .global-feedback-fab { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important; top: auto !important; z-index: 10210 !important; } body.parent-magic-view #helpBtn, body.parent-magic-view #hbBtn { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 68px) !important; top: auto !important; right: max(16px, env(safe-area-inset-right, 0px)) !important; z-index: 10210 !important; } body.parent-magic-dashboard #globalFeedbackBtn { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important; top: auto !important; } body.parent-magic-dashboard #helpBtn { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 68px) !important; top: auto !important; } body.parent-magic-library #globalFeedbackBtn { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px) !important; top: auto !important; } body.parent-magic-library #helpBtn, body.parent-magic-library #hbBtn { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 68px) !important; top: auto !important; } body.parent-magic-view:not(.parent-theme-light) .magic-page-shell { padding: max(4px, env(safe-area-inset-top, 0px)) 16px 12px; background: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(88, 56, 180, 0.45), transparent 58%), radial-gradient(circle at 90% 20%, rgba(255, 204, 51, 0.1), transparent 40%), linear-gradient(180deg, #0b0b2a 0%, #07071a 100%); } .magic-page-shell { padding: max(4px, env(safe-area-inset-top, 0px)) 16px 12px; } .magic-page-hero { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; } .magic-page-hero-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; background: linear-gradient(145deg, rgba(124, 58, 237, 0.5), rgba(30, 27, 75, 0.9)); border: 1px solid rgba(255, 255, 255, 0.15); } .magic-page-hero h1 { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.15; } .magic-page-hero p { font-size: 13px; color: rgba(244, 244, 255, 0.68); margin: 6px 0 0; } .magic-page-stats { display: flex; gap: 10px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; } .magic-page-stats::-webkit-scrollbar { display: none; } .magic-page-stat-card { flex: 0 0 auto; min-width: 100px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); text-align: center; } .magic-page-stat-card strong { display: block; font-size: 20px; font-weight: 800; color: #ffcc33; } .magic-page-stat-card span { font-size: 10px; font-weight: 700; color: rgba(244, 244, 255, 0.55); text-transform: uppercase; letter-spacing: 0.04em; } /* ── Settings group menu ── */ .magic-settings-menu { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; } .magic-settings-group-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 16px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.06); color: #f4f4ff; text-align: left; font-family: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .magic-settings-group-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: rgba(255, 255, 255, 0.08); } .magic-settings-group-icon.profile { background: rgba(59, 130, 246, 0.2); } .magic-settings-group-icon.family { background: rgba(168, 85, 247, 0.2); } .magic-settings-group-icon.app { background: rgba(255, 204, 51, 0.15); } .magic-settings-group-text strong { display: block; font-size: 15px; font-weight: 800; } .magic-settings-group-text span { font-size: 12px; color: rgba(244, 244, 255, 0.58); } .magic-settings-back { display: flex; align-items: center; gap: 8px; margin: 0 16px 12px; padding: 10px 14px; min-height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #f4f4ff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; } body.parent-magic-view.magic-settings-in-group .magic-settings-menu, body.parent-magic-view.magic-settings-in-group .magic-page-hero-wrap { display: none; } /* Legacy section tags: hide only after hub successfully rendered (magic-settings-ready) */ body.parent-magic-view.magic-settings-ready:not(.magic-settings-in-group) [data-magic-settings-content] { display: none !important; } /* Settings: hide legacy scroll list ONLY after replacement hub is ready */ body.parent-magic-view.magic-settings-ready.parent-magic-page-settings:not(.magic-settings-in-group) main > .flex-1.overflow-auto, body.parent-magic-view.magic-settings-ready[data-magic-page="settings"]:not(.magic-settings-in-group) main > .flex-1.overflow-auto { display: none !important; } /* Hub mount visible once populated and ready */ body.parent-magic-view.magic-settings-ready[data-magic-page="settings"]:not(.magic-settings-in-group) #parentMagicPageMount:not(:empty) { display: block !important; visibility: visible !important; } body.parent-magic-view.magic-settings-ready.magic-settings-in-group [data-magic-settings-content]:not(.hidden) { display: block !important; } body.parent-magic-view.magic-settings-ready.magic-settings-in-group .magic-settings-back-bar { display: block; } /* Hide legacy settings blocks (prenumeration etc.) when a magic group is open */ body.parent-magic-view.magic-settings-ready.magic-settings-in-group .flex-1.overflow-auto > section:not([data-magic-settings-content]), body.parent-magic-view.magic-settings-ready.magic-settings-in-group .flex-1.overflow-auto > hr { display: none !important; } .magic-settings-back-bar { display: none; padding: 8px 16px 0; position: relative; z-index: 20; } /* ── Dark content overrides (dark theme only) ── */ body.parent-magic-view:not(.parent-theme-light) .bg-white, body.parent-magic-view:not(.parent-theme-light) .bg-white\/80, body.parent-magic-view:not(.parent-theme-light) .bg-white\/70, body.parent-magic-view:not(.parent-theme-light) .bg-white\/60, body.parent-magic-view:not(.parent-theme-light) .bg-sky, body.parent-magic-view:not(.parent-theme-light) .bg-sky\/40, body.parent-magic-view:not(.parent-theme-light) .bg-sky\/60, body.parent-magic-view:not(.parent-theme-light) .bg-sky\/95, body.parent-magic-view:not(.parent-theme-light) .bg-lavender, body.parent-magic-view:not(.parent-theme-light) .bg-mint, body.parent-magic-view:not(.parent-theme-light) .bg-gold-light, body.parent-magic-view:not(.parent-theme-light) .bg-cream, body.parent-magic-view:not(.parent-theme-light) .bg-yellow-50, body.parent-magic-view:not(.parent-theme-light) .bg-orange-50, body.parent-magic-view:not(.parent-theme-light) .bg-indigo-50, body.parent-magic-view:not(.parent-theme-light) .bg-amber-50, body.parent-magic-view:not(.parent-theme-light) .bg-gray-50 { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #f4f4ff; } /* Schedule section cards — tinted panels with readable text */ body.parent-magic-view:not(.parent-theme-light) .section-card.bg-yellow-50, body.parent-magic-view:not(.parent-theme-light) .section-card.border-yellow-200 { background: rgba(252, 211, 77, 0.14) !important; border-color: rgba(252, 211, 77, 0.35) !important; } body.parent-magic-view:not(.parent-theme-light) .section-card.bg-sky, body.parent-magic-view:not(.parent-theme-light) .section-card.border-blue-200 { background: rgba(96, 165, 250, 0.14) !important; border-color: rgba(96, 165, 250, 0.35) !important; } body.parent-magic-view:not(.parent-theme-light) .section-card.bg-orange-50, body.parent-magic-view:not(.parent-theme-light) .section-card.border-orange-200 { background: rgba(251, 146, 60, 0.14) !important; border-color: rgba(251, 146, 60, 0.35) !important; } body.parent-magic-view:not(.parent-theme-light) .section-card.bg-indigo-50, body.parent-magic-view:not(.parent-theme-light) .section-card.border-indigo-200 { background: rgba(129, 140, 248, 0.14) !important; border-color: rgba(129, 140, 248, 0.35) !important; } /* För dig — 7-day outcome banner readable on magic dark */ body.parent-magic-view:not(.parent-theme-light) #forDigOutcomeBanner { background: rgba(251, 191, 36, 0.14) !important; border-color: rgba(251, 191, 36, 0.35) !important; } body.parent-magic-view:not(.parent-theme-light) #forDigOutcomeBanner .text-navy, body.parent-magic-view:not(.parent-theme-light) #forDigOutcomeBanner .font-heading { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #forDigOutcomeBanner .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) .activity-item.bg-white { background: rgba(12, 12, 36, 0.72) !important; border-color: rgba(255, 255, 255, 0.14) !important; } body.parent-magic-view:not(.parent-theme-light) .activity-item .text-navy, body.parent-magic-view:not(.parent-theme-light) .section-card .text-navy, body.parent-magic-view:not(.parent-theme-light) .section-card h4 { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .activity-item .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .section-card .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } /* Calendar day columns keep a light surface in dark magic — force readable dark text. Global .text-navy / .text-text-soft overrides would make headers (Mån, 20 jul, 0/12 ⭐) nearly invisible on white cards. Daily-log activity cards use bg-white but are re-tinted dark via the rule above; they must NOT be listed here. */ body.parent-magic-view:not(.parent-theme-light) .day-col { background: #ffffff !important; border-color: #e5e7eb !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .dark\:text-white, body.parent-magic-view:not(.parent-theme-light) .day-col .dark\:text-slate-400, body.parent-magic-view:not(.parent-theme-light) .day-col .day-name, body.parent-magic-view:not(.parent-theme-light) .day-col .day-date, body.parent-magic-view:not(.parent-theme-light) .day-col .day-star-progress { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .day-date, body.parent-magic-view:not(.parent-theme-light) .day-col .day-star-progress.is-soft, body.parent-magic-view:not(.parent-theme-light) .day-col .section-label, body.parent-magic-view:not(.parent-theme-light) .day-col .empty-day { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .day-name.is-today { color: #c88400 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .day-star-progress.is-complete { color: #16a34a !important; } /* Dashboard child cards keep a white surface in dark magic — force readable dark text. Android platform-native.css can force #childCardsGrid visible; global .text-navy / .text-text-soft overrides would make name/stats nearly invisible on white cards. */ body.parent-magic-view:not(.parent-theme-light) .dash-child-card { background: #ffffff !important; border-color: #ede7f6 !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .text-navy, body.parent-magic-view:not(.parent-theme-light) .dash-child-card h4, body.parent-magic-view:not(.parent-theme-light) .dash-child-card h4 a { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .dash-child-card .dash-stat-secondary { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .dash-stat-primary { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .dash-status-row { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .dash-status-row strong { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .dash-child-card .dash-expand-chevron { color: #9ca3af !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .text-navy, body.parent-magic-view:not(.parent-theme-light) .day-col .font-heading, body.parent-magic-view:not(.parent-theme-light) .day-col .font-semibold, body.parent-magic-view:not(.parent-theme-light) .day-col .act-name { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .day-col .dark\:text-slate-400, body.parent-magic-view:not(.parent-theme-light) .day-col .section-label, body.parent-magic-view:not(.parent-theme-light) .day-col .empty-day { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .text-gold { color: #f5a623 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .text-green-600 { color: #16a34a !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .day-header { border-bottom-color: #e5e7eb !important; } body.parent-magic-view:not(.parent-theme-light) .day-col.today .day-header { background: #fff3d6 !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .prog-bar { background: #e5e7eb !important; } body.parent-magic-view:not(.parent-theme-light) .day-col .act-item.completed-item .act-name { color: #9ca3af !important; } /* Daily log — activity cards inherit dark magic panel bg; keep light text */ body.parent-magic-view:not(.parent-theme-light)[data-magic-page="daily-log"] #logContent .activity-card .text-navy, body.parent-magic-view:not(.parent-theme-light)[data-magic-page="daily-log"] #logContent .activity-card .activity-name { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light)[data-magic-page="daily-log"] #logContent .activity-card .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light)[data-magic-page="daily-log"] #logContent .activity-card.completed .activity-name { color: rgba(244, 244, 255, 0.55) !important; } body.parent-magic-view:not(.parent-theme-light) .child-tab.border-lavender { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .child-tab.bg-navy { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; } /* Barnprofil — tab pills readable on magic dark (bg-white + global .text-navy broke contrast) */ body.parent-magic-view:not(.parent-theme-light) #childProfileTabBar { background: rgba(12, 12, 36, 0.92) !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.parent-magic-view:not(.parent-theme-light) #childProfileTabBar .child-profile-tab:not(.is-active) { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #childProfileTabBar .child-profile-tab.is-active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; } body.parent-magic-view.parent-theme-light #childProfileTabBar .child-profile-tab:not(.is-active) { background: #ffffff; border: 1px solid #ede7f6; color: #1b2340; } body.parent-magic-view.parent-theme-light #childProfileTabBar .child-profile-tab.is-active { background: #f5a623; border-color: transparent; color: #1b2340; } body.parent-magic-view:not(.parent-theme-light) .day-tab.border-lavender { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .day-tab.bg-gold { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .insert-day-btn.bg-white { background: rgba(255, 255, 255, 0.1) !important; color: #ffcc33 !important; border-color: rgba(255, 204, 51, 0.35) !important; } /* Family week grid — readable in magic */ body.parent-magic-view:not(.parent-theme-light) .fw-child-cell, body.parent-magic-view:not(.parent-theme-light) .fw-day-header, body.parent-magic-view:not(.parent-theme-light) .fw-corner { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .fw-day-cell { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.parent-magic-view:not(.parent-theme-light) .fw-pill { background: rgba(12, 12, 36, 0.65) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .fw-scroll { border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view:not(.parent-theme-light) .text-navy, body.parent-magic-view:not(.parent-theme-light) h2, body.parent-magic-view:not(.parent-theme-light) h3, body.parent-magic-view:not(.parent-theme-light) h4 { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .text-text-soft { color: rgba(244, 244, 255, 0.62) !important; } body.parent-magic-view:not(.parent-theme-light) #widgetSettingsSection .text-navy-soft { color: rgba(244, 244, 255, 0.62) !important; } body.parent-magic-view:not(.parent-theme-light) #widgetSettingsSection .widget-settings-msg--error { color: #fca5a5 !important; } body.parent-magic-view:not(.parent-theme-light) #widgetSettingsSection .widget-settings-msg--ok { color: #86efac !important; } .native-settings-back-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; position: relative; z-index: 30; } .native-settings-back-link, .native-settings-menu-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 14px; font-size: 14px; font-weight: 700; font-family: inherit; text-decoration: none; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.1); color: #f4f4ff; } html:not(.dark) .native-settings-back-link, html:not(.dark) .native-settings-menu-link, body.parent-theme-light .native-settings-back-link, body.parent-theme-light .native-settings-menu-link { background: #fff; color: #1b2340; border-color: rgba(27, 35, 64, 0.12); } body.parent-magic-view:not(.parent-theme-light) input[type="text"], body.parent-magic-view:not(.parent-theme-light) input[type="email"], body.parent-magic-view:not(.parent-theme-light) input[type="password"], body.parent-magic-view:not(.parent-theme-light) input[type="search"], body.parent-magic-view:not(.parent-theme-light) input[type="number"], body.parent-magic-view:not(.parent-theme-light) select, body.parent-magic-view:not(.parent-theme-light) textarea { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } body.parent-magic-view:not(.parent-theme-light) .border-lavender, body.parent-magic-view:not(.parent-theme-light) hr.border-lavender { border-color: rgba(255, 255, 255, 0.12) !important; } /* ── Buttons — readable on dark magic shell ── */ body.parent-magic-view:not(.parent-theme-light) button.bg-gold, body.parent-magic-view:not(.parent-theme-light) a.bg-gold, body.parent-magic-view:not(.parent-theme-light) button.bg-yellow-500, body.parent-magic-view:not(.parent-theme-light) a.bg-yellow-500 { background: linear-gradient(180deg, #ffd966 0%, #f5a623 100%) !important; color: #1b2340 !important; border: none; } body.parent-magic-view:not(.parent-theme-light) button.bg-lavender, body.parent-magic-view:not(.parent-theme-light) a.bg-lavender, body.parent-magic-view:not(.parent-theme-light) button.bg-sky, body.parent-magic-view:not(.parent-theme-light) a.bg-sky, body.parent-magic-view:not(.parent-theme-light) button.bg-white, body.parent-magic-view:not(.parent-theme-light) a.bg-white { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) button.bg-navy, body.parent-magic-view:not(.parent-theme-light) a.bg-navy { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } body.parent-magic-view:not(.parent-theme-light) button.bg-coral, body.parent-magic-view:not(.parent-theme-light) a.bg-coral { background: rgba(239, 68, 68, 0.22) !important; border-color: rgba(248, 113, 113, 0.45) !important; color: #fecaca !important; } body.parent-magic-view:not(.parent-theme-light) .view-btn { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: rgba(244, 244, 255, 0.78) !important; } body.parent-magic-view:not(.parent-theme-light) .view-btn:hover { border-color: rgba(255, 204, 51, 0.45) !important; color: #ffcc33 !important; } body.parent-magic-view:not(.parent-theme-light) .view-btn.active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; border-color: transparent !important; } body.parent-magic-view:not(.parent-theme-light) .schedule-mode-toggle { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view:not(.parent-theme-light) .schedule-mode-btn { background: transparent !important; color: rgba(244, 244, 255, 0.75) !important; } body.parent-magic-view:not(.parent-theme-light) .schedule-mode-btn:hover { background: rgba(255, 255, 255, 0.06) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .schedule-mode-btn.active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .cal-view-btn.bg-white { background: rgba(255, 255, 255, 0.08) !important; color: rgba(244, 244, 255, 0.82) !important; border-color: rgba(255, 255, 255, 0.14) !important; } body.parent-magic-view:not(.parent-theme-light) .cal-view-btn.bg-navy { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-cta-primary { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-cta-secondary { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-intent-option { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-intent-option:hover { background: rgba(255, 204, 51, 0.12) !important; border-color: rgba(255, 204, 51, 0.4) !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend-activate { background: rgba(255, 204, 51, 0.12) !important; border-color: rgba(255, 204, 51, 0.45) !important; color: #ffcc33 !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-greeting, body.parent-magic-view:not(.parent-theme-light) .for-dig-focus { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-goal-card, body.parent-magic-view:not(.parent-theme-light) .for-dig-favorites, body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend, body.parent-magic-view:not(.parent-theme-light) .for-dig-most-installed, body.parent-magic-view:not(.parent-theme-light) .for-dig-popular { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f4f4ff; } body.parent-magic-view:not(.parent-theme-light) .for-dig-most-installed .text-navy, body.parent-magic-view:not(.parent-theme-light) .for-dig-most-installed .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .for-dig-favorites .text-navy, body.parent-magic-view:not(.parent-theme-light) .for-dig-favorites .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend .text-navy, body.parent-magic-view:not(.parent-theme-light) .for-dig-goal-card .text-navy, body.parent-magic-view:not(.parent-theme-light) .for-dig-goal-card .text-text-soft, body.parent-magic-view:not(.parent-theme-light).for-dig-page .text-navy { color: #f4f4ff !important; } /* För dig — section titles use for-dig-section-title (navy in for-dig.css), not .text-navy */ body.parent-magic-view:not(.parent-theme-light) .for-dig-section-title, body.parent-magic-view:not(.parent-theme-light) .for-dig-magic-focus, body.parent-magic-view:not(.parent-theme-light) .for-dig-decision__headline, body.parent-magic-view:not(.parent-theme-light) .for-dig-decision__promise, body.parent-magic-view:not(.parent-theme-light) .for-dig-decision__point, body.parent-magic-view:not(.parent-theme-light) .for-dig-activate-header__title { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-section-sub, body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend-highlight, body.parent-magic-view:not(.parent-theme-light) .for-dig-activate-header__tagline, body.parent-magic-view:not(.parent-theme-light) .for-dig-decision__label, body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .for-dig-goal-teasers li { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-recommend-done { color: #6ee7a0 !important; } body.parent-magic-view:not(.parent-theme-light).for-dig-page .text-text-soft, body.parent-magic-view:not(.parent-theme-light) .for-dig-goal-card .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-suggestion-link { color: rgba(255, 204, 51, 0.9) !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-badge.for-dig-popular-badge { background: rgba(255, 204, 51, 0.2) !important; color: #ffcc33 !important; } body.parent-magic-view:not(.parent-theme-light) .for-dig-modal { background: #12122e !important; color: #f4f4ff !important; border: 1px solid rgba(255, 255, 255, 0.12); } body.parent-magic-page-schedule .magic-page-shell { padding-bottom: 0; } body.parent-magic-page-schedule main > .bg-sky { background: transparent !important; border: none !important; padding-top: 0 !important; } /* Kalender (schemaöversikt) — magic chrome + veckonav */ body.parent-magic-view.parent-magic-page-calendar .parent-magic-hide-header { display: none !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) #weekLabel { color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) #weekSubLabel { color: rgba(244, 244, 255, 0.65) !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) .nav-btn { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) .nav-btn:hover { background: rgba(255, 204, 51, 0.18) !important; border-color: rgba(255, 204, 51, 0.45) !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) .child-tab:not(.active) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-calendar:not(.parent-theme-light) .child-tab.active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-calendar #weekLabel, body.parent-magic-view.parent-theme-light.parent-magic-page-calendar #weekSubLabel, body.parent-magic-view.parent-theme-light.parent-magic-page-calendar .nav-btn, body.parent-magic-view.parent-theme-light.parent-magic-page-calendar .child-tab:not(.active) { color: #1b2340 !important; } /* Magic shell — dark bottom tab bar on all parent pages (not only dashboard) */ body.parent-magic-view:not(.parent-theme-light) .native-tab-bar, body.parent-magic-view:not(.parent-theme-light) .parent-bottom-nav { background: rgba(12, 12, 36, 0.92) !important; border-top: 1px solid rgba(255, 204, 51, 0.15) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } body.parent-magic-view:not(.parent-theme-light) .native-tab-bar .tab-item { color: rgba(244, 244, 255, 0.55) !important; } body.parent-magic-view:not(.parent-theme-light) .native-tab-bar .tab-item.active, body.parent-magic-view:not(.parent-theme-light) .parent-bottom-nav-btn.is-active { color: #ffcc33 !important; } /* Skattkammaren — dark magic shell (placeholder + child chips) */ body.parent-magic-view[data-magic-page="skattkammaren"] #mainContent { background: linear-gradient(180deg, #0b0b2a 0%, #07071a 100%) !important; } body.parent-magic-view[data-magic-page="skattkammaren"] #placeholderState .text-navy, body.parent-magic-view[data-magic-page="skattkammaren"] #placeholderState .font-heading { color: #f4f4ff !important; } body.parent-magic-view[data-magic-page="skattkammaren"] #placeholderState .text-text-soft, body.parent-magic-view[data-magic-page="skattkammaren"] #loadingState { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view[data-magic-page="skattkammaren"] .bg-white.border-b.border-lavender { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.1) !important; } body.parent-magic-view[data-magic-page="skattkammaren"] #childChips .text-text-soft, body.parent-magic-view[data-magic-page="skattkammaren"] #childChips .text-navy { color: rgba(244, 244, 255, 0.85) !important; } /* Planning / Rewards — hide classic page title (magic hero replaces it) */ body.parent-magic-view.parent-magic-page-planning .parent-magic-hide-header, body.parent-magic-view.parent-magic-page-rewards .parent-magic-hide-header { display: none !important; } body.parent-magic-view.parent-magic-page-planning .magic-hub-content, body.parent-magic-view.parent-magic-page-rewards .magic-hub-content, body.parent-magic-view.parent-magic-page-family .magic-hub-content { padding-top: 0; } body.parent-magic-view.parent-magic-page-family .family-hub-intro h1 { font-size: 1.25rem; line-height: 1.3; } body.parent-magic-view.parent-magic-page-family .family-child-card { border: 1px solid rgba(255, 255, 255, 0.1); } body.parent-magic-view.parent-theme-light.parent-magic-page-family .family-child-card { border-color: rgba(27, 35, 64, 0.08); } body.parent-magic-view:not(.parent-theme-light) .magic-hub-links a { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .magic-hub-links a:hover { border-color: rgba(255, 204, 51, 0.45) !important; } body.parent-magic-view:not(.parent-theme-light) .magic-hub-links .text-navy { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .magic-hub-links .text-text-soft { color: rgba(244, 244, 255, 0.68) !important; } body.parent-magic-view .magic-hub-section-label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(244, 244, 255, 0.45); margin: 0 0 10px 2px; } body.parent-magic-view.parent-theme-light .magic-hub-section-label { color: rgba(27, 35, 64, 0.5); } /* Dashboard invite/share CTAs — readable on dark magic shell */ body.parent-magic-view #medforalderCtaBanner, body.parent-magic-view #delaAppenCtaBanner { background: rgba(255, 204, 51, 0.14) !important; border: 2px solid rgba(255, 204, 51, 0.55) !important; box-shadow: 0 4px 18px rgba(255, 204, 51, 0.12); } /* Magic home hub replaces the legacy banner row */ body.parent-magic-dashboard #medforalderCtaBanner { display: none !important; } body.parent-magic-view #medforalderCtaBtn { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; font-weight: 800 !important; } body.parent-magic-view #delaAppenCtaBanner { border-color: rgba(167, 139, 250, 0.45) !important; } body.parent-magic-view #medforalderCtaBanner .text-navy, body.parent-magic-view #delaAppenCtaBanner .text-navy, body.parent-magic-view #medforalderCtaBanner .font-semibold, body.parent-magic-view #delaAppenCtaBanner .font-semibold { color: #f4f4ff !important; } body.parent-magic-view #medforalderCtaBanner .text-text-soft, body.parent-magic-view #delaAppenCtaBanner .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } /* Settings — account deletion warning readable in magic view */ body.parent-magic-view #deletionSection .bg-coral { background: rgba(239, 68, 68, 0.18) !important; border: 1px solid rgba(248, 113, 113, 0.4); } body.parent-magic-view #deletionSection .bg-coral .text-navy { color: #fecaca !important; } /* Fallback: fixed icons when view toggle is not shown (non-allowlisted families) */ body.parent-magic-view main:not(:has(.parent-top-chrome)) > .parent-nav-header-actions { position: fixed !important; top: max(10px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); left: auto; width: auto; padding: 0; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 250; pointer-events: none; } body.parent-magic-view main:not(:has(.parent-top-chrome)) > .parent-nav-header-actions > * { pointer-events: auto; } body.parent-magic-view .parent-top-chrome .parent-nav-header-actions { position: static !important; top: auto !important; right: auto !important; pointer-events: auto !important; } body.parent-magic-view:not(.parent-theme-light) [data-parent-nav-notifications] { background: rgba(255, 255, 255, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; color: #1b2340 !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); } body.parent-magic-view #parentAvatarBtn { background: #f5a623 !important; color: #1b2340 !important; border: 1px solid rgba(255, 204, 51, 0.55) !important; font-weight: 800; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } body.parent-magic-view.parent-magic-page-assign-schedule .parent-magic-hide-header { display: none !important; } /* Tilldela schema — dark magic contrast (dark theme only) */ body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .week-label, body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .nav-btn, body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .today-btn { color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .nav-btn, body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .today-btn { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .nav-btn:hover, body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .today-btn:hover { border-color: rgba(255, 204, 51, 0.45) !important; color: #ffcc33 !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .day-btn { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .day-btn.active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .day-btn.active .day-date { color: #1b2340 !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .bg-sky.border-2.border-lavender { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .schema-card { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .schema-card.selected { background: rgba(255, 204, 51, 0.14) !important; border-color: rgba(255, 204, 51, 0.45) !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .schema-card .text-navy, body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .schema-card .font-semibold { color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .schema-card .text-text-soft { color: rgba(244, 244, 255, 0.68) !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .save-btn { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; } body.parent-magic-view.parent-magic-page-assign-schedule:not(.parent-theme-light) .save-btn.saved { background: #10b981 !important; color: #fff !important; } /* Tilldela schema — light theme readability */ body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .week-label, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .nav-btn, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .today-btn, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .day-btn { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .nav-btn, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .today-btn, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .day-btn { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.14) !important; box-shadow: 0 1px 3px rgba(20, 16, 45, 0.06); } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .day-btn.active { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; border-color: transparent !important; color: #1b2340 !important; box-shadow: 0 2px 8px rgba(245, 166, 35, 0.25); } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .day-btn.active .day-date { color: #1b2340 !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .day-btn.today-dot .day-date { color: #2563eb !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .bg-sky.border-2.border-lavender { background: #f8f6ff !important; border-color: rgba(20, 16, 45, 0.12) !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .schema-card { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.12) !important; box-shadow: 0 1px 3px rgba(20, 16, 45, 0.06); } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .schema-card.selected { background: #fff8e6 !important; border-color: rgba(245, 166, 35, 0.55) !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .schema-card .text-navy, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .schema-card .font-semibold, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule #dayPanelTitle, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule #emptyState .font-semibold { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .schema-card .text-text-soft, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule #dayPanelSubtitle, body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule #emptyState { color: rgba(26, 22, 51, 0.62) !important; } body.parent-magic-view.parent-theme-light.parent-magic-page-assign-schedule .save-btn { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-overlay { z-index: 10300 !important; pointer-events: auto; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-overlay.hidden { display: none !important; pointer-events: none !important; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box { background: #141432 !important; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box h3, body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box .text-navy { color: #f4f4ff !important; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box .text-text-soft, body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box p { color: rgba(244, 244, 255, 0.78) !important; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box button { color: #f4f4ff !important; border-color: rgba(255, 255, 255, 0.2) !important; } body.parent-magic-view.parent-magic-page-assign-schedule .confirm-box #confirmReplaceBtn { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; border-color: transparent !important; } /* Family modals — solid panel on dark magic shell */ body.parent-magic-view #addAdultModal > div, body.parent-magic-view #addChildModal > div, body.parent-magic-view #inviteModal > div, body.parent-magic-view #deleteModal > div, body.parent-magic-view #manualStarModal > div { background: #141432 !important; border: 1px solid rgba(255, 255, 255, 0.12); color: #f4f4ff; } body.parent-magic-view #addAdultModal .text-navy, body.parent-magic-view #addChildModal .text-navy, body.parent-magic-view #inviteModal .text-navy, body.parent-magic-view #deleteModal .text-navy { color: #f4f4ff !important; } body.parent-magic-view #addAdultModal input, body.parent-magic-view #addAdultModal select, body.parent-magic-view #addChildModal input, body.parent-magic-view #inviteModal input, body.parent-magic-view #manualStarModal input, body.parent-magic-view #manualStarModal textarea { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } /* Dashboard — Ge extra stjärnor / ledig dag (white panel, dark magic) */ body.parent-magic-view:not(.parent-theme-light) #giveStarsModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #giveStarsModal label, body.parent-magic-view:not(.parent-theme-light) #giveStarsModal h3, body.parent-magic-view:not(.parent-theme-light) #giveStarsPickerModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #giveStarsPickerModal h3, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal h3, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal .font-semibold { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #giveStarsModal .text-text-soft, body.parent-magic-view:not(.parent-theme-light) #giveStarsPickerModal .text-text-soft, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) #giveStarsModal input, body.parent-magic-view:not(.parent-theme-light) #giveStarsModal button[type="button"], body.parent-magic-view:not(.parent-theme-light) #giveStarsPickerModal button[type="button"], body.parent-magic-view:not(.parent-theme-light) #ledigDagModal button[type="button"] { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #giveStarsModal #giveStarsCount, body.parent-magic-view:not(.parent-theme-light) #giveStarsModal #giveStarsReason { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } /* Solid modal panels — do not let .bg-white transparency apply to the shell */ body.parent-magic-view:not(.parent-theme-light) #giveStarsPickerModal > div, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal > div { background: #1b2340 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5) !important; } body.parent-magic-view:not(.parent-theme-light) #giveStarsModal .bg-sky, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal #ledigDagList .bg-white, body.parent-magic-view:not(.parent-theme-light) #ledigDagModal #ledigDagList .bg-red-50 { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view.parent-theme-light #giveStarsModal > div, body.parent-magic-view.parent-theme-light #giveStarsPickerModal > div, body.parent-magic-view.parent-theme-light #ledigDagModal > div { background: #ffffff !important; color: #1b2340 !important; } body.parent-magic-view.parent-theme-light #giveStarsModal .text-navy, body.parent-magic-view.parent-theme-light #giveStarsModal label, body.parent-magic-view.parent-theme-light #giveStarsModal h3, body.parent-magic-view.parent-theme-light #giveStarsPickerModal .text-navy, body.parent-magic-view.parent-theme-light #giveStarsPickerModal h3, body.parent-magic-view.parent-theme-light #ledigDagModal .text-navy, body.parent-magic-view.parent-theme-light #ledigDagModal h3, body.parent-magic-view.parent-theme-light #ledigDagModal .font-semibold { color: #1b2340 !important; } body.parent-magic-view.parent-theme-light #giveStarsModal #giveStarsCount, body.parent-magic-view.parent-theme-light #giveStarsModal #giveStarsReason, body.parent-magic-view.parent-theme-light #giveStarsModal button[type="button"]:not(.bg-gold):not(#giveStarsSubmitBtn), body.parent-magic-view.parent-theme-light #giveStarsPickerModal button[type="button"], body.parent-magic-view.parent-theme-light #ledigDagModal button[type="button"]:not(.bg-gold):not(.bg-green-500):not(.bg-coral) { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.16) !important; color: #1b2340 !important; } /* Dashboard — add / create activity modals (engångsaktivitet, lägg till) */ body.parent-magic-view #addActivityModal > div, body.parent-magic-view #createActivityModal > div, body.parent-magic-view #recurrenceModal > div, body.parent-magic-view #editItemModal > div { background: #141432 !important; border: 1px solid rgba(255, 255, 255, 0.14); color: #f4f4ff; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #addActivityModal label, body.parent-magic-view:not(.parent-theme-light) #addActivityModal h3, body.parent-magic-view:not(.parent-theme-light) #addActivityModal h4, body.parent-magic-view:not(.parent-theme-light) #createActivityModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #createActivityModal label, body.parent-magic-view:not(.parent-theme-light) #createActivityModal h3, body.parent-magic-view:not(.parent-theme-light) #recurrenceModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #recurrenceModal h3, body.parent-magic-view:not(.parent-theme-light) #editItemModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #editItemModal label, body.parent-magic-view:not(.parent-theme-light) #editItemModal h3 { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal .text-text-soft, body.parent-magic-view:not(.parent-theme-light) #createActivityModal .text-text-soft, body.parent-magic-view:not(.parent-theme-light) #recurrenceModal .text-text-soft, body.parent-magic-view:not(.parent-theme-light) #editItemModal .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal input, body.parent-magic-view:not(.parent-theme-light) #addActivityModal select, body.parent-magic-view:not(.parent-theme-light) #addActivityModal textarea, body.parent-magic-view:not(.parent-theme-light) #createActivityModal input, body.parent-magic-view:not(.parent-theme-light) #createActivityModal select, body.parent-magic-view:not(.parent-theme-light) #createActivityModal textarea, body.parent-magic-view:not(.parent-theme-light) #recurrenceModal input, body.parent-magic-view:not(.parent-theme-light) #editItemModal input, body.parent-magic-view:not(.parent-theme-light) #editItemModal select, body.parent-magic-view:not(.parent-theme-light) #editItemModal textarea { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #f4f4ff !important; color-scheme: dark; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal input[type="time"], body.parent-magic-view:not(.parent-theme-light) #addActivityModal input[type="date"], body.parent-magic-view:not(.parent-theme-light) #createActivityModal input[type="time"], body.parent-magic-view:not(.parent-theme-light) #createActivityModal input[type="date"] { background: rgba(255, 255, 255, 0.1) !important; color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal #templateList button, body.parent-magic-view:not(.parent-theme-light) #addActivityModal #templateList .text-navy, body.parent-magic-view:not(.parent-theme-light) #addActivityModal #addActivityOnceChildList .text-navy, body.parent-magic-view:not(.parent-theme-light) #addActivityModal #addActivityOnceChildList label { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal .section-pick-btn:not(.bg-navy), body.parent-magic-view:not(.parent-theme-light) #addActivityModal button[type="button"]:not(.bg-gold):not(.bg-navy), body.parent-magic-view:not(.parent-theme-light) #createActivityModal button[type="button"]:not(.bg-gold), body.parent-magic-view:not(.parent-theme-light) #recurrenceModal button[type="button"]:not(.bg-gold) { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal .bg-sky, body.parent-magic-view:not(.parent-theme-light) #addActivityModal #selectedTemplateInfo, body.parent-magic-view:not(.parent-theme-light) #addActivityModal #addActivityOnceWrap, body.parent-magic-view:not(.parent-theme-light) #createActivityModal .bg-sky, body.parent-magic-view:not(.parent-theme-light) #createActivityModal .bg-purple-50 { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view:not(.parent-theme-light) #addActivityModal #addActivityOnceWrap .bg-white { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-view.parent-theme-light #addActivityModal > div, body.parent-magic-view.parent-theme-light #createActivityModal > div, body.parent-magic-view.parent-theme-light #recurrenceModal > div, body.parent-magic-view.parent-theme-light #editItemModal > div { background: #ffffff !important; color: #1b2340 !important; } body.parent-magic-view.parent-theme-light #addActivityModal input[type="time"], body.parent-magic-view.parent-theme-light #addActivityModal input[type="date"], body.parent-magic-view.parent-theme-light #createActivityModal input[type="time"], body.parent-magic-view.parent-theme-light #createActivityModal input[type="date"], body.parent-magic-view.parent-theme-light #editItemModal input[type="time"], body.parent-magic-view.parent-theme-light #editItemModal input[type="date"] { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.16) !important; color: #1b2340 !important; color-scheme: light; } /* Hem — Veckans framsteg (star history chart): light chart surface + dark text on magic dark */ body.parent-magic-view:not(.parent-theme-light) #starHistoryContent, body.parent-magic-view:not(.parent-theme-light) #starHistoryContent.bg-white { background: #ffffff !important; border-color: #e5e7eb !important; color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .text-navy, body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .font-semibold, body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .font-bold { color: #1b2340 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .text-text-soft { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .text-gold { color: #b45309 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryContent .text-emerald-700 { color: #047857 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .dash-week-story-inner { background: linear-gradient(135deg, #fff8e7, #ffffff) !important; border-color: #f5d78e !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .dash-week-total { color: #b45309 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .dash-week-diff, body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .dash-week-best, body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .text-text-soft { color: #5a6178 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .dash-week-best { color: #047857 !important; } body.parent-magic-view:not(.parent-theme-light) #starHistoryStory .text-emerald-700 { color: #047857 !important; } /* Magic hub — week line chart labels (parent-week-section at bottom of Hem) */ body.parent-magic-view:not(.parent-theme-light) .parent-week-section h3 { color: #f4f4ff !important; } body.parent-magic-view:not(.parent-theme-light) .parent-week-section .parent-week-labels, body.parent-magic-view:not(.parent-theme-light) .parent-week-section .parent-week-labels span:not(.is-today) { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view:not(.parent-theme-light) .parent-week-section .parent-week-labels .is-today { color: #ffcc33 !important; } /* Share popup — white card must stay readable (global dark input rule breaks recipient field) */ body.parent-magic-view .share-popup-card .share-popup-field-label, body.parent-magic-view .share-popup-card .share-popup-header strong { color: #1b2340 !important; } body.parent-magic-view .share-popup-card .share-popup-text { color: #5a6178 !important; } body.parent-magic-view .share-popup-card .share-popup-field-input, body.parent-magic-view .share-popup-card input[type="text"], body.parent-magic-view .share-popup-card input[type="email"] { background: #ffffff !important; border-color: rgba(28, 35, 64, 0.18) !important; color: #1b2340 !important; } body.parent-magic-view .share-popup-card .share-popup-field-input::placeholder, body.parent-magic-view .share-popup-card input[type="text"]::placeholder, body.parent-magic-view .share-popup-card input[type="email"]::placeholder { color: #8a92aa !important; } /* Modal panels — opaque (global .bg-white dimming must not apply) */ body.parent-magic-view .magic-modal-panel, body.parent-magic-view .fixed.inset-0 > .bg-white.rounded-2xl, body.parent-magic-view #ledigDagModal > .bg-white.rounded-2xl, body.parent-magic-view #giveStarsPickerModal > .bg-white.rounded-2xl, body.parent-magic-view #medforalderCtaModal .bg-white, body.parent-magic-library .library-modal-overlay .magic-modal-panel, body.parent-magic-library #activityModal .activity-modal-panel { background: #141432 !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #f4f4ff !important; } body.parent-magic-library .magic-modal-panel .text-navy, body.parent-magic-library .magic-modal-panel .font-heading, body.parent-magic-library .magic-modal-panel label, body.parent-magic-library .magic-modal-panel h3, body.parent-magic-library .magic-modal-panel h4 { color: #f4f4ff !important; } body.parent-magic-library .magic-modal-panel .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-library .magic-modal-panel input[type="text"], body.parent-magic-library .magic-modal-panel input[type="search"], body.parent-magic-library .magic-modal-panel input[type="date"], body.parent-magic-library .magic-modal-panel textarea, body.parent-magic-library .magic-modal-panel select { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } body.parent-magic-library .magic-modal-panel .bg-sky, body.parent-magic-library #activityPhotoBlock, body.parent-magic-library #activityEmojiBlock .bg-sky { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.12) !important; } body.parent-magic-library .activity-image-pick { border-color: rgba(255, 255, 255, 0.14) !important; background: rgba(255, 255, 255, 0.06) !important; } /* Copy-schedule modal (library) — white panel keeps dark readable inputs in magic dark */ body.parent-magic-view:not(.parent-theme-light) #scheduleCopyModal input[type="date"], body.parent-magic-view:not(.parent-theme-light) #scheduleCopyModal input[type="text"] { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.16) !important; color: #1a1633 !important; } body.parent-magic-view:not(.parent-theme-light) #scheduleCopyModal .text-navy, body.parent-magic-view:not(.parent-theme-light) #scheduleCopyModal label, body.parent-magic-view:not(.parent-theme-light) #scheduleCopyModal h3 { color: #1B2340 !important; } body.parent-magic-view .planning-magic-back { margin: 12px 16px 0; } body.parent-magic-view #medforalderCtaModal .text-navy, body.parent-magic-view #medforalderCtaModal .font-heading, body.parent-magic-view #medforalderCtaModal label { color: #f4f4ff !important; } body.parent-magic-view #medforalderCtaModal .text-text-soft { color: rgba(244, 244, 255, 0.72) !important; } body.parent-magic-view #medforalderCtaModal input { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } body.parent-magic-view #medforalderCtaModal { z-index: 10050 !important; } body.parent-magic-view #coParentInviteSection .text-navy, body.parent-magic-view #coParentInviteSection label, body.parent-magic-view #coParentInviteOpenBtn { color: #f4f4ff !important; } body.parent-magic-view #coParentInviteOpenBtn { background: linear-gradient(135deg, #ffcc33, #f5a623) !important; color: #1b2340 !important; font-weight: 800 !important; } body.parent-magic-view #coParentInviteModal .text-navy, body.parent-magic-view #coParentInviteModal label, body.parent-magic-view #coParentInviteModal h2 { color: #f4f4ff !important; } body.parent-magic-view #coParentInviteModal input, body.parent-magic-view #coParentInviteModal select { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } /* ════════════════════════════════════════════════════════════════════ LIGHT THEME — additive overrides (body.parent-theme-light) The magic design is dark-first; these rules flip the recurring tokens to a light palette. Higher specificity (extra .parent-theme-light on body) + !important means they win over the dark rules above without touching them. Default (no class / .parent-theme-dark) stays dark. Light tokens: page bg #f4f1ff text #1a1633 text soft rgba(26,22,51,.62) surface #ffffff border rgba(20,16,45,.10) Gold accents (#ffcc33 / gradients with dark text) are readable on light too and are intentionally left unchanged. ════════════════════════════════════════════════════════════════════ */ html.parent-magic-early.parent-theme-light, html.parent-magic-early.parent-theme-light body, body.parent-magic-view.parent-theme-light, body.parent-magic-view.parent-theme-light.bg-sky, body.parent-magic-view.parent-theme-light.bg-cream, body.parent-magic-view.parent-theme-light main, body.parent-magic-view.parent-theme-light .flex-1.overflow-auto { background: #ffffff !important; color: #1a1633 !important; } body.parent-magic-view.parent-theme-light .magic-page-shell { background: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(124, 58, 237, 0.06), transparent 58%), radial-gradient(circle at 90% 20%, rgba(245, 166, 35, 0.05), transparent 40%), linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%) !important; } body.parent-magic-view.parent-theme-light .magic-page-hero-icon { background: linear-gradient(145deg, rgba(124, 58, 237, 0.16), rgba(167, 139, 250, 0.10)) !important; border-color: rgba(20, 16, 45, 0.12) !important; } body.parent-magic-view.parent-theme-light .magic-page-hero p, body.parent-magic-view.parent-theme-light .magic-page-stat-card span, body.parent-magic-view.parent-theme-light .magic-settings-group-text span { color: rgba(26, 22, 51, 0.6) !important; } body.parent-magic-view.parent-theme-light .magic-page-stat-card strong { color: #b8860b !important; } /* Family member cards — visible edges on white page */ body.parent-magic-view.parent-theme-light .child-card-wrap.bg-sky, body.parent-magic-view.parent-theme-light .child-card-wrap .bg-sky, body.parent-magic-view.parent-theme-light #adultsGrid > div.bg-sky { border: 1px solid rgba(20, 16, 45, 0.10) !important; box-shadow: 0 1px 3px rgba(20, 16, 45, 0.06) !important; } /* Generic surfaces / cards */ body.parent-magic-view.parent-theme-light .magic-page-stat-card, body.parent-magic-view.parent-theme-light .magic-settings-group-card, body.parent-magic-view.parent-theme-light .magic-settings-back, body.parent-magic-view.parent-theme-light .magic-hub-links a, body.parent-magic-view.parent-theme-light .for-dig-goal-card, body.parent-magic-view.parent-theme-light .for-dig-favorites, body.parent-magic-view.parent-theme-light .for-dig-recommend, body.parent-magic-view.parent-theme-light .for-dig-most-installed, body.parent-magic-view.parent-theme-light .for-dig-popular, body.parent-magic-view.parent-theme-light .for-dig-intent-option, body.parent-magic-view.parent-theme-light .for-dig-cta-secondary { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.10) !important; color: #1a1633 !important; box-shadow: 0 1px 3px rgba(20, 16, 45, 0.06) !important; } body.parent-magic-view.parent-theme-light .magic-settings-group-card, body.parent-magic-view.parent-theme-light .magic-settings-back { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light .magic-settings-group-icon { background: rgba(20, 16, 45, 0.05) !important; } /* Generic Tailwind tint backgrounds → light surfaces */ body.parent-magic-view.parent-theme-light .bg-white, body.parent-magic-view.parent-theme-light .bg-sky, body.parent-magic-view.parent-theme-light .bg-sky\/40, body.parent-magic-view.parent-theme-light .bg-sky\/60, body.parent-magic-view.parent-theme-light .bg-lavender, body.parent-magic-view.parent-theme-light .bg-mint, body.parent-magic-view.parent-theme-light .bg-gold-light, body.parent-magic-view.parent-theme-light .bg-cream, body.parent-magic-view.parent-theme-light .bg-yellow-50, body.parent-magic-view.parent-theme-light .bg-orange-50, body.parent-magic-view.parent-theme-light .bg-indigo-50, body.parent-magic-view.parent-theme-light .bg-amber-50, body.parent-magic-view.parent-theme-light .bg-gray-50, body.parent-magic-view.parent-theme-light .fw-child-cell, body.parent-magic-view.parent-theme-light .fw-day-header, body.parent-magic-view.parent-theme-light .fw-corner, body.parent-magic-view.parent-theme-light .fw-day-cell { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.10) !important; color: #1a1633 !important; } /* Text colors */ body.parent-magic-view.parent-theme-light .text-navy, body.parent-magic-view.parent-theme-light h1, body.parent-magic-view.parent-theme-light h2, body.parent-magic-view.parent-theme-light h3, body.parent-magic-view.parent-theme-light h4, body.parent-magic-view.parent-theme-light .magic-hub-links .text-navy, body.parent-magic-view.parent-theme-light .for-dig-greeting, body.parent-magic-view.parent-theme-light .for-dig-focus, body.parent-magic-view.parent-theme-light.for-dig-page .text-navy, body.parent-magic-view.parent-theme-light .section-card .text-navy, body.parent-magic-view.parent-theme-light .section-card h4, body.parent-magic-view.parent-theme-light .activity-item .text-navy { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light .text-text-soft, body.parent-magic-view.parent-theme-light .magic-hub-links .text-text-soft, body.parent-magic-view.parent-theme-light .for-dig-goal-card .text-text-soft, body.parent-magic-view.parent-theme-light.for-dig-page .text-text-soft, body.parent-magic-view.parent-theme-light .section-card .text-text-soft, body.parent-magic-view.parent-theme-light .activity-item .text-text-soft { color: rgba(26, 22, 51, 0.62) !important; } /* Inputs */ body.parent-magic-view.parent-theme-light input[type="text"], body.parent-magic-view.parent-theme-light input[type="email"], body.parent-magic-view.parent-theme-light input[type="password"], body.parent-magic-view.parent-theme-light input[type="search"], body.parent-magic-view.parent-theme-light input[type="number"], body.parent-magic-view.parent-theme-light input[type="date"], body.parent-magic-view.parent-theme-light select, body.parent-magic-view.parent-theme-light textarea { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.16) !important; color: #1a1633 !important; } /* Secondary / neutral buttons */ body.parent-magic-view.parent-theme-light button.bg-lavender, body.parent-magic-view.parent-theme-light a.bg-lavender, body.parent-magic-view.parent-theme-light button.bg-sky, body.parent-magic-view.parent-theme-light a.bg-sky, body.parent-magic-view.parent-theme-light button.bg-white, body.parent-magic-view.parent-theme-light a.bg-white, body.parent-magic-view.parent-theme-light .view-btn, body.parent-magic-view.parent-theme-light .schedule-mode-toggle, body.parent-magic-view.parent-theme-light .magic-hub-links a { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.12) !important; color: #1a1633 !important; } /* Borders */ body.parent-magic-view.parent-theme-light .border-lavender, body.parent-magic-view.parent-theme-light hr.border-lavender { border-color: rgba(20, 16, 45, 0.12) !important; } /* Top chrome controls */ body.parent-magic-view.parent-theme-light [data-parent-nav-notifications], body.parent-magic-view.parent-theme-light [data-parent-nav-settings], body.parent-magic-view.parent-theme-light [data-parent-nav-tipsa], body.parent-magic-view.parent-theme-light [data-parent-nav-share] { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.12) !important; color: #1a1633 !important; box-shadow: 0 2px 8px rgba(27, 35, 64, 0.08); } /* Modals / panels → solid white */ body.parent-magic-view.parent-theme-light .magic-modal-panel, body.parent-magic-view.parent-theme-light .for-dig-modal, body.parent-magic-view.parent-theme-light #addAdultModal > div, body.parent-magic-view.parent-theme-light #addChildModal > div, body.parent-magic-view.parent-theme-light #inviteModal > div, body.parent-magic-view.parent-theme-light #deleteModal > div, body.parent-magic-view.parent-theme-light #manualStarModal > div, body.parent-magic-view.parent-theme-light .fixed.inset-0 > .bg-white.rounded-2xl, body.parent-magic-view.parent-theme-light #medforalderCtaModal .bg-white { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.12) !important; color: #1a1633 !important; } body.parent-magic-view.parent-theme-light #addAdultModal .text-navy, body.parent-magic-view.parent-theme-light #addChildModal .text-navy, body.parent-magic-view.parent-theme-light #inviteModal .text-navy, body.parent-magic-view.parent-theme-light #deleteModal .text-navy, body.parent-magic-view.parent-theme-light #medforalderCtaModal .text-navy, body.parent-magic-view.parent-theme-light #medforalderCtaModal label, body.parent-magic-view.parent-theme-light #coParentInviteModal .text-navy, body.parent-magic-view.parent-theme-light #coParentInviteModal label, body.parent-magic-view.parent-theme-light #coParentInviteModal h2 { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light #addAdultModal input, body.parent-magic-view.parent-theme-light #addAdultModal select, body.parent-magic-view.parent-theme-light #addChildModal input, body.parent-magic-view.parent-theme-light #inviteModal input, body.parent-magic-view.parent-theme-light #medforalderCtaModal input, body.parent-magic-view.parent-theme-light #coParentInviteModal input, body.parent-magic-view.parent-theme-light #coParentInviteModal select { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.16) !important; color: #1a1633 !important; } /* Bottom nav */ body.parent-magic-view.parent-theme-light .parent-bottom-nav { background: rgba(255, 255, 255, 0.96) !important; border-top-color: rgba(20, 16, 45, 0.10) !important; } body.parent-magic-view.parent-theme-light .parent-bottom-nav-btn { color: rgba(26, 22, 51, 0.55) !important; } body.parent-magic-view.parent-theme-light .parent-bottom-nav-btn.is-active { color: #b8860b !important; } /* Skattkammaren shell */ body.parent-magic-view.parent-theme-light[data-magic-page="skattkammaren"] #mainContent { background: linear-gradient(180deg, #ffffff 0%, #f4f1ff 100%) !important; } body.parent-magic-view.parent-theme-light[data-magic-page="skattkammaren"] #placeholderState .text-navy, body.parent-magic-view.parent-theme-light[data-magic-page="skattkammaren"] #placeholderState .font-heading { color: #1a1633 !important; } /* Theme picker control (Settings → Utseende) */ .magic-theme-picker { display: flex; gap: 10px; padding: 4px 0 4px; } .magic-theme-option { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 48px; padding: 14px 10px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: inherit; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; position: relative; z-index: 1; } .magic-theme-option .magic-theme-swatch { width: 100%; height: 38px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); } .magic-theme-option .magic-theme-swatch.dark { background: linear-gradient(180deg, #0b0b2a 0%, #07071a 100%); } .magic-theme-option .magic-theme-swatch.light { background: linear-gradient(180deg, #ffffff 0%, #f4f1ff 100%); } .magic-theme-option.is-active { border-color: #ffcc33; box-shadow: 0 0 0 3px rgba(255, 204, 51, 0.2); } body.parent-theme-light .magic-theme-option { border-color: rgba(20, 16, 45, 0.12); background: #ffffff; } body.parent-theme-light .magic-theme-option .magic-theme-swatch { border-color: rgba(20, 16, 45, 0.12); } body.parent-theme-light .magic-theme-option.is-active { border-color: #f5a623; box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18); } /* ════════════════════════════════════════════════════════════════════ LIGHT THEME — parent Home hub (Hem). The home hub is dark-first in dashboard-magic.css (body.parent-magic-dashboard + .parent-home-hub). These overrides flip it to light so the theme toggle also affects Hem. ════════════════════════════════════════════════════════════════════ */ body.parent-magic-view.parent-theme-light.parent-magic-dashboard { background: #ffffff !important; color: #1a1633 !important; } body.parent-magic-view.parent-theme-light.parent-magic-dashboard .parent-bottom-nav, body.parent-magic-view.parent-theme-light.parent-magic-dashboard .native-tab-bar { background: rgba(255, 255, 255, 0.98) !important; border-top-color: rgba(20, 16, 45, 0.08) !important; } body.parent-magic-view.parent-theme-light .parent-home-hub { background: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(124, 58, 237, 0.05), transparent 55%), radial-gradient(circle at 85% 15%, rgba(245, 166, 35, 0.04), transparent 35%), linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%) !important; } body.parent-magic-view.parent-theme-light .parent-hub-greeting, body.parent-magic-view.parent-theme-light .parent-glass-card .parent-ready-head h2, body.parent-magic-view.parent-theme-light .parent-week-section h3, body.parent-magic-view.parent-theme-light .parent-handoff-card .parent-handoff-title, body.parent-magic-view.parent-theme-light .parent-ready-name, body.parent-magic-view.parent-theme-light .parent-action-label, body.parent-magic-view.parent-theme-light .parent-encourage-inline strong { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light .parent-hub-sub, body.parent-magic-view.parent-theme-light .parent-ready-task, body.parent-magic-view.parent-theme-light .parent-handoff-card .parent-handoff-sub, body.parent-magic-view.parent-theme-light .parent-week-labels span, body.parent-magic-view.parent-theme-light .parent-encourage-inline span { color: rgba(26, 22, 51, 0.62) !important; } body.parent-magic-view.parent-theme-light .parent-glass-card, body.parent-magic-view.parent-theme-light .parent-ready-child, body.parent-magic-view.parent-theme-light .parent-action-tile, body.parent-magic-view.parent-theme-light .parent-hub-family-avatar, body.parent-magic-view.parent-theme-light .parent-handoff-secondary { background: #ffffff !important; border-color: rgba(20, 16, 45, 0.10) !important; color: #1a1633 !important; box-shadow: 0 1px 3px rgba(20, 16, 45, 0.06) !important; } body.parent-magic-view.parent-theme-light .parent-handoff-secondary { box-shadow: none !important; } body.parent-magic-view.parent-theme-light .parent-hub-daily-summary .dash-daily-summary { border-color: rgba(20, 16, 45, 0.12) !important; box-shadow: 0 1px 4px rgba(20, 16, 45, 0.06); } body.parent-magic-view.parent-theme-light .parent-coparent-cta { background: linear-gradient(135deg, #fff8e6, #ffffff) !important; border-color: rgba(245, 166, 35, 0.45) !important; } body.parent-magic-view.parent-theme-light .parent-coparent-cta-copy strong { color: #1a1633 !important; } body.parent-magic-view.parent-theme-light .parent-coparent-cta-copy span { color: rgba(26, 22, 51, 0.62) !important; } /* Gold accent buttons / links stay readable — only normalise neutral text */ body.parent-magic-view.parent-theme-light .parent-schedule-link { color: #b8860b !important; }