/* Homepage appearance adapted from the pre-consolidation design.
   Scoped to the home view; shared behavior and semantic theme tokens stay intact. */
body:has(#viewDash[aria-hidden="false"]) {
  background: var(--home-canvas, var(--canvas));
}
html:not([data-theme="dark"]):has(#viewDash[aria-hidden="false"]) {
  background: #fff;
}
html:not([data-theme="dark"]) {
  --home-canvas: #ffffff;
  --home-panel: #ffffff;
  --home-weekdays: #f7f3ef;
  --home-outside: #fbf9f7;
}
body:has(#viewDash[aria-hidden="false"]) > header {
  padding-block: calc(1.05rem + var(--safe-top)) .92rem;
  background: linear-gradient(140deg, #6d0404, #770505 52%, #8b1414);
  box-shadow: 0 12px 30px rgb(0 0 0 / 16%);
}
body:has(#viewDash[aria-hidden="false"]) .header-inner {
  max-width: 1240px;
}
body:has(#viewDash[aria-hidden="false"]) .brand strong {
  font-size: clamp(1.8rem, 3.35vw, 2.67rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
body:has(#viewDash[aria-hidden="false"]) main {
  max-width: 1240px;
  padding-top: 1.12rem;
}
.home-calendar {
  --line: #e4ddd6;
  --line-soft: #eee8e2;
  gap: .9rem;
}
html[data-theme="dark"] .home-calendar {
  --line: #44474d;
  --line-soft: #303339;
}
.home-calendar .calendar-mode-toggle {
  background: var(--surface-muted);
}
.home-calendar .calendar-mode-button {
  min-width: 96px;
  font-size: .76rem;
}
.home-calendar .calendar-search-toggle {
  font-size: .76rem;
  box-shadow: var(--shadow);
}
.home-calendar .calendar-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
  gap: 1rem;
}
.home-calendar .calendar-grid-card,
.home-calendar .calendar-day-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--home-panel, var(--surface));
  box-shadow: 0 10px 26px rgb(71 48 30 / 5.5%);
}
.home-calendar .calendar-day-panel {
  padding: 1.1rem;
  gap: .85rem;
}
.home-calendar .calendar-day-panel h2 {
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.home-calendar .calendar-grid__weekdays {
  background: var(--home-weekdays, var(--surface-muted));
}
.home-calendar .calendar-grid__weekday {
  padding-block: .75rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home-calendar .calendar-grid__weekday:nth-child(n+6) {
  color: var(--shared);
}
.home-calendar .calendar-day-cell--outside {
  background: var(--home-outside, var(--surface-muted));
}
.home-calendar .calendar-day-cell--selected {
  box-shadow: inset 0 0 0 1px var(--brand);
}
.home-calendar .calendar-day-button {
  min-height: 108px;
  padding: .48rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: .35rem;
}
.home-calendar .calendar-day-button__number {
  min-width: 25px;
  height: 25px;
  font-size: .77rem;
  font-weight: 760;
}
.home-calendar .calendar-day-button__activity-dots {
  align-self: center;
}
.home-calendar .calendar-legend {
  padding: .6rem .8rem;
  border-top: 1px solid var(--line-soft);
  font-size: .7rem;
}
.home-calendar .calendar-event-card,
.home-calendar .calendar-external-card {
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.home-calendar .calendar-event-card--calendar-matched {
  border-left: 3px solid var(--success);
}
.home-calendar .calendar-event-card__title,
.home-calendar .calendar-external-card__title {
  font-size: 1rem;
}
.home-calendar .calendar-event-card__open {
  padding-top: .65rem;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 601px) and (max-width: 1279px) {
  html:has(#viewDash[aria-hidden="false"]) {
    overflow: hidden;
  }
  body:has(#viewDash[aria-hidden="false"]) {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  body:has(#viewDash[aria-hidden="false"]) > header {
    flex: 0 0 auto;
    box-shadow: 0 5px 14px rgb(0 0 0 / 9%);
  }
  body:has(#viewDash[aria-hidden="false"]) main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-top: .72rem;
    padding-bottom: max(.72rem, var(--safe-bottom));
  }
  #viewDash[aria-hidden="false"],
  #viewDash[aria-hidden="false"] #dashSurface,
  #viewDash[aria-hidden="false"] .dash-shell {
    height: 100%;
    min-height: 0;
  }
  .home-calendar {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .68rem;
    padding: 0;
    overflow: hidden;
  }
  .home-calendar .calendar-toolbar {
    flex: 0 0 auto;
  }
  .home-calendar .calendar-search-panel {
    flex: 0 0 auto;
    max-height: 34%;
    overflow: auto;
  }
  .home-calendar .calendar-month-view {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: .62rem;
  }
  .home-calendar .calendar-agenda-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .home-calendar .calendar-workspace {
    min-height: 0;
    height: 100%;
  }
  .home-calendar .calendar-grid-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .home-calendar .calendar-grid {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .home-calendar .calendar-grid__days {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .home-calendar .calendar-grid__week,
  .home-calendar .calendar-day-cell {
    min-height: 0;
  }
  .home-calendar .calendar-day-button {
    height: 100%;
    min-height: 0;
  }
  .home-calendar .calendar-legend {
    flex: 0 0 auto;
    justify-content: center;
    margin: 0;
  }
}

.calendar-day-panel-close {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}
.calendar-day-panel-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (min-width: 601px) and (max-width: 959px) {
  body:has(#viewDash[aria-hidden="false"]) > header {
    padding-block: calc(.76rem + var(--safe-top)) .68rem;
  }
  body:has(#viewDash[aria-hidden="false"]) .brand strong {
    font-size: clamp(1.62rem, 3.2vw, 2rem);
  }
  body:has(#viewDash[aria-hidden="false"]) main {
    padding-inline: max(.8rem, var(--safe-left)) max(.8rem, var(--safe-right));
  }
  .home-calendar .calendar-mode-button {
    min-width: 92px;
  }
  .home-calendar .calendar-month-nav {
    gap: .42rem;
  }
  .home-calendar .calendar-month-label {
    font-size: clamp(1.12rem, 2.8vw, 1.34rem);
  }
  .home-calendar .calendar-workspace {
    position: relative;
    display: block;
  }
  .home-calendar .calendar-grid-card {
    width: 100%;
  }
  .home-calendar .calendar-grid__weekday {
    padding-block: .52rem;
    font-size: .66rem;
    letter-spacing: .035em;
  }
  .home-calendar .calendar-day-button {
    padding: .24rem .14rem;
    align-items: center;
    justify-content: center;
    gap: .18rem;
  }
  .home-calendar .calendar-day-button__number {
    min-width: 29px;
    height: 29px;
    font-size: .9rem;
  }
  .home-calendar .calendar-day-button__activity-dots {
    min-height: 8px;
    gap: 3px;
  }
  .home-calendar .calendar-legend {
    gap: .28rem .68rem;
    padding: .45rem .6rem;
    font-size: .66rem;
  }
  .home-calendar .calendar-day-panel {
    position: absolute;
    left: .45rem;
    right: .45rem;
    bottom: .45rem;
    z-index: 8;
    width: auto;
    max-height: min(56%, 430px);
    padding: .95rem;
    gap: .72rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 18px 44px rgb(35 24 18 / 22%);
    -webkit-backdrop-filter: saturate(1.5) blur(22px);
    backdrop-filter: saturate(1.5) blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 1rem));
    transition:
      transform var(--motion-slow) var(--ease-spring),
      opacity var(--motion-medium) var(--ease-standard),
      visibility 0s linear var(--motion-slow);
  }
  .home-calendar .calendar-day-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .home-calendar .calendar-day-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem .7rem;
  }
  .home-calendar .calendar-day-panel-heading .calendar-day-meta {
    grid-column: 1;
  }
  .home-calendar .calendar-day-panel-close {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  body:has(#viewDash[aria-hidden="false"]) > header {
    padding-block: calc(.78rem + var(--safe-top)) .68rem;
  }
  body:has(#viewDash[aria-hidden="false"]) main {
    padding-inline: max(.85rem, var(--safe-left)) max(.85rem, var(--safe-right));
  }
  .home-calendar .calendar-workspace {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .82fr);
    gap: .85rem;
    align-items: stretch;
  }
  .home-calendar .calendar-grid__weekday {
    padding-block: .5rem;
    font-size: .65rem;
  }
  .home-calendar .calendar-day-button {
    padding: .22rem .12rem;
    align-items: center;
    justify-content: center;
    gap: .16rem;
  }
  .home-calendar .calendar-day-panel {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: .9rem;
    gap: .7rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: 18px;
  }
  .home-calendar .calendar-legend {
    gap: .28rem .65rem;
    padding: .42rem .6rem;
    font-size: .66rem;
  }
}
@media (max-width: 600px) {
  .home-calendar .calendar-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  body:has(#viewDash[aria-hidden="false"]) main {
    padding-top: .65rem;
    padding-inline: max(.5rem, var(--safe-left)) max(.5rem, var(--safe-right));
  }
  .home-calendar .calendar-toolbar { padding-inline: .25rem; }
  .home-calendar .calendar-mode-button { min-width: 88px; }
  .home-calendar .calendar-grid-card { border-radius: 16px; }
  .home-calendar .calendar-workspace {
    position: relative;
    display: block;
  }
  .home-calendar .calendar-day-panel {
    position: absolute;
    left: .35rem;
    right: .35rem;
    bottom: .35rem;
    z-index: 9;
    width: auto;
    max-height: min(calc(100% - .7rem), 58dvh, 420px);
    padding: .82rem;
    gap: .7rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 22px 56px rgb(35 24 18 / 25%);
    -webkit-backdrop-filter: saturate(1.45) blur(20px);
    backdrop-filter: saturate(1.45) blur(20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + .9rem), 0) scale(.985);
    transition:
      transform var(--motion-slow) var(--ease-spring),
      opacity var(--motion-medium) var(--ease-standard),
      visibility 0s linear var(--motion-slow);
  }
  html[data-theme="dark"] .home-calendar .calendar-day-panel {
    background: rgb(25 27 31 / 94%);
  }
  .home-calendar .calendar-day-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
  }
  .home-calendar .calendar-day-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem .65rem;
  }
  .home-calendar .calendar-day-panel-heading .calendar-day-meta {
    grid-column: 1;
  }
  .home-calendar .calendar-day-panel-close {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .home-calendar .calendar-month-nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 44px;
    gap: .25rem;
  }
  .home-calendar .calendar-month-label {
    font-size: clamp(.95rem, 4.5vw, 1.12rem);
    letter-spacing: -.025em;
    text-align: center;
    white-space: nowrap;
  }
  .home-calendar .calendar-today {
    padding-inline: .6rem;
    font-size: .73rem;
  }
  .home-calendar .calendar-day-button {
    min-height: 52px;
    padding: .28rem .1rem;
    align-items: center;
    justify-content: flex-start;
    gap: .2rem;
  }
  .home-calendar .calendar-day-button__number {
    min-width: 29px;
    height: 29px;
    font-size: .9rem;
    font-weight: 650;
  }
  .home-calendar .calendar-day-cell--today .calendar-day-button__number {
    outline-width: 1.5px;
    outline-offset: 0;
  }
  .home-calendar .calendar-day-cell--selected {
    box-shadow: inset 0 0 0 1px var(--brand);
  }
  .home-calendar .calendar-day-button__activity-dots {
    min-height: 10px;
    gap: 3px;
  }
  .home-calendar .calendar-day-button__activity-dot--linked {
    width: 10px;
    font-size: 11px;
  }
  .home-calendar .calendar-grid__weekday {
    padding-block: .6rem;
    font-size: .64rem;
    letter-spacing: .025em;
  }
  .home-calendar .calendar-legend {
    justify-content: center;
    gap: .35rem .7rem;
    padding: .65rem .35rem;
    font-size: .66rem;
  }
  body:has(#viewDash[aria-hidden="false"]) > header {
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }
}


