/* ════════════════════════════════
   LIGHT THEME (additive)
   Active only under html[data-theme="light"]. Zero rules here touch the
   default dark app — this file only adds new selectors for new elements.
   ════════════════════════════════ */

#home-light-shell {
  display: none;
}

html[data-theme="light"] #home-light-shell {
  display: block;
  margin: 16px;
  padding: 40px 16px;
  background: #FFFFFF;
  border: 1px dashed #C9C4E0;
  border-radius: 16px;
  text-align: center;
}

html[data-theme="light"] #home-light-shell .hl-placeholder {
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: #534AB7;
}

/* .container's own base padding (css/styles.css:21) is 20px on every side
   — fine for the dark theme's layout, but combined with #hl-header/#hl-grid's
   own 16px internal padding it leaves a wide, empty double-margin down both
   sides of the light-theme screen. Narrowing it here (light theme only,
   horizontal only) lets the header/day-strip/insight-bar/tile grid — none
   of which have a fixed width, see .hl-grid-tiles's 1fr columns — stretch
   closer to the screen edges instead. */
html[data-theme="light"] .container {
  padding-left: 8px;
  padding-right: 8px;
}

/* ════════════════════════════════
   STAGE 2 — new header
   ════════════════════════════════ */

#hl-header {
  display: none;
}

/* Old elements this stage's header replaces — hidden only under the light
   theme, only these three, nothing else. */
html[data-theme="light"] header,
html[data-theme="light"] #clock-side-widget,
html[data-theme="light"] #insight-bar-wrap {
  display: none;
}

html[data-theme="light"] #hl-header {
  display: block;
  background: #F2F0F8;
  padding: 14px 16px 8px;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
}

html[data-theme="light"] .hl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html[data-theme="light"] .hl-logo-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 1;
  min-width: 0;
}

html[data-theme="light"] .hl-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #534AB7;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="light"] .hl-logo-light {
  font-weight: 400;
  opacity: 0.55;
}

html[data-theme="light"] .hl-clock {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
html[data-theme="light"] #hl-clock-time {
  font-size: 13px;
  font-weight: 700;
  color: #FF8A5B;
  white-space: nowrap;
}
html[data-theme="light"] #hl-clock-date {
  font-size: 10px;
  color: #6B6484;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="light"] .hl-icons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
html[data-theme="light"] .hl-icon-btn {
  background: #EDEBF6;
  border: none;
  border-radius: 8px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html[data-theme="light"] .hl-insight {
  margin-top: 7px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
html[data-theme="light"] .hl-insight-icon {
  font-size: 14px;
  flex-shrink: 0;
}
html[data-theme="light"] .hl-insight-text {
  font-size: 11px;
  color: #2B2740;
  flex: 1;
  text-align: center;
}

html[data-theme="light"] .hl-strip {
  position: relative;
  margin-top: 10px;
  background: #E9E7F7;
  border-radius: 14px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
html[data-theme="light"] .hl-arrow {
  background: none;
  border: none;
  font-size: 16px;
  color: #6B6484;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 4px;
}
html[data-theme="light"] .hl-strip-days {
  display: flex;
  flex: 1;
}
html[data-theme="light"] .hl-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 0;
}
html[data-theme="light"] .hl-day-name {
  font-size: 10px;
  color: #6B6484;
}
html[data-theme="light"] .hl-day-ring-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
html[data-theme="light"] .hl-day-ring {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  transition: opacity 0.2s;
}
html[data-theme="light"] .hl-day-viewing .hl-day-ring {
  opacity: 0.9;
}
html[data-theme="light"] .hl-day-num {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  color: #2B2740;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="light"] .hl-day-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
}
html[data-theme="light"] .hl-day-today .hl-day-num {
  border: 2px solid #7F77DD;
}
html[data-theme="light"] .hl-day-viewing .hl-day-num {
  background: #534AB7;
  color: #EEEDFE;
}

/* Floats above the strip instead of pushing the layout down — absolutely
   positioned against .hl-strip (position:relative, above), so showing or
   hiding it never changes #hl-header's height. */
html[data-theme="light"] .hl-today-btn {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  background: #FFFFFF;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  color: #534AB7;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(83,74,183,0.25);
  white-space: nowrap;
}

/* ════════════════════════════════
   STAGE 3 — module grid
   ════════════════════════════════ */

#hl-grid {
  display: none;
}

/* Old hero pieces this grid replaces — hidden only under the light theme. */
html[data-theme="light"] #orbit-bubbles,
html[data-theme="light"] #home-hero .logo {
  display: none;
}

html[data-theme="light"] #hl-grid {
  display: block;
  padding: 8px 16px 4px;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
}

