.hours-row.is-disabled {
    background: #f8f9f9;
    border-radius: 12px;
    padding-inline: 12px;
}

.hours-row.is-disabled .hours-ranges {
    opacity: .62;
}

.hours-day-toggle {
    align-content: start;
}

.hours-day-status {
    display: inline-flex;
    width: max-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
}

.hours-day-status.open {
    background: #dff5ec;
    color: #08634f;
}

.hours-day-status.closed {
    background: #f4e8e8;
    color: #9b3535;
}

.hours-day-status.warning {
    background: #fff3df;
    color: #7c5316;
}

.special-row.is-closed {
    background: #fffafa;
    border: 1px solid #f0d9d9;
    border-radius: 12px;
    padding: 10px;
}

/* 日付をまたぐ受付時間はサーバが422で拒みます。断られてから気づくのでは遅いので、
   書き方を先に示し、該当の行にはその場で印を付けます。 */
.hours-note {
    background: #eff9f6;
    border: 1px solid #9ccbc0;
    border-radius: 10px;
    color: #08634f;
    font-size: 13px;
    margin: 0 0 14px;
    padding: 10px 12px;
}

.time-range.is-invalid input[type="time"] {
    background: #fffaf0;
    border-color: #d8a33f;
}

.time-range .range-warning {
    grid-column: 1 / -1;
}

/* 曜日の行の列は、中身の最小幅で広げません（2026-10-13）。1fr／auto の列は時刻の入力の既定の幅まで広がるので、
   幅360pxのスマホでは曜日と「時間追加」がカードの枠の外へ出て、ページが横に伸びていました（admin.css の .tab-panel と同じ理由）。
   時刻の入力は列の幅まで縮めます（「11:00」は100px弱に収まります）。 */
.hours-ranges {
    grid-template-columns: minmax(0, 1fr);
}

.time-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
}

.time-range input[type="time"] {
    min-width: 0;
}

/* ---- iPad・iPhone（Safari）の時刻・日付の欄と、同じ行のボタンの高さ（2026-10-15） ----
   キッチンの表示日（admin-orders.css）・予約管理（admin-reservations.css）と同じ対策です。Safari の date / time は
   appearance:auto のままだと幅を守らず中身の幅で広がり、高さもほかの欄とずれ、値が中央に寄ります。
   欄と、同じ行の「×」「削除」は46pxにそろえます（以前は欄約44.5px・ボタン約43pxで段違いでした）。 */
.time-range input[type="time"],
.special-row input[type="date"],
.special-row input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--card);
    display: block;
    line-height: 1.4;
    max-width: 100%;
    min-height: 46px;
}

.time-range input[type="time"]::-webkit-date-and-time-value,
.special-row input[type="date"]::-webkit-date-and-time-value,
.special-row input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

.time-range > button,
.special-row > button {
    min-height: 46px;
}

@media (max-width: 760px) {
    .hours-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 受付時間の指摘は複数行になります。改行をそのまま出します。 */
.message {
    white-space: pre-line;
}

/* ===== 特定日の例外（特別営業日）の行 ===== */

/* 休業の行にだけ枠と余白が付くと、同じ画面幅でも中身の幅が22px狭くなり、
   隣の行と列数が食い違ってガタつきます（例: 390pxで開店行2列・休業行1列）。
   全部の行に同じ余白と透明な枠を持たせて幅をそろえます。 */
.special-row {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px;
}

/* 列数は端末幅に決めさせます（admin.css の .special-row が auto-fit）。
   固定5列だと、760pxのブレークポイントに入らない iPad（縦768〜834px）で
   150px/110px のトラックにラベルや日付・時刻の入力が収まらず、
   開始・終了の欄へ横からあふれていました。 */
.special-row > * {
    min-width: 0;
}

.special-row input {
    min-width: 0;
}

/* 1fr トラックに入ると「削除」が入力欄と同じ幅まで伸び、赤いボタンが誤タップを誘います。
   左寄せしつつ、指で押せる幅は残します。 */
.special-row > button {
    justify-self: start;
    min-width: 88px;
}

/* label{display:grid}（admin.css）のままだとチェックが上、「休業」が下に割れます。
   .option-default-toggle（admin-catalog.css）と同じ形にします。 */
.special-closed-toggle {
    align-items: center;
    display: flex;
    gap: 7px;
}

/* 注記は width:max-content（約214px）なので、155pxのトラックに入れると必ずあふれ、
   開始・終了の欄に重なります。行を丸ごと使わせます。 */
.special-row > .hours-day-status {
    grid-column: 1 / -1;
}