/* Scoped calendar styles keep legacy theme/button rules outside this workspace. */
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) {
  --birthday-surface: #091728;
  --birthday-muted-surface: #0e2035;
  --birthday-ink: #f2f6fc;
  --birthday-muted: #aabbd0;
  --birthday-line: #31465e;
  --birthday-accent: #63b7ff;
  --birthday-selected: #153a59;
  container-type: inline-size;
  min-width: 0;
  padding: 24px;
  background: var(--birthday-surface) !important;
  color: var(--birthday-ink) !important;
  border-radius: 8px;
  font-family: Inter, sans-serif;
}
:is(html[data-theme="light"], html[data-visual-theme="light"], html[data-visual-theme="pink"], html[data-visual-theme="lilac"]) #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) {
  --birthday-surface: #ffffff;
  --birthday-muted-surface: #f4f7fb;
  --birthday-ink: #172239;
  --birthday-muted: #536379;
  --birthday-line: #d8e1ed;
  --birthday-accent: #1462bb;
  --birthday-selected: #e5f1ff;
}
html[data-visual-theme="pink"] #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) {
  --birthday-muted-surface: #fff7fa;
  --birthday-accent: #a12b66;
  --birthday-selected: #fce9f2;
  --birthday-line: #ecd4df;
}
html[data-visual-theme="lilac"] #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) {
  --birthday-muted-surface: #f8f6ff;
  --birthday-accent: #6843ad;
  --birthday-selected: #ede7fa;
  --birthday-line: #e1d9ef;
}
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) * { box-sizing: border-box; letter-spacing: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) :is(h2, h3, p, ul) { margin: 0 !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) h2 { font-size: 26px !important; line-height: 1.25 !important; color: var(--birthday-ink) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) h3 { font-size: 18px !important; line-height: 1.4 !important; color: var(--birthday-ink) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) :is(p, time) { color: var(--birthday-muted) !important; font-size: 14px !important; line-height: 1.5; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) svg { width: 20px !important; height: 20px !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) button {
  appearance: none; min-width: 0 !important; max-width: 100%; margin: 0 !important;
  font-family: inherit; font-size: 14px !important; line-height: 1.4 !important;
  color: var(--birthday-ink) !important; box-shadow: none !important;
  border: 1px solid var(--birthday-line) !important; background: transparent !important;
  cursor: pointer; text-transform: none; transform: none !important;
}
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) button:hover { background: var(--birthday-muted-surface) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) button:focus-visible { outline: 2px solid var(--birthday-accent); outline-offset: -2px; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) button:disabled { opacity: .5; cursor: wait; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-heading { display: flex; align-items: center; gap: 14px; padding: 0 0 24px; background: transparent !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-heading > div { flex: 1; min-width: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-icon-button { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; padding: 0 !important; border-radius: 8px !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-toolbar > div { display: flex; align-items: center; gap: 8px; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-today { height: 44px; padding: 8px 16px !important; border-radius: 8px !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-calendar { min-width: 0; border: 1px solid var(--birthday-line); border-radius: 8px; overflow: hidden; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) :is(.hr-birthday-weekdays, .hr-birthday-grid) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-weekdays { background: var(--birthday-muted-surface); }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-weekdays span { text-align: center; padding: 12px 0; font-size: 12px; font-weight: 700; color: var(--birthday-muted) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; min-height: 116px; padding: 8px !important;
  border-radius: 0 !important; border: 0 !important;
  border-top: 1px solid var(--birthday-line) !important;
  border-right: 1px solid var(--birthday-line) !important; text-align: left;
}
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day:nth-child(7n) { border-right: 0 !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day.is-outside { background: var(--birthday-muted-surface); }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day.is-selected { background: var(--birthday-selected) !important; box-shadow: inset 0 0 0 2px var(--birthday-accent) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; color: var(--birthday-ink) !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .is-today .hr-birthday-day-number { background: var(--birthday-accent) !important; color: var(--birthday-surface) !important; font-weight: 700; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-names { display: grid; gap: 4px; margin-top: 5px; min-width: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-names > * { font-size: 12px !important; line-height: 1.35; color: var(--birthday-ink) !important; overflow-wrap: anywhere; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-count { display: none; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-agenda { display: grid; gap: 24px; min-width: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-agenda section { min-width: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-agenda h3 { margin-bottom: 12px !important; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) ul { list-style: none; padding: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--birthday-line); }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) li strong { font-size: 14px !important; line-height: 1.45; color: var(--birthday-ink) !important; overflow-wrap: anywhere; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-person-icon { color: var(--birthday-accent); flex: 0 0 24px; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-person { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0 !important; padding: 4px 0 !important; border-radius: 0 !important; text-align: left; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-person span { color: var(--birthday-ink) !important; overflow-wrap: anywhere; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-person time { flex-shrink: 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-empty { padding: 12px 0; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-message { padding: 12px; margin-bottom: 12px; color: var(--birthday-ink); border: 1px solid #d45f65; border-radius: 8px; }
#dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-message button { padding: 8px 12px !important; border-radius: 6px !important; }
@container (max-width: 880px) {
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-layout { grid-template-columns: minmax(0, 1fr); }
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day { min-height: 72px; padding: 5px !important; }
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-names { display: none; }
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-count { display: flex; align-items: center; gap: 3px; color: var(--birthday-accent) !important; font-size: 11px; margin-top: 5px; }
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-day-count svg { width: 14px !important; height: 14px !important; }
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) .hr-birthday-agenda { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  #dashboardSection :is(#hrBirthdayDesktop, #hrBirthdayTablet, #hrBirthdayPhone) { padding: 16px 8px; }
}
#dashboardSection #hrBirthdayPhone { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }

/* HR cards have explicit tracks, so growing descriptions cannot move the icon. */
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-grid, .dashboard-store-tools-grid, .tablet-tool-grid, .phone-tool-grid) {
  grid-auto-rows: minmax(176px, auto) !important;
  grid-template-rows: none !important;
}
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-tool, .dashboard-store-tool, .tablet-tool, .tool) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 22px !important;
  grid-template-rows: 48px auto 1fr !important; align-content: start !important;
  align-items: start !important; gap: 12px !important; padding: 20px !important;
  min-width: 0 !important; height: auto !important; min-height: 176px !important;
}
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-tool, .dashboard-store-tool, .tablet-tool, .tool) > span {
  position: static !important; grid-column: 1 !important; grid-row: 1 !important;
  width: 48px !important; height: 48px !important; min-width: 48px !important;
  display: grid !important; place-items: center !important; margin: 0 !important; transform: none !important;
}
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-tool, .dashboard-store-tool, .tablet-tool, .tool) > strong {
  grid-column: 1 !important; grid-row: 2 !important; font-size: 16px !important; line-height: 1.35 !important;
  white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; margin: 0 !important;
}
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-tool, .dashboard-store-tool, .tablet-tool, .tool) > small {
  grid-column: 1 !important; grid-row: 3 !important; font-size: 13px !important; line-height: 1.5 !important;
  white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; margin: 0 !important;
}
html #dashboardSection[data-dashboard-view]:not(.hide) :is([data-hr-home-dashboard], [data-karen-home-dashboard], .is-karen-top-dashboard) :is(.desktop-store-tool, .dashboard-store-tool, .tablet-tool, .tool) > i {
  position: static !important; grid-column: 2 !important; grid-row: 1 / 4 !important;
  align-self: center !important; margin: 0 !important; transform: none !important;
}