html[data-theme="light"] .hl-grid-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
html[data-theme="light"] .hl-grid-pct {
  font-size: 13px;
  font-weight: 700;
  color: #534AB7;
}
html[data-theme="light"] .hl-grid-title {
  font-size: 13px;
  color: #2B2740;
  flex: 1;
}
html[data-theme="light"] .hl-today-summary-btn {
  background: #EDEBF6;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #534AB7;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

html[data-theme="light"] .hl-grid-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

html[data-theme="light"] .hl-tile {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

html[data-theme="light"] .hl-ring-wrap {
  position: relative;
  width: 64px;
  height: 64px;
}
html[data-theme="light"] .hl-ring-svg {
  transform: rotate(-90deg);
}
html[data-theme="light"] .hl-ring-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

html[data-theme="light"] .hl-tile-label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
html[data-theme="light"] .hl-tile-value {
  font-size: 10px;
  color: #6B6484;
  text-align: center;
}
html[data-theme="light"] .hl-tile-value-sub {
  margin-top: -4px;
  opacity: 0.85;
}

/* Bottom nav bar clears the grid — added padding, additive only.
   Matches #hl-bottomnav's shrunk height below (~12px less than before). */
html[data-theme="light"] #hl-grid {
  padding-bottom: 86px;
}

/* ════════════════════════════════
   STAGE 4 — bottom nav

   ⚠️ PAIRED FILE, KEPT IN SYNC MANUALLY: couple.html has its own copy of
   this bar (#couple-bottomnav in css/couple-theme-light.css) — it can't
   load this file (built around index.html's ids) or any js/*.js, so the
   visual rules below are duplicated there by hand. Any future change to
   size/color/glow/spacing here should be mirrored there too.
   ════════════════════════════════ */

#hl-bottomnav {
  display: none;
}

/* Old bottom UI this bar replaces — hidden only under the light theme.
   payments-fab now has a grid tile (added alongside living/timers/data). */
html[data-theme="light"] #main-nav-row,
html[data-theme="light"] #fab-cluster-left,
html[data-theme="light"] #timers-fab,
html[data-theme="light"] #living-fab,
html[data-theme="light"] #payments-fab {
  display: none;
}
/* #data-action-btn carries an inline style="display:flex" in the original
   markup — inline styles beat any external rule without !important. */
html[data-theme="light"] #data-action-btn {
  display: none !important;
}

html[data-theme="light"] #hl-bottomnav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-around;
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(83,74,183,0.12);
  padding: 7px 16px calc(7px + env(safe-area-inset-bottom, 0px));
  font-family: 'Heebo', sans-serif;
  direction: rtl;
}

html[data-theme="light"] .hl-nav-btn {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: #6B6484;
  flex: 1;
}
html[data-theme="light"] .hl-nav-btn-active {
  color: #534AB7;
}
html[data-theme="light"] .hl-nav-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="light"] .hl-nav-label {
  font-size: 11px;
  white-space: nowrap;
}
html[data-theme="light"] .hl-nav-btn-active .hl-nav-label {
  font-weight: 700;
}