/* iPad app shell: use the same containment principle as AgriStaff.
   Wix owns the outer frame; AgriAgenda fills it, keeps the month full-width
   and gives vertical scrolling only to transient/detail surfaces. */
@media (min-width: 601px) and (max-width: 1279px) {
  body:has(#viewDash[aria-hidden="false"]) > header {
    padding-block: calc(.66rem + var(--safe-top)) .58rem;
  }
  body:has(#viewDash[aria-hidden="false"]) main {
    padding-top: .62rem;
    padding-bottom: max(.62rem, var(--safe-bottom));
  }
  .home-calendar {
    gap: .56rem;
  }
  .home-calendar .calendar-toolbar {
    min-height: 46px;
  }
  .home-calendar .calendar-mode-button,
  .home-calendar .calendar-search-toggle {
    font-size: .82rem;
  }
  .home-calendar .calendar-month-view {
    gap: .52rem;
  }
  .home-calendar .calendar-month-label {
    font-size: clamp(1.32rem, 2.45vw, 1.58rem);
  }
  .home-calendar .calendar-workspace {
    position: relative;
    display: block;
    height: 100%;
    min-height: 0;
  }
  .home-calendar .calendar-grid-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }
  .home-calendar .calendar-grid {
    grid-row: 1;
    height: 100%;
    min-height: 0;
  }
  .home-calendar .calendar-grid__weekday {
    padding-block: .58rem;
    font-size: .72rem;
    letter-spacing: .035em;
  }
  .home-calendar .calendar-day-button {
    height: 100%;
    min-height: 0;
    padding: .28rem .14rem;
    align-items: center;
    justify-content: center;
    gap: .22rem;
  }
  .home-calendar .calendar-day-button__number {
    min-width: 32px;
    height: 32px;
    font-size: 1.02rem;
    font-weight: 720;
  }
  .home-calendar .calendar-day-button__activity-dots {
    min-height: 9px;
    gap: 4px;
  }
  .home-calendar .calendar-day-button__activity-dot {
    width: 7px;
    height: 7px;
  }
  .home-calendar .calendar-legend {
    font-size: .7rem;
  }
  .home-calendar .calendar-day-panel {
    position: absolute;
    top: auto;
    left: .68rem;
    right: .68rem;
    bottom: .68rem;
    z-index: 9;
    width: auto;
    height: auto;
    max-height: min(52%, 440px);
    margin: 0;
    padding: 1rem;
    gap: .72rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border-radius: 24px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 22px 60px rgb(35 24 18 / 24%);
    -webkit-backdrop-filter: saturate(1.5) blur(22px);
    backdrop-filter: saturate(1.5) blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(100% + 1rem), 0) scale(.988);
    transition:
      transform var(--motion-slow) var(--ease-spring),
      opacity var(--motion-medium) var(--ease-standard),
      visibility 0s linear var(--motion-slow);
  }
  html[data-theme="dark"] .home-calendar .calendar-day-panel {
    background: rgb(25 27 31 / 94%);
  }
  .home-calendar .calendar-day-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
  }
  .home-calendar .calendar-day-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .3rem .7rem;
  }
  .home-calendar .calendar-day-panel-heading .calendar-day-meta {
    grid-column: 1;
  }
  .home-calendar .calendar-day-panel-close {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (min-width: 960px) and (max-width: 1279px) and (orientation: landscape) {
  .home-calendar .calendar-day-panel {
    max-height: min(66%, 430px);
  }
}