/*
 * ShareHome Mobile Calendar v14
 * Final calendar navigation + phone month-grid authority.
 * Loaded after typography-central so old min-width/scroll rules cannot win.
 */

/* The three period-navigation buttons are deliberately identical in geometry and type.
   Only the centre "today" action receives visual emphasis. */
.calendar-period-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:8px!important;
  width:min(430px,100%)!important;
  direction:rtl!important;
}
.calendar-period-nav .calendar-nav-labeled,
.calendar-period-nav .calendar-today{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  padding:0 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #dce4ef!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#4b5b70!important;
  box-shadow:none!important;
  font-size:var(--ty-label,14px)!important;
  font-weight:850!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  text-align:center!important;
}
.calendar-period-nav .calendar-nav-labeled:hover{
  background:#f8faff!important;
  border-color:#cdd9ed!important;
  color:#304b82!important;
}
.calendar-period-nav .calendar-today{
  background:#eef3ff!important;
  border-color:#bdcdf5!important;
  color:#3658b1!important;
  box-shadow:0 6px 16px rgba(93,126,211,.12)!important;
}
.calendar-period-nav .calendar-today:hover{
  background:#e7eeff!important;
  border-color:#aac0f3!important;
}

@media (max-width:900px){
  /* Navigation stays one row, three equal touch targets. */
  .calendar-period-nav{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .calendar-period-nav .calendar-nav-labeled,
  .calendar-period-nav .calendar-today{
    min-height:48px!important;
    height:48px!important;
    padding:0 6px!important;
    border-radius:13px!important;
    font-size:var(--ty-label,14px)!important;
    font-weight:850!important;
  }

  /* Month view is a true seven-column phone calendar: no horizontal dragging. */
  .calendar-board{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    border-radius:18px!important;
    overscroll-behavior:auto!important;
    scroll-snap-type:none!important;
  }
  .calendar-week-head,
  .calendar-grid{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
  }
  .calendar-week-head{
    min-height:40px!important;
    background:#f8fafc!important;
  }
  .calendar-week-head>span{
    min-width:0!important;
    min-height:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    font-size:0!important;
    color:#68788d!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .calendar-week-head>span::after{
    font-size:13px!important;
    line-height:1!important;
    font-weight:900!important;
  }
  .calendar-week-head>span:nth-child(1)::after{content:"ش"}
  .calendar-week-head>span:nth-child(2)::after{content:"ی"}
  .calendar-week-head>span:nth-child(3)::after{content:"د"}
  .calendar-week-head>span:nth-child(4)::after{content:"س"}
  .calendar-week-head>span:nth-child(5)::after{content:"چ"}
  .calendar-week-head>span:nth-child(6)::after{content:"پ"}
  .calendar-week-head>span:nth-child(7)::after{content:"ج"}
  .calendar-week-head>span.friday{color:#a45e62!important;background:#fff8f8!important}

  .calendar-grid{
    display:grid!important;
    align-items:stretch!important;
    gap:1px!important;
    background:#e7ecf2!important;
  }
  .calendar-day,
  .app-shell .calendar-day,
  .calendar-day.empty{
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    padding:4px!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    scroll-snap-align:none!important;
    touch-action:manipulation!important;
  }
  .calendar-day:nth-child(7n),
  .calendar-day.empty:nth-child(7n){background:#fffafa!important}
  .calendar-day.empty{background:#fafbfd!important}
  .calendar-day.empty:nth-child(7n){background:#fff8f8!important}
  .calendar-day:hover,.app-shell .calendar-day:hover{background:#f8faff!important;box-shadow:none!important}
  .calendar-day:nth-child(7n):hover{background:#fff5f5!important}
  .calendar-day.focused{
    z-index:1!important;
    box-shadow:inset 0 0 0 2px #b7c8f3!important;
    background:#f8faff!important;
  }
  .calendar-day.today{
    z-index:2!important;
    box-shadow:inset 0 0 0 2px #6c89d9!important;
  }
  .calendar-day-top{
    min-height:26px!important;
    height:26px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
  }
  .calendar-day-number{
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    color:#2f4057!important;
    background:transparent!important;
    font-size:15px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .calendar-day.today .calendar-day-number{
    background:#5f7fd1!important;
    color:#fff!important;
  }
  .calendar-day.focused:not(.today) .calendar-day-number{
    background:#eef3ff!important;
    color:#3658b1!important;
  }

  /* Holiday is a discreet status dot; text belongs in the day bottom sheet. */
  .calendar-day .holiday-mark{
    position:absolute!important;
    top:5px!important;
    left:5px!important;
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #efcaca!important;
    border-radius:50%!important;
    background:#e99b9b!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    overflow:hidden!important;
  }

  /* Only compact status dots live inside a month cell. Full text opens on tap. */
  .calendar-day-items{
    position:absolute!important;
    left:4px!important;
    right:4px!important;
    bottom:5px!important;
    min-height:9px!important;
    margin:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    overflow:hidden!important;
  }
  .calendar-day .day-item{
    display:inline-grid!important;
    place-items:center!important;
    width:8px!important;
    height:8px!important;
    min-width:8px!important;
    max-width:8px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  .calendar-day .day-item>span{display:none!important}
  .calendar-day .day-item>i{
    display:block!important;
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
    flex:0 0 7px!important;
    border-radius:50%!important;
  }
  .calendar-day .day-more{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:12px!important;
    height:12px!important;
    padding:0 2px!important;
    margin:0!important;
    border-radius:6px!important;
    background:#f0f3f7!important;
    color:#64748b!important;
    font-size:0!important;
    line-height:1!important;
    font-weight:900!important;
  }
  .calendar-day .day-more::after{
    content:"+" attr(data-count)!important;
    font-size:9px!important;
    line-height:1!important;
  }

  /* Day details already use the calendar drawer; make the mobile sheet unmistakable. */
  .calendar-overlay.calendar-drawer-overlay{
    align-items:flex-end!important;
    justify-content:stretch!important;
    padding:0!important;
  }
  .calendar-day-panel.calendar-drawer{
    width:100%!important;
    max-width:none!important;
    max-height:84svh!important;
    border-radius:22px 22px 0 0!important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  .calendar-period-nav{gap:5px!important}
  .calendar-period-nav .calendar-nav-labeled,
  .calendar-period-nav .calendar-today{
    padding:0 4px!important;
    font-size:13px!important;
  }
  .calendar-week-head>span::after{font-size:12.5px!important}
  .calendar-day-number{width:24px!important;height:24px!important;font-size:14px!important}
  .calendar-day-top{height:24px!important;min-height:24px!important}
  .calendar-day-items{bottom:4px!important;gap:2px!important}
  .calendar-day .day-item{width:7px!important;height:7px!important;min-width:7px!important;max-width:7px!important}
  .calendar-day .day-item>i{width:6px!important;height:6px!important;min-width:6px!important;flex-basis:6px!important}
}