@keyframes hlAiGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(167,139,250,0.5), 0 0 0 0 rgba(167,139,250,0.35); }
  50%      { box-shadow: 0 4px 18px rgba(167,139,250,0.6), 0 0 0 8px rgba(167,139,250,0); }
}
html[data-theme="light"] .hl-nav-center-btn {
  background: linear-gradient(135deg, rgba(167,139,250,0.85), rgba(255,107,122,0.85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 22px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hlAiGlow 2.5s ease-in-out infinite;
  flex-shrink: 0;
  margin: 0 8px;
}

/* ════════════════════════════════
   STAGE 5 — detail-card overlay (#cat-card-overlay)
   Panels cloned into #cat-card-content by openCatCard() (js/planner.js)
   are NOT edited — they're mostly var(--bg/--surface/--text/--muted/
   --border/--surface2)-driven already. The core token override that
   retints them now lives globally (see "core token override" section
   below) — this section is just the enumerated hardcoded-white spots
   found during planning that the token cascade alone can't reach.
   ════════════════════════════════ */

html[data-theme="light"] .ccs-title {
  color: #2B2740;
  order: 2;
  flex: 1;
  text-align: center;
}

html[data-theme="light"] .wrc-summary-btn {
  background: #F7F6FB;
  border: 1px solid #E3DFF2;
  color: #2B2740;
}
html[data-theme="light"] .wrc-summary-btn:hover {
  background: #EFEDF7;
  border-color: #C9C4E0;
  color: #2B2740;
}

/* SVG chart text (e.g. food's weight/measurement trend axis labels) is
   drawn with a plain fill="rgba(255,255,255,...)" attribute, not inline
   style= — a CSS rule overrides that without touching js/food.js. The
   clone's id is stripped by openCatCard(), so this targets generically.
   #today-popup is included too — it's built by the exact same
   _wrcBuildOpenContent() as the "מבט שבועי" card content, just in a
   different container (round 3 refinements, item 4). */
html[data-theme="light"] #cat-card-content svg text,
html[data-theme="light"] #today-popup svg text {
  fill: #6B6484 !important;
}

html[data-theme="light"] .ccs-close-pill button:hover {
  background: #EFEDF7 !important;
}

/* ════════════════════════════════
   BUGFIX ROUND 1 (post-Stage-5 device testing)
   ════════════════════════════════ */

/* Issue 1 — page background still dark outside the blocks we built.
   The six core tokens are defined once in :root (css/styles.css:1-7) and
   referenced ~300+ times across the whole app (every panel, every popup).
   Overriding them here, scoped to html[data-theme="light"] (not :root
   itself — the dark defaults stay the actual default), cascades the light
   palette to everything under <html>, not just the pieces Stages 1-5
   built by hand. This single block is also what fixes issues 4 and 5
   below (js/theme-toggle.js confirmed via read: #weekly-summary-overlay
   and #planner-panel both already use var(--bg)/var(--surface)/
   var(--border) for their own shell, same as the cat-card panels were). */
html[data-theme="light"] {
  --bg: #F2F0F8;
  --surface: #FFFFFF;
  --surface2: #EFEDF7;
  --border: #E3DFF2;
  --text: #2B2740;
  --muted: #6B6484;
}

/* Issues 2 & 3 — fixed at the source: toggleNavSettings() (js/pomo.js) and
   toggleNotificationsPanel() (js/notifications.js) now fall back to the new
   light-theme header's #hl-settings-btn / #hl-bell-btn when the old header's
   #global-settings-btn / #bell-btn is hidden (width 0), so the panels
   self-position from their real trigger button's rect. No CSS override
   needed here anymore — an !important override would fight those inline
   top/right values regardless of specificity. */

/* Issue 6 — panel heading text too low-contrast. .psh-title's base CSS
   (css/styles.css:1682-1685) hardcodes color:rgba(255,255,255,0.82) — same
   pattern as .ccs-title (Stage 5). The one live instance (planner panel,
   index.html:2326) additionally sets an inline style="color:rgba(74,222,
   128,0.9)" (green, to match its plant emoji) — a light-ish green on the
   new light background is itself low-contrast, and inline styles beat a
   plain external rule regardless of specificity (same lesson as Stage 4's
   #data-action-btn), hence !important here. */
html[data-theme="light"] .psh-title {
  color: #2B2740 !important;
}
html[data-theme="light"] .psh-close {
  color: #6B6484;
}
html[data-theme="light"] .psh-close:hover {
  background: #EFEDF7;
  color: #2B2740;
}

/* ════════════════════════════════
   ROUND 2 — #nav-settings-panel / #notifications-panel / AI cluster
   All three are built almost entirely with inline style="..." attributes
   (not var()-driven, not external classes), so nearly every rule below
   needs !important — inline styles beat any non-!important external rule
   regardless of selector specificity. No HTML/JS touched; structural
   selectors (nth-child etc.) target the existing, unmodified markup.
   ════════════════════════════════ */

/* ── #nav-settings-panel ── */
html[data-theme="light"] #nav-settings-panel {
  background: #FFFFFF !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #nav-settings-panel > div:first-child > span:first-child {
  color: #6B6484 !important;
}
html[data-theme="light"] #nav-settings-panel > div:first-child > button {
  color: #6B6484 !important;
}
html[data-theme="light"] #nav-settings-panel > div:nth-child(2) {
  background: #F5F3FC !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #nav-settings-panel > div:nth-child(2) > div:first-child {
  background: #EFEDF7 !important;
  border-color: #C9C4E0 !important;
}
html[data-theme="light"] #nav-settings-email {
  color: #2B2740 !important;
}
html[data-theme="light"] #nav-settings-panel > div:nth-child(2) button {
  color: #DC3D57 !important;
}
html[data-theme="light"] #nav-settings-panel > div:nth-child(3) button {
  color: #2B2740 !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #backup-status-row {
  background: #F0FBF4 !important;
  border-color: #CFEFDB !important;
}
html[data-theme="light"] #backup-status-txt {
  color: #6B6484 !important;
}
html[data-theme="light"] #nav-settings-panel > div:last-child {
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #nav-settings-panel > div:last-child span {
  color: #B3AEC4 !important;
}

