.jalali-control { display: inline-flex; flex-direction: column; gap: .5rem; min-width: 0; max-width: 100%; width: 100%; }
.jalali-date-row { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.jalali-date-row input { width: 100%; min-width: 0; flex: 1; font-variant-numeric: tabular-nums; }
.jalali-time-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.jalali-time-row label { font-size: .8rem; }
.jalali-time-row input { flex: 1; min-width: 9rem; }
.calendar-toggle { flex: 0 0 44px; background: #ede1cc; color: #1b2520; border: 1px solid #b5afa3; border-radius: 8px; cursor: pointer; font-size: 1.5rem; }
.calendar-toggle[hidden], .sanga-calendar [hidden] { display: none; }
.sanga-calendar { background: #fffdf9; color: #1b2520; border: 1px solid #b5afa3; border-radius: 16px; padding: 1rem; width: min(26rem, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; font-family: "Vazirmatn", Tahoma, sans-serif; box-shadow: 0 16px 64px #1b252033; }
.sanga-calendar::backdrop { background: #1b252088; }
.sanga-calendar h2 { font-size: 1.05rem; margin: 0; color: inherit; background: none; padding: 0; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.calendar-navigation { display: flex; align-items: end; gap: .4rem; }
.calendar-navigation label { flex: 1; min-width: 0; font-size: .8rem; }
.calendar-navigation select, .calendar-navigation input { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; font: inherit; background: #fffdf9; color: #1b2520; border: 1px solid #b5afa3; border-radius: 6px; padding: .3rem; }
.calendar-navigation > button { min-width: 40px; }
.sanga-calendar button { font: inherit; background: #f4f1eb; color: #1b2520; border: 1px solid #b5afa3; border-radius: 6px; min-height: 44px; padding: .35rem .55rem; cursor: pointer; }
.sanga-calendar :is(button, input, select):focus-visible { outline: 3px solid #67451f; outline-offset: 2px; }
.sanga-calendar button:hover { background: #ede1cc; }
.calendar-status { min-height: 1.7em; margin: .6rem 0; font-size: .85rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: .75rem; }
.calendar-weekday { font-size: .62rem; text-align: center; padding: .25rem 0; overflow-wrap: anywhere; }
.calendar-grid button { padding: .2rem; font-size: .9rem; }
.calendar-grid button[aria-current="date"] { border: 2px solid #67451f; }
.calendar-grid button[aria-pressed="true"] { background: #23362d; color: #fffdf9; }
@media (max-width: 360px) { .sanga-calendar { padding: .65rem; } .calendar-grid button { min-height: 38px; } }