/* All rules below are scoped to the calendar wrapper (#calendarContainer
   or .shalem) so they don't leak to admin TableMakerEx tables. */

/* Center the calendar horizontally — the wrapper takes a max width and
   auto margins so it doesn't hug the RTL side of the viewport. */
.shalem {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Calendar page only — top header band flush to the viewport top
   (no gap from body bg). Scoping via :has() ensures admin pages still
   get the legacy white-frame margin treatment. */
body:has(#calendarContainer) {
    margin: 0;
    background-color: white;
}
body:has(#calendarContainer) .smallDiv,
body:has(#calendarContainer) .bigDiv {
    margin: 0;
}
/* Title bar (יוני 2026 + arrows + statistics) — center within .shalem
   so it lines up above the centered calendar table. */
.shalem .titleDate {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 1rem 0;
}
.shalem .dateInRight {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #00355c;
}
.shalem .statistics {
    font-size: 0.95rem;
    color: #555;
    text-align: left;
}
.shalem .statistics div { display: inline-block; margin-inline-start: 1rem; }
.shalem .statistics span { font-weight: bold; color: #00355c; }

#calendarContainer table {
    margin: 0 auto;
    font-family: Arial;
    background-clip: padding-box;
    border-collapse: collapse;
    table-layout: fixed;
}

#calendarContainer table td.th {
    color: #31a3b9;
    background-color: #dceff1;
    font-weight: bold;
    font-size: 16px;
    height: 26px;
    text-align: center;
    background-clip: padding-box;
}

#calendarContainer table td {
    border: 1px solid #31a3b9;
    /* removed fixed width: 139px — was forcing total 973px regardless of
       viewport. table-layout:fixed with no per-cell width makes 7 equal cols. */
    color: #31a3b9;
    position: relative;
    background-color: white;
    background-clip: padding-box;
    padding: 0%;
    vertical-align: top;
}

#calendarContainer .timesIcon {
    float: left;
    cursor: pointer;
    padding: 7px 20px 20px 7px;
}

#calendarContainer .number {
    font-size: 32px;
    font-weight: bold;
    display: block;
}

#calendarContainer .hDate, #calendarContainer .mozaeihag,
#calendarContainer .Parasha, #calendarContainer .parashaplus {
    display: block;
}

#calendarContainer .hadlakat, #calendarContainer .mozaeihag,
#calendarContainer .Parasha, #calendarContainer .parashaplus {
    font-size: 12px;
    color: #CC6600;
}

#calendarContainer .Parasha {
    font-weight: bold;
}

#calendarContainer table td.outOfMonthDate,
#calendarContainer table td.saturdayOutOfMonthDate {
    color: #ccc;
}

#calendarContainer .monthTitle {
    color: #c0866d;
    font-size: 1.6em;
    font-weight: bold;
    text-align: right;
    width: 100%;
    display: block;
}

#calendarContainer .hebrewDate {
    float: left;
    white-space: nowrap;
}

#calendarContainer .gDate {
    float: right;
    white-space: nowrap;
}

#calendarContainer table td.friday {
    background-color: #f8eeec;
}

#calendarContainer table td.Vacation,
#calendarContainer table td.saturday,
#calendarContainer table td.saturdayOutOfMonthDate {
    background-color: #f1d9d5;
}

#calendarContainer table td.Short {
    background-color: #EDF1F4;
}

#calendarContainer table td.AnotherWorkDay {
    background-color: #F9FCFF;
}

#calendarContainer .free, #calendarContainer .sick {
    background-color: #ffffcc !important;
}

.nextPrevButtons {
    width: 1.5em;
    vertical-align: middle;
}