/* ── #notifications-panel ── */
html[data-theme="light"] #notifications-panel {
  background: #FFFFFF !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #notif-list-title,
html[data-theme="light"] #notif-settings-title span {
  color: #2B2740 !important;
}
html[data-theme="light"] #notif-settings-title button,
html[data-theme="light"] #notifications-panel > div:first-child > div:last-child button {
  color: #6B6484 !important;
}
html[data-theme="light"] #notif-gear-btn:hover {
  color: #2B2740 !important;
}
html[data-theme="light"] #notif-settings-view label {
  color: #2B2740 !important;
}
html[data-theme="light"] #notif-settings-view > div:nth-child(2) {
  color: #6B6484 !important;
}
html[data-theme="light"] #notif-settings-view span {
  color: #6B6484 !important;
}
html[data-theme="light"] #ns-cals-time,
html[data-theme="light"] #ns-prot-time,
html[data-theme="light"] #ns-plans-time {
  background: #F7F6FB !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #ns-save-btn {
  background: #FDEEE7 !important;
  border-color: #F2C9B3 !important;
  color: #C4501F !important;
}

/* Dynamic notification list rows (js/notifications.js renderNotificationsPanel) */
html[data-theme="light"] .notif-row {
  background: #F5F3FC !important;
  border-color: #E3DFF2 !important;
}
/* .notif-dismiss-btn base style is injected into <head> at runtime by
   js/notifications.js — overriding defensively since this stylesheet's
   cascade position relative to a script-appended <style> isn't guaranteed. */
html[data-theme="light"] .notif-dismiss-btn {
  border-color: #C9C4E0 !important;
  color: #6B6484 !important;
}

/* ── AI cluster: #ai-expand-panel, #ai-overlay-card, #insight-prefs-pop ── */
html[data-theme="light"] #ai-expand-panel {
  background: #FFFFFF !important;
  border-color: #C9EBD4 !important;
}
html[data-theme="light"] #ai-expand-panel > div:first-child button:first-child {
  background: #EFEDF7 !important;
  border-color: #E3DFF2 !important;
  color: #6B6484 !important;
}
html[data-theme="light"] #ai-expand-panel > div:first-child span {
  color: #DB2777 !important;
}
html[data-theme="light"] #insight-settings-btn {
  background: #F0EDFC !important;
  border-color: #DCD5F5 !important;
  color: #6D4AFE !important;
}
html[data-theme="light"] #ai-expand-panel > div:nth-child(2) span {
  color: #6D4AFE !important;
}
html[data-theme="light"] #ai-photo-preview span {
  color: #6B6484 !important;
}
html[data-theme="light"] #ai-input {
  border-color: #DCD5F5 !important;
}
html[data-theme="light"] #ai-input::placeholder {
  color: #B3AEC4;
}
html[data-theme="light"] #ai-expand-panel input[type="text"] ~ button {
  background: #F0EDFC !important;
  border-color: #DCD5F5 !important;
  color: #6B6484 !important;
}
html[data-theme="light"] .ai-quick-btn {
  background: #F0EDFC;
  border: 1px solid #DCD5F5;
  color: #6D4AFE;
}
html[data-theme="light"] .ai-quick-btn:hover {
  background: #E3DDFA;
}
html[data-theme="light"] #ai-expand-panel > div:last-child {
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #ai-expand-panel > div:last-child button {
  background: #EAFBF0 !important;
  border-color: #BBEDCC !important;
}
html[data-theme="light"] #ai-expand-panel > div:last-child span {
  color: #16A34A !important;
}

html[data-theme="light"] #ai-overlay-card {
  background: #FFFFFF !important;
  border-color: #DCD5F5 !important;
}

html[data-theme="light"] #insight-prefs-pop {
  background: #FFFFFF !important;
  border-color: #E3DFF2 !important;
}
html[data-theme="light"] #insight-prefs-pop > div:first-child {
  color: #6D4AFE !important;
}
html[data-theme="light"] #insight-prefs-list span:last-of-type {
  color: #2B2740 !important;
}
html[data-theme="light"] #insight-prefs-pop button:first-of-type {
  color: #B3AEC4 !important;
}
html[data-theme="light"] #insight-prefs-pop button:last-of-type {
  background: #F0EDFC !important;
  border-color: #DCD5F5 !important;
  color: #6D4AFE !important;
}

html[data-theme="light"] #ai-overlay-card > div:first-child button {
  color: #B3AEC4 !important;
}
html[data-theme="light"] #ov-confirm-card button {
  color: #16A34A !important;
}
html[data-theme="light"] #ov-confirm-card button:last-child {
  color: #DC3D57 !important;
}

/* ════════════════════════════════
   ROUND 3 — design refinements (items 3 & 4)
   ════════════════════════════════ */

/* Item 3a — #cat-card-overlay center-open instead of slide-up-from-bottom.
   Base rules: css/styles.css:1604-1631 (align-items:flex-end + the
   catCardSlideUp/catCardSlideDown keyframes). closeCatCard() (js/planner.js)
   is purely class-driven (.open / .ccs-closing) — untouched, works with any
   animation. New keyframes here use plain scale()+opacity (not the existing
   popupFadeIn keyframe — that one assumes translate(-50%,-50%) absolute
   positioning, which this flex-centered sheet doesn't use; reusing it as-is
   would double-offset the sheet). */
@keyframes hlCenterOpenIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes hlCenterOpenOut {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.92); opacity: 0; }
}
html[data-theme="light"] #cat-card-overlay {
  align-items: center;
}
html[data-theme="light"] #cat-card-overlay.open #cat-card-sheet {
  animation: hlCenterOpenIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
html[data-theme="light"] #cat-card-sheet.ccs-closing {
  animation: hlCenterOpenOut 0.22s cubic-bezier(0.4,0,1,1) both !important;
}

/* Project popup (js/monthly.js, דלי מחשבות → פרויקטים) — reuses the same
   hlCenterOpenIn keyframe above rather than defining its own, matching
   couple.html's Notes popup only in feel/shape, not by importing that
   file's own CSS classes (a separate file, its own conventions). Base
   CSS (css/styles.css) already uses var(--surface)/var(--text)/etc so it
   adapts automatically; the one hardcoded-white spot is the checklist's
   ▲/▼ buttons, fixed here same as elsewhere this round. */
html[data-theme="light"] #project-popup-card {
  animation: hlCenterOpenIn 0.32s cubic-bezier(0.22,1,0.36,1) both !important;
}
html[data-theme="light"] .project-checklist-reorder button {
  color: #9B93B5;
}
html[data-theme="light"] .project-checklist-reorder button:disabled {
  color: #D8D3EA;
}
html[data-theme="light"] .project-checklist-row {
  border-bottom-color: #EDEAF5;
}
html[data-theme="light"] #project-history-card {
  animation: hlCenterOpenIn 0.32s cubic-bezier(0.22,1,0.36,1) both !important;
}
/* Uniform card size regardless of content — base CSS only caps this at
   max-height:88vh (styles.css), so a short panel (payments, "אין נתונים")
   shrinks to fit while a long one (living, a full recurring-expense list)
   grows to fill nearly the whole screen — the exact inconsistency reported.
   A fixed height (not max-height) makes every category look the same,
   with #cat-card-content's own overflow-y:auto (already set, styles.css)
   handling any content taller than that. */
html[data-theme="light"] #cat-card-sheet {
  height: 70vh;
}
/* ✕ / bottom "+" swap — a 3-slot header via explicit `order` (deterministic
   regardless of DOM/insertion order): ✕ at order:1 (renders at the row's
   start, the physical right under this app's RTL), title at order:2 with
   flex:1 + text-align:center so it fills and centers in whatever's left,
   and the category's secondary shortcut (guitar/meditation/workout, if
   present) at order:3 (renders last, the physical left/outer edge). The
   category's real "+" add button (openCatCard(), js/planner.js) moves
   down into the bottom slot instead of the header, replacing the old
   bottom "סגור" pill. Dark theme's original layout (drag handle, header+
   add button, bottom "סגור" pill) is completely untouched — the drag
   handle is only hidden under light theme because this card opens as a
   center modal there (Item 3a above), not a draggable bottom sheet, so
   the pill has nothing left to do. */
html[data-theme="light"] .ccs-drag-handle {
  display: none;
}
html[data-theme="light"] .ccs-close-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5F3FC;
  border: none;
  color: #6B6484;
  font-size: 15px;
  cursor: pointer;
  order: 1;
  flex-shrink: 0;
}
html[data-theme="light"] .ccs-close-pill-btn {
  display: none;
}
html[data-theme="light"] #ccs-bottom-slot .ccs-action-btn {
  margin-right: 0;
}

html[data-theme="light"] .ccs-header-action-btn {
  order: 3;
  flex-shrink: 0;
}

/* Uniform green "+" add button everywhere it lands in the bottom slot —
   every category's add button (payments/living/timers' original template,
   plus guitar/meditation/workout/food's new .ccs-add-tpl ones) shares the
   .tmr-btn-add class already, so one rule covers all of them regardless
   of each template's own inline color. */
html[data-theme="light"] #ccs-bottom-slot .tmr-btn-add {
  background: linear-gradient(135deg, rgba(74,222,128,0.4), rgba(34,197,94,0.22)) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(74,222,128,0.65) !important;
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 9px 22px !important;
  box-shadow: 0 4px 14px rgba(74,222,128,0.35), inset 0 1px 0 rgba(255,255,255,0.55);
}
html[data-theme="light"] #ccs-bottom-slot .tmr-btn-add:hover {
  background: linear-gradient(135deg, rgba(74,222,128,0.55), rgba(34,197,94,0.32)) !important;
}

/* Item 3b — #planner-panel: fills the content area only (a bottom-nav
   destination, not a sheet or a full-viewport modal) — sits between
   #hl-header and #hl-bottomnav, both of which stay visible. top/bottom
   are hardcoded to those two elements' measured rendered heights
   (215px / 68px, confirmed via live-browser measurement — #hl-header's
   height is constant regardless of whether the floating "היום" button is
   showing, since that button is itself position:absolute and doesn't
   affect flow height). Known fragility, flagged rather than hidden: these
   are fixed pixel values, not a dynamic measurement — if #hl-header's
   content grows (e.g. the insight line wrapping to two lines on a very
   narrow phone) these two numbers would need updating; a live-measured
   value would need JS, which wasn't wanted for this fix. Base is a
   bottom-sheet, 100% inline-styled (index.html:2322), so every override
   needs !important. openPlannerPanel() (js/planner.js:148-174) sets an
   inline animation referencing a @keyframes that doesn't exist anywhere
   (catCardFlyIn) — today's dark theme opens instantly with no animation.
   NOT defining that keyframe globally (it'd change dark-theme behavior
   too); instead the animation property itself is overridden to a new,
   uniquely-named keyframe, light theme only. closePlannerPanel() sets
   display:none synchronously with no delay — no way to animate the close
   without touching that function, so this stays instant on close, same as
   it already is today (not a regression, just not symmetric with open). */
@keyframes hlFullScreenIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
html[data-theme="light"] #planner-panel {
  /* Static fallback only — #hl-header's height is state-dependent (full on
     the tracker view, topbar-only on plans/summary), so the real top/bottom
     are measured live and applied by hlSyncPanelBounds() (js/theme-toggle.js)
     the moment this panel is shown. This value matches the topbar-only
     height so there's nothing wrong to flash before JS runs. */
  top: 56px !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  /* max-width + auto margins center a fixed-position element the same way
     .container centers in normal flow (css/styles.css:21) — without this,
     left:0;right:0 stretches the panel edge-to-edge on any viewport wider
     than the app's own 480px column, unlike the tracker view/couple.html
     which both stay fixed-width there. No-op on narrow mobile viewports. */
  max-width: 480px !important;
  margin: 0 auto !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  border: none !important;
  animation: hlFullScreenIn 0.25s ease both !important;
  /* Safety margin above #hl-bottomnav's z-index:50 in case of a few px of
     measurement drift on a real device — nav stays clickable regardless. */
  z-index: 40 !important;
  box-sizing: border-box !important;
}
html[data-theme="light"] #planner-backdrop {
  /* Same content-area bounds as #planner-panel (static fallback, see
     comment there) — otherwise this backdrop's own inset:0 base style dims
     the header/nav bar even though they sit visually on top of it
     (z-index), which reads as "greyed out". */
  top: 56px !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  z-index: 35 !important;
  /* Base style is background:rgba(0,0,0,0.7);backdrop-filter:blur(8px) —
     a dimming scrim for a modal floating over visible content behind it.
     #planner-panel is now a fully opaque sibling covering the exact same
     bounds, so there's nothing left for this backdrop to dim — but the
     blur filter still visually "bleeds" a soft dark fringe right at its
     top edge (against the header immediately above), since blur softens
     the boundary rather than cutting it off sharply. Neutralized outright
     rather than just relying on the opaque panel covering it, since the
     blur artifact isn't reliably contained by that panel/z-index alone. */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The panel's own close pill is redundant now that בית (bottom nav) closes
   it — removed per request. Scoped to #planner-panel specifically since
   .ccs-close-pill is shared with #cat-card-overlay, which keeps its own. */
html[data-theme="light"] #planner-panel .ccs-close-pill {
  display: none !important;
}

/* Item 3c — #weekly-summary-overlay: identical treatment, requested to
   match the planner panel exactly. Base (index.html:1912-1918): outer
   #weekly-summary-overlay is a fixed inset:0 flex-centering wrapper;
   .wsp-scroll is the actual card (92vw, max-width 420px, rounded). Both
   overridden so the whole thing fills the content area edge-to-edge. */
html[data-theme="light"] #weekly-summary-overlay {
  /* Static fallback only, see #planner-panel's comment above — real bounds
     applied live by hlSyncPanelBounds(). */
  top: 56px !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  /* Same fixed-width centering as #planner-panel above — .wsp-scroll's own
     width:100% (below) then naturally follows this bounded column instead
     of stretching edge-to-edge on wide viewports. */
  max-width: 480px !important;
  margin: 0 auto !important;
  z-index: 40 !important;
  /* Same fix as #planner-backdrop above — base style is background:
     rgba(0,0,0,0.75);backdrop-filter:blur(8px), a dimming scrim this
     element no longer needs now that .wsp-scroll (opaque white) fills
     100% of it; the blur was visually bleeding a dark fringe against the
     header directly above (reported as "slight darkening above the
     header" when opening this view). */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="light"] #weekly-summary-overlay .wsp-scroll {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
/* Its own ✕ close button (index.html, left-positioned inside the header
   row) is redundant now that the bottom nav navigates away from this view
   — matches the planner panel's close-pill removal earlier this round. */
html[data-theme="light"] #weekly-summary-overlay button[onclick*="weekly-summary-overlay"] {
  display: none !important;
}

/* Design refinement round — the pager used to float as its own header bar
   above the score card. Now embedded directly under the ring instead
   (openWeeklySummaryPopup()'s weekOrbHTML, js/overview.js), so the old
   top-of-view row is redundant here — hidden only under light theme;
   dark theme still uses it exactly as before. */
html[data-theme="light"] #wsp-pager-row {
  display: none !important;
}

/* Score card: dropped the flat var(--surface2)/var(--border) box in favor
   of sitting straight on the popup's white background, with a soft color
   glow behind the ring instead of a hard edge — reuses the ring's own
   gradient stops (wsp-orb-grad: #a78bfa/#ff6b35) rather than a new palette.
   Lifted above the card's own two direct children (title block + the
   nefesh/ring/guf/pager column) via z-index. */
html[data-theme="light"] #wsp-score-card {
  background: transparent !important;
  border: none !important;
  position: relative;
}
/* Two stacked glow layers (orange ::before, purple ::after), same size/
   position, crossfading via opacity — animating a gradient's own color
   stops directly doesn't interpolate smoothly across browsers, but two
   layers fading in and out of each other does, reliably. The -3.5s delay
   on ::after (half of the 7s duration) starts it already at the opposite
   point of the same keyframes, so as orange fades down purple fades up
   and back, continuously — never both full or both empty at once. */
html[data-theme="light"] #wsp-score-card::before,
html[data-theme="light"] #wsp-score-card::after {
  content: '';
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 210px;
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="light"] #wsp-score-card::before {
  background: radial-gradient(circle, rgba(255,107,53,0.34) 0%, rgba(255,107,53,0.14) 45%, rgba(255,255,255,0) 72%);
  animation: wspGlowCycle 7s ease-in-out infinite;
}
html[data-theme="light"] #wsp-score-card::after {
  background: radial-gradient(circle, rgba(167,139,250,0.34) 0%, rgba(167,139,250,0.14) 45%, rgba(255,255,255,0) 72%);
  animation: wspGlowCycle 7s ease-in-out infinite;
  animation-delay: -3.5s;
}
@keyframes wspGlowCycle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
html[data-theme="light"] #wsp-score-card > div {
  position: relative;
  z-index: 1;
}

/* Item 4 — #today-popup container (base: css/styles.css:605-622, hardcoded
   #13131f background). Content is the same _wrcBuildOpenContent() as the
   "מבט שבועי" card — most of the hardcoded-spot patching for that function
   already lives on the #cat-card-content svg text rule above, extended to
   also match this container. */
html[data-theme="light"] #today-popup {
  background: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-color: rgba(227,223,242,0.65) !important;
  box-shadow: 0 14px 44px rgba(83,74,183,0.18) !important;
}
/* A flat black scrim behind a frosted-glass card reads as harsh, not
   "crystal" — there's nothing colorful for the blur to actually pick up.
   Softened to the page's own dark-text hue at low opacity instead, so the
   popup's translucency has something gentle to show through. */
html[data-theme="light"] #today-popup-backdrop {
  background: rgba(43,39,64,0.35) !important;
}

/* Redesign pass — scoped to #today-popup only, deliberately NOT to bare
   .roi-* (those are shared with #roller-open-body, the weekly roller's
   inline "open day" card, which the user explicitly asked to leave alone).
   Content/markup is untouched (_wrcBuildOpenContent() in js/overview.js) —
   this is a pure re-skin: richer entrance, a staggered reveal per block,
   and card-ifying the data/bottom sections against the popup's white
   background using the same --surface2 "nested card" treatment already
   established elsewhere in this theme (e.g. the weekly summary's food
   chart boxes) instead of introducing a new pattern. */
html[data-theme="light"] #today-popup {
  animation: hlTodayPopIn 0.38s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes hlTodayPopIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

html[data-theme="light"] #today-popup .roi-day-header,
html[data-theme="light"] #today-popup .roller-open-inner,
html[data-theme="light"] #today-popup .roi-bottom-section {
  opacity: 0;
  animation: hlTodayBlockIn 0.4s ease-out both;
}
html[data-theme="light"] #today-popup .roi-day-header    { animation-delay: 0.05s; }
html[data-theme="light"] #today-popup .roller-open-inner { animation-delay: 0.12s; }
html[data-theme="light"] #today-popup .roi-bottom-section { animation-delay: 0.19s; }
@keyframes hlTodayBlockIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

html[data-theme="light"] #today-popup .roi-day-header {
  border-bottom-color: #E3DFF2;
}

html[data-theme="light"] #today-popup .roi-col-data {
  background: #EFEDF7;
  border: 1px solid #E3DFF2;
  border-radius: 14px;
  padding: 10px 10px 8px;
  min-height: 0;
}

html[data-theme="light"] #today-popup .roi-score-chip {
  box-shadow: 0 1px 5px rgba(83,74,183,0.1);
}
html[data-theme="light"] #today-popup .roi-orb-legend {
  gap: 14px;
}

/* Plans/Payments/Living/Agenda — whichever are present sit here as
   siblings (some via .roi-center-section, agenda via a plain div), so a
   generic child selector cards all of them uniformly without needing to
   special-case each one. */
html[data-theme="light"] #today-popup .roi-bottom-section {
  flex-wrap: wrap;
}
html[data-theme="light"] #today-popup .roi-bottom-section > div {
  background: #EFEDF7;
  border: 1px solid #E3DFF2;
  border-radius: 12px;
  padding: 8px 8px 6px;
  flex: 1 1 130px;
}
html[data-theme="light"] #today-popup .roi-center-section-label,
html[data-theme="light"] #today-popup .roi-subsection-label {
  font-size: 11px;
  opacity: 1;
  letter-spacing: 0.2px;
}

/* body::before (css/styles.css:20) is a dark-theme ambient decoration — two
   radial-gradient glows positioned at fixed 20%/80% percentages of the
   FULL viewport (position:fixed;inset:0), designed for the dark theme's
   edge-to-edge layout. .container is centered with max-width:480px, so on
   any viewport wider than that, those fixed percentages land in the empty
   margin outside .container instead of behind the app content — visible
   as a lopsided pink/purple patch with a hard seam at .container's edge,
   not a header-specific color at all. Not rescaling the existing gradient
   (its percentages have no correct scale-invariant fix for an unbounded
   viewport width); the light theme's flat, uniform background doesn't
   want this decorative glow anyway, so it's suppressed outright here. */
html[data-theme="light"] body::before {
  display: none;
}

/* ════════════════════════════════
   ROUND 4
   ════════════════════════════════ */

/* Item 4 — "+" category panel (#cat-overlay, opened by the header ➕ icon
   and the tab-strip "+" button). Base CSS: card background/border are
   hardcoded (#2a2a3c, purple-alpha border) — the tile grid itself
   (.cat-overlay-item and its .coi-label/border/background) already uses
   var(--surface2)/var(--border)/var(--text), so it adapts for free; only
   the outer card/backdrop need an explicit override here. */
html[data-theme="light"] #cat-overlay {
  background: rgba(0,0,0,0.4);
}
html[data-theme="light"] #cat-overlay-card {
  background: #FFFFFF;
  border-color: #E3DFF2;
}

/* Item 6 — header shadow, actual source found: .wsp-scroll's own inline
   box-shadow (index.html, 0 12px 48px rgba(0,0,0,0.55)) was sized for a
   small centered card; now that it fills its container edge-to-edge with
   no gap from the header above, the shadow projects upward into it. */
html[data-theme="light"] #weekly-summary-overlay .wsp-scroll {
  box-shadow: none !important;
}

/* Item 7 — defensive hardening for a content-overflow-near-nav report I
   could not reproduce locally (no safe-area-inset-bottom in headless
   Chrome). Explicit overflow:hidden on both fixed containers rather than
   relying on defaults, in case that's masking anything. */
html[data-theme="light"] #planner-panel,
html[data-theme="light"] #weekly-summary-overlay {
  overflow: hidden !important;
}