/* Operation settings page */

body.mado-portal-account-page .mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard,
.mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(
        1140px
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
        + var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px))
    );
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
    padding-right: var(--mado-portal-page-gutter-x, clamp(18px, 2.4vw, 32px));
}

@media (max-width: 782px) {
    body.mado-portal-account-page .mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard,
    .mado-portal-shell--action-support-inbox-settings .mado-portal-shell__content-frame.is-standard {
        padding-left: var(--mado-portal-page-gutter-x-mobile, 16px);
        padding-right: var(--mado-portal-page-gutter-x-mobile, 16px);
    }
}

.mado-portal-container.mado-operation-settings-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.mado-operation-settings {
    --mado-operation-text: #0f172a;
    --mado-operation-muted: #64748b;
    --mado-operation-line: #d7e3ee;
    --mado-operation-line-soft: #e8eef5;
    --mado-operation-section-line: #cfdbe7;
    --mado-operation-surface: #ffffff;
    --mado-operation-soft: #f6f9fc;
    --mado-operation-accent: #1dbfa0;
    --mado-operation-accent-strong: #169a81;
    --mado-operation-accent-soft: #e9fbf7;
    --mado-operation-blue: #2563eb;
    --mado-operation-danger: #b42318;
    --mado-operation-danger-soft: #fff1f1;
    --mado-operation-warning: #92400e;
    --mado-operation-warning-soft: #fff7ed;
    --mado-operation-accordion-plus-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060.09%2060.09'%3E%3Cpath%20fill='black'%20d='M23.24%200h13.62v60.09H23.24z'/%3E%3Cpath%20fill='black'%20d='M0%2023.24h60.09v13.62H0z'/%3E%3C/svg%3E");
    --mado-operation-accordion-minus-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060.09%2060.09'%3E%3Cpath%20fill='black'%20d='M0%2023.24h60.09v13.62H0z'/%3E%3C/svg%3E");
    box-sizing: border-box;
    display: grid;
    gap: 18px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto 28px;
    padding: var(--mado-portal-panel-padding, 30px);
    border: 1px solid var(--mado-operation-line);
    border-radius: 22px;
    background: var(--mado-operation-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
    color: var(--mado-operation-text);
}

.mado-operation-settings *,
.mado-operation-settings *::before,
.mado-operation-settings *::after {
    box-sizing: border-box;
}

.mado-operation-settings .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.mado-operation-settings button:focus-visible,
.mado-operation-settings a:focus-visible,
.mado-operation-settings input:focus-visible,
.mado-operation-settings select:focus-visible,
.mado-operation-settings textarea:focus-visible,
.mado-operation-settings summary:focus-visible,
.mado-operation-settings [tabindex="0"]:focus-visible {
    outline: 3px solid rgba(29, 191, 160, 0.28);
    outline-offset: 2px;
}

.mado-operation-settings__intro {
    display: grid;
    gap: 8px;
}

.mado-operation-settings__heading {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: var(--mado-portal-heading-page-size, 22px);
    font-weight: var(--mado-portal-heading-weight, 800);
    line-height: var(--mado-portal-heading-line-height, 1.5);
    letter-spacing: 0;
}

.mado-operation-settings__lead {
    max-width: 720px;
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 14px;
    line-height: 1.75;
}




/* Common business-hours settings */
.mado-operation-business-hours {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--mado-operation-section-line);
    border-radius: 16px;
    background: #ffffff;
}

.mado-operation-business-hours__form {
    display: grid;
    gap: 18px;
}

.mado-operation-business-hours__toggle-row {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.mado-operation-business-hours__copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mado-operation-business-hours__title {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: var(--mado-portal-heading-section-size, 18px);
    font-weight: 800;
    line-height: var(--mado-portal-heading-line-height, 1.5);
}

.mado-operation-business-hours__lead,
.mado-operation-business-hours__hint {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-operation-business-hours__switch,
.mado-operation-resolution-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}

.mado-operation-business-hours__switch .mado-ui-switch-input,
.mado-operation-resolution-switch .mado-ui-switch-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mado-operation-business-hours__switch .mado-ui-switch-visual,
.mado-operation-resolution-switch .mado-ui-switch-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 28px;
    padding: 3px;
    border: 1px solid #b9c7d6;
    border-radius: 999px;
    background: #cbd5e1;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.mado-operation-business-hours__switch .mado-ui-switch-visual__thumb,
.mado-operation-resolution-switch .mado-ui-switch-visual__thumb {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
    transform: translateX(0);
    transition: transform 0.18s ease;
}

.mado-operation-business-hours__switch .mado-ui-switch-input:checked + .mado-ui-switch-visual,
.mado-operation-resolution-switch .mado-ui-switch-input:checked + .mado-ui-switch-visual {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent);
}

.mado-operation-business-hours__switch .mado-ui-switch-input:checked + .mado-ui-switch-visual .mado-ui-switch-visual__thumb,
.mado-operation-resolution-switch .mado-ui-switch-input:checked + .mado-ui-switch-visual .mado-ui-switch-visual__thumb {
    transform: translateX(22px);
}

.mado-operation-business-hours__switch .mado-ui-switch-input:focus-visible + .mado-ui-switch-visual,
.mado-operation-resolution-switch .mado-ui-switch-input:focus-visible + .mado-ui-switch-visual {
    outline: 3px solid rgba(29, 191, 160, 0.22);
    outline-offset: 2px;
}

.mado-operation-business-hours__settings {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding-top: 18px;
    border-top: 1px solid var(--mado-operation-line-soft);
    transition: opacity 0.18s ease, filter 0.18s ease;
}

.mado-operation-business-hours__form:has(.mado-operation-business-hours__switch .mado-ui-switch-input:not(:checked)) .mado-operation-business-hours__settings {
    opacity: 0.42;
    filter: grayscale(0.45);
    pointer-events: none;
    user-select: none;
}

.mado-operation-business-hours__days {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.mado-operation-business-hours__field-label {
    display: block;
    margin: 0 0 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-business-hours__day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.mado-operation-business-hours__day {
    position: relative;
    display: block;
    cursor: pointer;
}

.mado-operation-business-hours__day input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mado-operation-business-hours__day span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.mado-operation-business-hours__day input:checked + span {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent-soft);
    color: #087866;
}

.mado-operation-business-hours__day input:focus-visible + span {
    outline: 3px solid rgba(29, 191, 160, 0.22);
    outline-offset: 2px;
}

.mado-operation-business-hours__time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.mado-operation-business-hours__field {
    display: grid;
    gap: 0;
    min-width: 0;
}

.mado-operation-business-hours__input,
.mado-operation-business-hours__select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: var(--mado-operation-text);
    font: inherit;
    font-size: 13px;
    box-shadow: none;
}

.mado-operation-business-hours__input:focus,
.mado-operation-business-hours__select:focus {
    border-color: var(--mado-operation-accent);
    outline: 3px solid rgba(29, 191, 160, 0.14);
    outline-offset: 0;
}

.mado-operation-business-hours__footer {
    display: flex;
    justify-content: flex-end;
}

.mado-operation-business-hours__hint {
    max-width: 680px;
}

.mado-operation-business-hours__save {
    appearance: none;
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #2eb2c1;
    border-radius: 11px;
    background: #e7f8fa;
    color: #0b6870;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mado-operation-business-hours__save:hover {
    border-color: #2197a5;
    background: #dff4f7;
    color: #075861;
    transform: translateY(-1px);
}

.mado-operation-business-hours__save:focus-visible {
    outline: 3px solid rgba(46, 178, 193, 0.34);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .mado-operation-business-hours__time-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-operation-business-hours__day-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mado-operation-business-hours__save {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .mado-operation-business-hours {
        padding: 16px;
    }

    .mado-operation-business-hours__toggle-row {
        align-items: flex-start;
    }

    .mado-operation-business-hours__day-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Shared staff availability */
.mado-operation-staff-availability {
    display: grid;
    padding: 20px;
    border: 1px solid var(--mado-operation-section-line);
    border-radius: 16px;
    background: #ffffff;
}

.mado-operation-staff-availability__form {
    display: grid;
    gap: 18px;
}

.mado-operation-staff-availability__toggle-row {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.mado-operation-staff-availability__copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mado-operation-staff-availability__title {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: var(--mado-portal-heading-section-size, 18px);
    font-weight: 800;
    line-height: var(--mado-portal-heading-line-height, 1.5);
}

.mado-operation-staff-availability__lead,
.mado-operation-staff-availability__note span {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-operation-staff-availability__note strong {
    color: var(--mado-operation-text);
    font-size: 13px;
    line-height: 1.5;
}

.mado-operation-staff-availability__switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}

.mado-operation-staff-availability__switch .mado-ui-switch-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mado-operation-staff-availability__switch .mado-ui-switch-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 50px;
    height: 28px;
    padding: 3px;
    border: 1px solid #b9c7d6;
    border-radius: 999px;
    background: #cbd5e1;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.mado-operation-staff-availability__switch .mado-ui-switch-visual__thumb {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.24);
    transform: translateX(0);
    transition: transform 0.18s ease;
}

.mado-operation-staff-availability__switch .mado-ui-switch-input:checked + .mado-ui-switch-visual {
    border-color: #dc704f;
    background: #ef835f;
}

.mado-operation-staff-availability__switch .mado-ui-switch-input:checked + .mado-ui-switch-visual .mado-ui-switch-visual__thumb {
    transform: translateX(22px);
}

.mado-operation-staff-availability__switch .mado-ui-switch-input:focus-visible + .mado-ui-switch-visual {
    outline: 3px solid rgba(239, 131, 95, 0.2);
    outline-offset: 2px;
}

.mado-operation-staff-availability__note {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #dbe7f2;
    border-radius: 11px;
    background: #f8fbff;
}

.mado-operation-staff-availability__actions {
    display: flex;
    justify-content: flex-end;
}

.mado-operation-staff-availability__save {
    appearance: none;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid #2eb2c1;
    border-radius: 11px;
    background: #e7f8fa;
    color: #0b6870;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mado-operation-staff-availability__save:hover {
    border-color: #2197a5;
    background: #dff4f7;
    color: #075861;
    transform: translateY(-1px);
}

.mado-operation-staff-availability__save:focus-visible {
    outline: 3px solid rgba(46, 178, 193, 0.34);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .mado-operation-staff-availability__save {
        width: 100%;
    }
}

@media (max-width: 440px) {
    .mado-operation-staff-availability {
        padding: 16px;
    }

    .mado-operation-staff-availability__toggle-row {
        align-items: flex-start;
    }
}

.mado-operation-mode {
    display: grid;
    gap: 16px;
}

.mado-operation-mode__note {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-operation-mode-selector,
.mado-operation-mode-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--mado-operation-section-line);
    border-radius: 16px;
    background: #ffffff;
}

.mado-operation-mode-selector__head,
.mado-operation-mode-panel__head {
    display: grid;
    gap: 6px;
}

.mado-operation-mode-selector__title,
.mado-operation-mode-panel__title {
    margin: 0;
    color: var(--mado-operation-text);
    font-weight: 800;
    line-height: var(--mado-portal-heading-line-height, 1.5);
}

.mado-operation-mode-selector__title {
    font-size: var(--mado-portal-heading-section-size, 18px);
}

.mado-operation-mode-panel__title {
    font-size: 17px;
}

.mado-operation-mode-selector__lead,
.mado-operation-mode-panel__text {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-operation-mode-selector__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mado-operation-mode-choice {
    appearance: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 92px;
    padding: 14px 16px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--mado-operation-text);
    font: inherit;
    text-align: left;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mado-operation-settings button.mado-operation-mode-choice:hover:not(:disabled) {
    border-color: #8fdaca;
    background: #f6fffc;
    color: var(--mado-operation-text);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}

.mado-operation-settings button.mado-operation-mode-choice:focus-visible {
    outline: 3px solid rgba(29, 191, 160, 0.22);
    outline-offset: 2px;
}

.mado-operation-settings button.mado-operation-mode-choice.is-selected,
.mado-operation-settings button.mado-operation-mode-choice.is-selected:hover:not(:disabled) {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent-soft);
    color: var(--mado-operation-text);
    box-shadow: inset 0 0 0 1px rgba(29, 191, 160, 0.12);
    transform: none;
}

.mado-operation-mode-choice.is-disabled,
.mado-operation-mode-choice:disabled {
    border-color: #dbe4ee;
    background: #f8fafc;
    color: #64748b;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.78;
}

.mado-operation-mode-choice__main {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mado-operation-mode-choice__label {
    color: var(--mado-operation-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-mode-choice__label-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mado-operation-mode-choice__label-row .mado-operation-help-chip {
    position: relative;
    z-index: 2;
}


.mado-operation-settings button.mado-operation-mode-choice:hover:not(:disabled) .mado-operation-mode-choice__label,
.mado-operation-settings button.mado-operation-mode-choice.is-selected .mado-operation-mode-choice__label {
    color: var(--mado-operation-text);
}


.mado-operation-mode-choice.is-disabled .mado-operation-mode-choice__label,
.mado-operation-mode-choice:disabled .mado-operation-mode-choice__label {
    color: #64748b;
}


.mado-operation-mode-choice__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.mado-operation-mode-choice.is-selected .mado-operation-mode-choice__status {
    border-color: #99e4d5;
    background: #ffffff;
    color: #087866;
}

.mado-operation-mode-editor {
    display: grid;
}

.mado-operation-mode-panel[hidden] {
    display: none;
}

.mado-operation-mode-panel__eyebrow {
    color: var(--mado-operation-accent-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mado-operation-mode-flow {
    /*
     * 2026-08-07: フローは「処理の順番」を示すため、チップ間を矢印で接続する。
     * Arrow path: Font Awesome Free v7.3.1 (user supplied), https://fontawesome.com/license/free
     */
    --mado-operation-flow-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%235f756f' d='M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z'/%3E%3C/svg%3E");
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mado-operation-mode-flow--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mado-operation-mode-flow--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mado-operation-mode-flow--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mado-operation-mode-flow__item {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #bfe9df;
    border-radius: 12px;
    background: #f0fdf9;
    color: #0f513f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.mado-operation-mode-flow__item--outcomes {
    flex-direction: column;
    gap: 5px;
}

.mado-operation-mode-flow__item--outcomes > span {
    display: block;
    width: 100%;
}

.mado-operation-mode-flow__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -27px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-image: var(--mado-operation-flow-arrow-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
}

.mado-operation-mode-form,
.mado-operation-mode-activate {
    display: grid;
    gap: 10px;
}

.mado-operation-mode-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

fieldset.mado-operation-mode-field {
    margin: 0;
    padding: 0;
    border: 0;
}

.mado-operation-mode-field__label {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

/* Inline ? help chips reuse the portal-wide help-chip behavior and styling. */
.mado-operation-help-label-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
}

.mado-operation-help-label-row .mado-operation-settings-checkbox {
    margin: 0;
}

.mado-operation-help-chip {
    flex: 0 0 auto;
}

.mado-operation-mode-field__hint {
    color: var(--mado-operation-muted);
    font-size: 12px;
    line-height: 1.65;
}

.mado-operation-mode-input,
.mado-operation-mode-textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--mado-operation-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.55;
    box-shadow: none;
}

.mado-operation-mode-input {
    min-height: 42px;
}

.mado-operation-mode-textarea {
    min-height: 92px;
    resize: vertical;
}

.mado-operation-mode-input:focus,
.mado-operation-mode-textarea:focus {
    border-color: var(--mado-operation-accent);
    outline: 3px solid rgba(29, 191, 160, 0.18);
    outline-offset: 0;
}

/* 2026-08-08: operation-settings editable text size SSOT.
 * mado-base.css has a more specific `font: inherit` rule, so define the effective
 * page value here with higher specificity instead of relying on the low-specificity
 * .mado-operation-mode-input declaration. Checkboxes/radios are intentionally excluded.
 */
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="text"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="email"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="url"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="search"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="number"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="password"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="tel"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="date"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="time"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="datetime-local"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="month"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings input[type="week"],
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings select,
body.mado-portal-account-page .mado-portal-container.mado-operation-settings-container .mado-operation-settings textarea {
    font-size: 14px;
}

.mado-operation-mode-state {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #d7e3ee;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
}

.mado-operation-mode-state strong {
    color: #0f172a;
    font-size: 13px;
}

.mado-operation-mode-state.is-accepting {
    border-color: #bfe9df;
    background: #f0fdf9;
}

.mado-operation-mode-state.is-closed {
    border-color: #fed7aa;
    background: #fff7ed;
}

.mado-operation-mode-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #bfe9df;
    border-radius: 10px;
    background: #f0fdf9;
}

.mado-operation-mode-readonly__value {
    color: #0f513f;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-mode-readonly__meta {
    color: #4b665f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.mado-operation-mode-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.mado-operation-mode-activation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 12px;
    background: #f8fafc;
}

.mado-operation-mode-activation__copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mado-operation-mode-activation__label {
    color: var(--mado-operation-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-mode-activation__text {
    color: var(--mado-operation-muted);
    font-size: 12px;
    line-height: 1.6;
}

.mado-operation-mode-activation__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid #86d9c7;
    border-radius: 12px;
    background: #ecfdf5;
    color: #047857;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    opacity: 1;
}

.mado-operation-mode-activation__status.is-muted {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #475569;
}

.mado-operation-mode-activation__status.is-warning {
    border-color: #f1c36d;
    background: #fffaf0;
    color: #92400e;
}

.mado-operation-mode-form__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}


.mado-operation-settings__messages {
    display: grid;
    gap: 10px;
}

.mado-operation-settings-notice {
    padding: 12px 14px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.mado-operation-settings-notice--error {
    border-color: #fecaca;
    background: var(--mado-operation-danger-soft);
    color: var(--mado-operation-danger);
}

.mado-operation-settings__accordion {
    display: grid;
    gap: 10px;
}

.mado-operation-settings-section {
    overflow: hidden;
    border: 1px solid var(--mado-operation-line);
    border-radius: 12px;
    background: var(--mado-operation-surface);
    box-shadow: none;
}

.mado-operation-settings-section[open] {
    border-color: #9fb4ca;
    background: var(--mado-operation-surface);
}

.mado-operation-settings-section__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    border-bottom: 1px solid transparent;
    background: var(--mado-operation-surface);
    color: var(--mado-operation-text);
    cursor: pointer;
    list-style: none;
}

.mado-operation-settings-section__summary::-webkit-details-marker {
    display: none;
}

.mado-operation-settings-section[open] > .mado-operation-settings-section__summary {
    border-bottom-color: var(--mado-operation-line-soft);
    background: #ffffff;
}

.mado-operation-settings-section__summary:hover {
    background: #f8fafc;
}

.mado-operation-settings-section__summary:focus-visible {
    outline: 3px solid rgba(29, 191, 160, 0.24);
    outline-offset: -3px;
}

.mado-operation-settings-section__summary-main {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mado-operation-settings-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #475569;
}

.mado-operation-settings-section__icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

.mado-operation-settings-section__summary-text {
    display: flex;
    align-items: center;
    min-width: 0;
}

.mado-operation-settings-section__summary-main > .mado-device-notification-summary-label {
    grid-column: 2;
    color: var(--mado-operation-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-settings-section--device-notification .mado-device-notification-summary-label > span:not(.mado-operation-settings-device-title):not(#mado-device-notification-help-btn) {
    display: none;
}

.mado-operation-settings-section__title {
    color: var(--mado-operation-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-settings-section__description {
    display: none;
}

.mado-operation-settings-section__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    justify-self: center;
    color: #0f172a;
    font-size: 0;
    line-height: 0;
}

.mado-operation-settings-section__toggle::before {
    content: "";
    position: absolute;
    display: block;
    width: 14px;
    height: 14px;
    inset: 0;
    margin: auto;
    background: currentColor;
    transform: translateY(-1px);
    -webkit-mask-image: var(--mado-operation-accordion-plus-icon);
    mask-image: var(--mado-operation-accordion-plus-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.mado-operation-settings-section__toggle::after {
    content: none;
    display: none;
}

.mado-operation-settings-section[open] > .mado-operation-settings-section__summary .mado-operation-settings-section__toggle::before {
    -webkit-mask-image: var(--mado-operation-accordion-minus-icon);
    mask-image: var(--mado-operation-accordion-minus-icon);
}

.mado-operation-settings-section__body {
    padding: 18px 20px 20px;
    background: #f8fbff;
}

.mado-operation-settings__section-lead {
    margin: 0 0 14px;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.7;
}

.mado-operation-settings-control-stack,
.mado-operation-settings-form {
    display: grid;
    gap: 16px;
}


.mado-operation-settings-field {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.mado-operation-settings-field__label {
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-settings__hint {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 12px;
    line-height: 1.65;
}

.mado-operation-settings__input,
.mado-operation-settings__time-input {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--mado-operation-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
}

.mado-operation-settings__input:focus,
.mado-operation-settings__time-input:focus {
    border-color: var(--mado-operation-accent);
    outline: 3px solid rgba(29, 191, 160, 0.18);
    outline-offset: 0;
}

.mado-operation-settings__select--compact {
    max-width: 240px;
}

.mado-operation-settings-radio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mado-operation-settings-radio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mado-operation-line);
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
}

.mado-operation-settings-radio:hover {
    border-color: #9bb8d6;
    background: #f8fbff;
}

.mado-operation-settings-radio input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.mado-operation-settings-radio span {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}

.mado-operation-settings-radio.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.mado-operation-settings-summary-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mado-operation-settings-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid #c7d3dd;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.mado-operation-settings-chip--muted {
    background: #f8fafc;
    color: var(--mado-operation-muted);
}

.mado-operation-settings__inline-status {
    min-height: 20px;
    color: var(--mado-operation-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.mado-operation-settings .mado-inbox-inline-status--error {
    color: var(--mado-operation-danger);
}

.mado-operation-settings .mado-inbox-inline-status--muted {
    color: var(--mado-operation-muted);
}

.mado-operation-settings .mado-inbox-inline-status--success {
    color: #047857;
}

.mado-operation-settings .mado-inbox-inline-status--default {
    color: var(--mado-operation-muted);
}

.mado-operation-settings .mado-inbox-is-hidden {
    display: none;
}

.mado-operation-settings-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: var(--mado-operation-text);
    cursor: pointer;
}

.mado-operation-settings-checkbox__input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 2px 0 0;
    accent-color: var(--mado-operation-accent);
}

.mado-operation-settings-checkbox__text {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
}

.mado-operation-settings-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    cursor: pointer;
}

.mado-operation-settings-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.mado-operation-settings-switch__visual,
.mado-operation-settings .mado-web-push-switch-visual {
    position: relative;
    display: inline-flex;
    width: 48px;
    height: 28px;
    flex: 0 0 48px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e2e8f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mado-operation-settings-switch__visual::after,
.mado-operation-settings .mado-web-push-switch-visual::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.22);
    transition: transform 0.18s ease;
}

.mado-operation-settings-switch__input:checked + .mado-operation-settings-switch__visual,
.mado-operation-settings .mado-web-push-switch-input:checked + .mado-web-push-switch-visual {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent);
    box-shadow: inset 0 1px 2px rgba(15, 154, 129, 0.16), 0 0 0 3px rgba(29, 191, 160, 0.14);
}

.mado-operation-settings-switch__input:checked + .mado-operation-settings-switch__visual::after,
.mado-operation-settings .mado-web-push-switch-input:checked + .mado-web-push-switch-visual::after {
    transform: translateX(20px);
}

.mado-operation-settings-switch__input:focus-visible + .mado-operation-settings-switch__visual,
.mado-operation-settings .mado-web-push-switch-input:focus-visible + .mado-web-push-switch-visual {
    outline: 3px solid rgba(29, 191, 160, 0.24);
    outline-offset: 2px;
}

.mado-operation-settings-switch__text {
    min-width: 0;
    color: var(--mado-operation-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-settings-day-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mado-operation-settings-day-pill {
    position: relative;
    cursor: pointer;
}

.mado-operation-settings-day-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.mado-operation-settings-day-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.mado-operation-settings-day-pill input:checked + span {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent);
    color: #ffffff;
}

.mado-operation-settings-day-pill input:focus-visible + span {
    outline: 3px solid rgba(29, 191, 160, 0.22);
    outline-offset: 2px;
}

.mado-operation-settings-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.mado-operation-settings-actions,
.mado-operation-settings-notification-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mado-operation-settings__button.button,
.mado-operation-settings .button.mado-operation-settings__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid #0f172a;
    border-radius: 12px;
    background: #0f172a;
    background-image: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.mado-operation-settings__button.button:hover,
.mado-operation-settings__button.button:focus,
.mado-operation-settings .button.mado-operation-settings__button:hover,
.mado-operation-settings .button.mado-operation-settings__button:focus {
    border-color: #1e293b;
    background: #1e293b;
    background-image: none;
    color: #ffffff;
}

/*
 * OPERATION SAVE BUTTONS / 運用設定の保存ボタン（2026-08-06）
 * - Only the operation-scope save and per-mode settings save use this cyan contract.
 * - Activation buttons such as「この運用に切り替える」remain black and are not included.
 * - Metrics match the AI learning-data primary save button.
 */
.mado-operation-scope__actions .mado-operation-settings__button.button,
.mado-operation-mode-actions .mado-operation-settings__button.button {
    appearance: none;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #2eb2c1;
    border-radius: 11px;
    background: #e7f8fa;
    background-image: none;
    color: #0b6870;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: none;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.mado-operation-scope__actions .mado-operation-settings__button.button:hover,
.mado-operation-scope__actions .mado-operation-settings__button.button:focus,
.mado-operation-mode-actions .mado-operation-settings__button.button:hover,
.mado-operation-mode-actions .mado-operation-settings__button.button:focus {
    border-color: #2197a5;
    background: #dff4f7;
    background-image: none;
    color: #075861;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.09);
}

.mado-operation-scope__actions .mado-operation-settings__button.button:active,
.mado-operation-mode-actions .mado-operation-settings__button.button:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.12);
}

.mado-operation-scope__actions .mado-operation-settings__button.button:focus-visible,
.mado-operation-mode-actions .mado-operation-settings__button.button:focus-visible {
    outline: 3px solid rgba(46, 178, 193, 0.34);
    outline-offset: 2px;
}

.mado-operation-settings__button.button:focus-visible,
.mado-operation-settings .button.mado-operation-settings__button:focus-visible,
.mado-operation-business-hours__save:focus-visible,
.mado-operation-staff-availability__save:focus-visible {
    outline: 3px solid rgba(29, 191, 160, 0.28);
    outline-offset: 2px;
}

.mado-operation-settings-form > .mado-operation-settings__button.button,
.mado-operation-settings-form > .button.mado-operation-settings__button {
    justify-self: center;
    width: min(100%, 360px);
}


.mado-operation-settings__button-secondary.button,
.mado-operation-settings .button.mado-operation-settings__button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

.mado-operation-settings__button-secondary.button:hover,
.mado-operation-settings__button-secondary.button:focus {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #334155;
}

.mado-operation-settings-meta {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--mado-operation-line-soft);
    border-radius: 8px;
    background: #ffffff;
}

.mado-operation-settings-meta__line {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.mado-operation-settings-state-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--mado-bh-badge-fg, #374151);
    background: var(--mado-bh-badge-bg, #f3f4f6);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
}

.mado-operation-settings-state-badge[data-state-key="open"],
.mado-operation-settings-state-badge[data-state-key="force_on"],
.mado-operation-settings-state-badge[data-state-key="accepting"] {
    --mado-bh-badge-fg: #047857;
    --mado-bh-badge-bg: #ecfdf5;
}

.mado-operation-settings-state-badge[data-state-key="closed"],
.mado-operation-settings-state-badge[data-state-key="force_off"],
.mado-operation-settings-state-badge[data-state-key="outside_hours"] {
    --mado-bh-badge-fg: #b45309;
    --mado-bh-badge-bg: #fff7ed;
}

.mado-operation-settings-state-badge[data-state-key="disabled"] {
    --mado-bh-badge-fg: #475569;
    --mado-bh-badge-bg: #f1f5f9;
}

.mado-operation-settings-notification-card,
.mado-operation-settings-web-push-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--mado-operation-line-soft);
    border-radius: 8px;
    background: #ffffff;
}

.mado-operation-settings-notification-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mado-operation-settings-notification-card__main {
    flex: 1 1 auto;
    min-width: 0;
}

.mado-operation-settings-notification-card__status {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-switch-row {
    display: inline-grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-switch-text {
    color: var(--mado-operation-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-toggle-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--mado-operation-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-toggle-state.is-on {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-toggle-state.is-off {
    border-color: #e2e8f0;
    background: #f8fafc;
    color: var(--mado-operation-muted);
}

.mado-operation-settings #mado-web-push-settings .mado-web-push-switch-input:disabled + .mado-web-push-switch-visual {
    opacity: 0.55;
    cursor: not-allowed;
}

.mado-operation-settings .mado-inbox-web-push-card--locked {
    background: #f8fafc;
}

.mado-operation-settings .mado-inbox-web-push-lock-card__badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.mado-operation-settings .mado-inbox-web-push-lock-card__desc {
    margin: 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.6;
}

.mado-operation-settings .mado-device-notification-summary-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.mado-operation-settings .mado-device-notification-help-chip {
    transform: translateY(1px);
}

.mado-operation-settings-section:not([open]) .mado-device-notification-help-chip {
    display: none;
}

.mado-operation-settings-section[open] .mado-device-notification-help-chip {
    display: inline-flex;
}

@media (max-width: 900px) {
    .mado-operation-settings {
        padding: 22px;
    }

    .mado-operation-settings-radio-grid,
    .mado-operation-settings-time-grid {
        grid-template-columns: 1fr;
    }

    .mado-operation-settings__select--compact {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .mado-operation-mode-flow,
    .mado-operation-mode-flow--three,
    .mado-operation-mode-flow--five {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .mado-operation-mode-flow__item:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -27px;
        transform: translateX(50%) rotate(90deg);
    }
}

@media (max-width: 640px) {
    .mado-operation-settings {
        gap: 16px;
        padding: 18px;
    }

    .mado-operation-settings-section__summary {
        align-items: center;
        padding: 12px;
    }

    .mado-operation-settings-section__summary-main {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
    }

    .mado-operation-settings-section__icon {
        width: 34px;
        height: 34px;
    }

    .mado-operation-settings-section__body {
        padding: 14px;
    }

    .mado-operation-settings-notification-card__row {
        align-items: flex-start;
        flex-direction: column;
    }

    .mado-operation-settings #mado-web-push-settings .mado-web-push-switch-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .mado-operation-settings #mado-web-push-settings .mado-web-push-toggle-state {
        grid-column: 2;
        width: max-content;
    }
}

.mado-operation-settings {
    --mado-operation-save-button-width: 240px;
}


.mado-operation-settings-form > .mado-operation-settings__button.button,
.mado-operation-settings-form > .button.mado-operation-settings__button {
    justify-self: start;
    width: min(100%, var(--mado-operation-save-button-width));
    min-height: 40px;
    padding: 9px 16px;
}

.mado-operation-settings-section--email .mado-operation-settings-form > .mado-operation-settings__button.button,
.mado-operation-settings-section--email .mado-operation-settings-form > .button.mado-operation-settings__button {
    justify-self: center;
}

.mado-operation-settings-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: max-content;
    max-width: 100%;
}

.mado-operation-settings-switch__text {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.mado-operation-settings-switch__visual.mado-ui-switch-visual::after,
.mado-operation-settings .mado-web-push-switch-visual.mado-ui-switch-visual::after {
    content: none;
}

.mado-operation-settings-switch__input:checked ~ .mado-operation-settings-switch__text::after {
    content: none;
    display: none;
}

.mado-operation-settings .mado-ui-switch__text,
.mado-operation-settings .mado-web-push-switch-text {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.mado-operation-settings .mado-ui-status-chip {
    flex: 0 0 auto;
}

#mado-notification-dismiss,
.mado-operation-settings-section--browser-notification .mado-inbox-notification-dismiss {
    display: none;
}

.mado-operation-settings-browser-switch {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mado-operation-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mado-operation-settings-browser-switch:disabled {
    cursor: default;
}

.mado-operation-settings-browser-switch .mado-ui-status-chip {
    flex: 0 0 auto;
}

.mado-operation-settings-browser-switch .mado-ui-status-chip[hidden] {
    display: none;
}

.mado-operation-settings-section--device-notification .mado-inbox-web-push-card__actions,
.mado-operation-settings-section--device-notification .mado-inbox-setting-help--tight,
.mado-operation-settings-section--device-notification #mado-web-push-settings > .mado-device-notification-summary-label {
    display: none;
}

.mado-operation-settings-section--device-notification .mado-operation-settings-web-push-card,
.mado-operation-settings-section--device-notification .mado-inbox-web-push-card {
    gap: 10px;
    padding: 14px;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-switch-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: max-content;
    max-width: 100%;
    margin: 0;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-switch-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-toggle-state {
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-toggle-state.is-off {
    display: none;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-toggle-state.is-empty {
    display: none;
}

.mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-toggle-state.is-on {
    display: inline-flex;
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.mado-operation-settings-section--device-notification #mado-web-push-status {
    display: block;
    margin-top: 2px;
    color: #475569;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}

.mado-operation-settings-section--device-notification #mado-web-push-status:empty {
    display: none;
}

.mado-operation-settings-section--device-notification #mado-web-push-status.is-error,
.mado-operation-settings-section--device-notification #mado-web-push-status.is-mado-advisory {
    color: #92400e;
}

.mado-operation-settings-section--device-notification .mado-device-notification-summary-label {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.mado-operation-settings-section--device-notification .mado-device-notification-help-chip {
    display: inline-flex;
    transform: translateY(1px);
}

@media (max-width: 640px) {
    .mado-operation-settings {
        --mado-operation-save-button-width: 100%;
    }

    .mado-operation-mode-choice,
    .mado-operation-mode-activation {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-operation-mode-selector__grid,
    .mado-operation-mode-flow,
    .mado-operation-mode-flow--three,
    .mado-operation-mode-flow--five {
        grid-template-columns: minmax(0, 1fr);
    }

    .mado-operation-mode-choice__status {
        justify-self: start;
    }

    .mado-operation-mode-actions {
        justify-content: stretch;
    }

    .mado-operation-mode-actions .mado-operation-settings__button {
        width: 100%;
    }


    .mado-operation-settings-switch,
    .mado-operation-settings-switch__text,
    .mado-operation-settings-section--device-notification #mado-web-push-settings .mado-web-push-switch-row {
        flex-wrap: wrap;
    }
}

/* BROWSER NOTIFICATION CARD ALIGNMENT / ブラウザー通知（2026-08-30）
 * - 旧チャット運用ルールDOM（scenario-input-mode-*-inbox等）は現行PHPに存在しないため撤去。
 * - この2selectorは現役のブラウザー通知カードだけに属するため維持する。
 */
.mado-operation-settings-section--browser-notification .mado-operation-settings-notification-card__row {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
}

.mado-operation-settings-section--browser-notification .mado-operation-settings-notification-card__actions {
    justify-content: flex-start;
    width: 100%;
}


/* ===== MADO operation settings email field width 20260613 ===== */
.mado-operation-settings-section--email .mado-operation-settings-field {
    width: min(100%, 520px);
}

.mado-operation-settings-section--email .mado-operation-settings__input {
    width: 100%;
}

@media (max-width: 700px) {
    .mado-operation-settings-section--email .mado-operation-settings-field {
        width: 100%;
    }
}
/* ===== /MADO operation settings email field width 20260613 ===== */

/* ===== MADO browser notification permission status 20260613 ===== */
.mado-operation-settings-browser-switch {
    appearance: none;
    -webkit-appearance: none;
}

.mado-operation-settings-browser-switch.is-locked,
.mado-operation-settings-browser-switch.is-locked:hover,
.mado-operation-settings-browser-switch.is-locked:focus,
.mado-operation-settings-browser-switch.is-locked:active,
.mado-operation-settings-browser-switch:disabled,
.mado-operation-settings-browser-switch:disabled:hover,
.mado-operation-settings-browser-switch:disabled:focus,
.mado-operation-settings-browser-switch:disabled:active {
    border: 0;
    background: transparent;
    color: var(--mado-operation-text);
    box-shadow: none;
    text-shadow: none;
    transform: none;
    cursor: default;
    opacity: 1;
}

.mado-operation-settings-browser-switch.is-locked .mado-ui-switch__text,
.mado-operation-settings-browser-switch:disabled .mado-ui-switch__text {
    color: var(--mado-operation-text);
}
/* ===== /MADO browser notification permission status 20260613 ===== */


/* ===== MADO notification copy weight fix 20260613 ===== */
.mado-operation-settings-section--browser-notification .mado-operation-settings-notification-card__status {
    color: var(--mado-operation-muted);
    font-weight: 400;
}

.mado-operation-settings-section--device-notification .mado-operation-settings__section-lead {
    display: block;
    margin: 0 0 14px;
    color: var(--mado-operation-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}
/* ===== /MADO notification copy weight fix 20260613 ===== */

/* ===== MADO notification inner card no frame 20260613 ===== */
.mado-operation-settings-section--browser-notification .mado-operation-settings-notification-card,
.mado-operation-settings-section--device-notification .mado-operation-settings-web-push-card,
.mado-operation-settings-section--device-notification .mado-inbox-web-push-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mado-operation-settings-section--browser-notification .mado-operation-settings-notification-card__status,
.mado-operation-settings-section--device-notification .mado-operation-settings__section-lead {
    color: var(--mado-operation-muted);
    font-weight: 400;
}
/* ===== /MADO notification inner card no frame 20260613 ===== */

/* Public chat operation scope: scenario-only or five-mode AI/staff operation */
.mado-operation-scope {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--mado-operation-section-line);
    border-radius: 16px;
    background: #ffffff;
}

.mado-operation-scope__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mado-operation-scope__title {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: var(--mado-portal-heading-section-size, 18px);
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-scope__lead {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--mado-operation-muted);
    font-size: 13px;
    line-height: 1.75;
}

.mado-operation-scope__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.mado-operation-scope__current.is-enabled {
    border-color: #8ee1d1;
    background: var(--mado-operation-accent-soft);
    color: #0f766e;
}

.mado-operation-scope__current.is-scenario-only {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.mado-operation-scope__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mado-operation-scope__option {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    min-width: 0;
    padding: 16px;
    border: 1px solid #cfdbe7;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.mado-operation-scope__option:hover {
    border-color: #9fb6ca;
}

.mado-operation-scope__option.is-selected {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent-soft);
    box-shadow: 0 0 0 1px rgba(29, 191, 160, 0.16);
}

.mado-operation-scope__option input {
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--mado-operation-accent);
}

.mado-operation-scope__option-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.mado-operation-scope__option-copy strong {
    color: var(--mado-operation-text);
    font-size: 14px;
    line-height: 1.55;
}

.mado-operation-scope__option-title-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
}

.mado-operation-scope__scenario-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border: 1px solid #9edfd5;
    border-radius: 7px;
    background: #f0fdf9;
    color: #087866;
    text-decoration: none;
}

.mado-operation-scope__scenario-link:hover,
.mado-operation-scope__scenario-link:focus-visible {
    border-color: var(--mado-operation-accent);
    background: var(--mado-operation-accent-soft);
    color: #05695b;
    outline: none;
}

.mado-operation-scope__scenario-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 20;
    width: max-content;
    max-width: 220px;
    padding: 7px 9px;
    border-radius: 7px;
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.mado-operation-scope__scenario-link:hover::after,
.mado-operation-scope__scenario-link:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mado-operation-scope__option-copy span {
    color: var(--mado-operation-muted);
    font-size: 12px;
    line-height: 1.7;
}

.mado-operation-scope__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

@media (max-width: 782px) {
    .mado-operation-scope {
        padding: 16px;
    }

    .mado-operation-scope__form {
        grid-template-columns: 1fr;
    }

    .mado-operation-scope__actions {
        justify-content: stretch;
    }

    .mado-operation-scope__actions .mado-operation-settings__button {
        width: 100%;
    }
}

/*
 * MODE CONFIG GROUPS / 運用モード設定の項目整理（2026-08-07）
 * - 長い設定フォームを責任単位で読み分けられるように、各設定群を薄い枠でまとめる。
 * - 保存契約や表示条件はPHP/Strategyが正本。このCSSは視覚的な整理だけを担当する。
 */
.mado-operation-mode-config-group {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid #dbe7ee;
    border-radius: 12px;
    background: #fbfdff;
}

fieldset.mado-operation-mode-config-group {
    padding: 14px;
    border: 1px solid #dbe7ee;
}

.mado-operation-mode-config-group--resolution {
    gap: 16px;
}

.mado-operation-mode-config-group--resolution-separated {
    margin-top: 18px;
}

.mado-operation-mode-resolution-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mado-operation-mode-resolution-details {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.mado-operation-mode-resolution-control:not(:has(.mado-operation-resolution-switch .mado-ui-switch-input:checked)) .mado-operation-mode-resolution-details {
    display: none;
}

fieldset.mado-operation-mode-resolution-fallback {
    padding-top: 16px;
    border-top: 1px solid var(--mado-operation-line-soft);
}

/* AI presentation is one visual group; keep a clear boundary before the next setting. */
.mado-operation-mode-config-group--ai-presentation {
    margin-top: 18px;
    margin-bottom: 18px;
}

.mado-operation-mode-config-group__title,
fieldset.mado-operation-mode-config-group > .mado-operation-mode-field__label {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.mado-operation-settings-radio-grid--actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .mado-operation-settings-radio-grid--actions {
        grid-template-columns: 1fr;
    }
}

.mado-operation-settings-radio:has(input:checked) {
    border-color: #7dd8c7;
    background: #f0fdf9;
    color: #0f513f;
}


/* 2026-08-08: AI文言整理 + 緑ヘルプチップ調整 */
.mado-operation-mode-panel .mado-operation-help-label-row {
    align-items: center;
}

body .mado-portal-container .mado-operation-help-chip::before,
body .mado-portal-container .mado-operation-help-chip::after {
    box-shadow: none;
}

body .mado-portal-container .mado-operation-help-chip .mado-site-qa__help-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #72c79c;
    background: #e8fbf1;
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 14px rgba(21, 128, 61, 0.12);
    pointer-events: none;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body .mado-portal-container .mado-operation-help-chip:hover .mado-site-qa__help-chip-mark,
body .mado-portal-container .mado-operation-help-chip:focus-visible .mado-site-qa__help-chip-mark,
body .mado-portal-container .mado-operation-help-chip.is-open .mado-site-qa__help-chip-mark {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(21, 128, 61, 0.22);
    transform: translateY(-1px);
}

body .mado-portal-container .mado-operation-help-chip:focus-visible {
    outline: none;
}

body .mado-portal-container .mado-operation-help-chip:focus-visible .mado-site-qa__help-chip-mark {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.mado-operation-mode-config-group--ai-presentation {
    gap: 18px;
}

.mado-operation-mode-activation__label {
    font-size: 14px;
}

.mado-operation-mode-activation__text {
    font-size: 13px;
}


/* ===== 2026-08-21: operation settings 2-column layout + guidance =====
 * Visual order: staff-pause / contact, then business-hours / public-chat scope.
 * Staff-pause is intentionally first because it is an operationally frequent control
 * and may later be surfaced on HOME. Each pair stretches to the same grid-row height.
 * Guidance is open by default but user-collapsible; nested safety detail remains separate.
 */
.mado-operation-settings {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mado-operation-settings__top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.mado-operation-settings__top-grid > *,
.mado-operation-mode > * {
    min-width: 0;
}

.mado-operation-business-hours,
.mado-operation-staff-availability,
.mado-operation-scope,
.mado-operation-mode-selector,
.mado-operation-guidance {
    padding: 18px;
    border: 1px solid var(--mado-operation-section-line);
    border-radius: 16px;
    background: #f7fafc;
    box-shadow: none;
}

/* 2-column visual order requested for the operation overview.
 * Row 1: staff pause | common contact
 * Row 2: business hours | public chat features
 */
.mado-operation-staff-availability {
    order: 1;
}

#mado-operation-contact-page {
    order: 2;
}

.mado-operation-business-hours {
    order: 3;
}

.mado-operation-mode > .mado-operation-scope {
    order: 4;
}

.mado-operation-guidance {
    order: 5;
}

.mado-operation-mode-selector {
    order: 6;
}

/* Cards sharing a row stretch to the same height. */
#mado-operation-contact-page,
.mado-operation-mode > .mado-operation-scope,
.mado-operation-business-hours,
.mado-operation-staff-availability {
    height: 100%;
}

.mado-operation-business-hours__save,
.mado-operation-staff-availability__save,
.mado-operation-scope__actions .mado-operation-settings__button.button {
    min-height: 40px;
    padding: 9px 16px;
    font-size: 12px;
}

.mado-operation-mode {
    display: contents;
}

.mado-operation-mode-selector,
.mado-operation-guidance {
    grid-column: 1 / -1;
}

/*
 * MODE EDITOR ORDER CONTRACT / 2026-08-21
 * .mado-operation-mode is display:contents so its direct children participate
 * in the overview grid. The five mode panels are NOT direct children: they are
 * owned by one .mado-operation-mode-editor wrapper. Keep that editor after the
 * mode selector, then keep the supplemental mode note below it at full width.
 * Without an explicit order, the note becomes order:0 and consumes the first
 * column before the contact/public-chat pair. Do not assign visual order to
 * individual active panels.
 */
.mado-operation-mode > .mado-operation-mode-editor {
    order: 7;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.mado-operation-mode > .mado-operation-mode__note {
    order: 8;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.mado-operation-scope__form {
    grid-template-columns: 1fr;
}

.mado-operation-scope__option {
    padding: 14px;
}

.mado-operation-scope__option-copy strong {
    font-size: 13px;
}

.mado-operation-scope__option-copy span {
    font-size: 11.5px;
}

.mado-operation-guidance {
    display: block;
}

.mado-operation-guidance__outer-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    color: var(--mado-operation-text);
    font-size: var(--mado-portal-heading-section-size, 18px);
    font-weight: 800;
    line-height: 1.5;
}

.mado-operation-guidance__outer-summary::-webkit-details-marker {
    display: none;
}

.mado-operation-guidance__warning {
    flex: 0 0 auto;
    color: var(--mado-operation-text);
}

.mado-operation-guidance__outer-title {
    min-width: 0;
}

.mado-operation-guidance__outer-icon {
    flex: 0 0 auto;
    margin-left: auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease;
}

.mado-operation-guidance[open] > .mado-operation-guidance__outer-summary .mado-operation-guidance__outer-icon {
    transform: rotate(180deg);
}

.mado-operation-guidance__content {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.mado-operation-guidance__body,
.mado-operation-guidance__details-body {
    display: grid;
    gap: 10px;
}

.mado-operation-guidance__body p,
.mado-operation-guidance__details-body p {
    margin: 0;
    color: #5a687d;
    font-size: 15px;
    line-height: 1.8;
}

.mado-operation-guidance__body strong,
.mado-operation-guidance__details-body strong {
    color: var(--mado-operation-text);
}

.mado-operation-guidance__safety-title {
    margin: 0 0 2px;
    color: var(--mado-operation-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}

.mado-operation-guidance__details {
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #fff7ed;
    overflow: hidden;
}

.mado-operation-guidance__summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    color: var(--mado-operation-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
}

.mado-operation-guidance__summary::-webkit-details-marker {
    display: none;
}

.mado-operation-guidance__details[open] .mado-operation-guidance__summary {
    border-bottom: 1px solid #fed7aa;
    background: #ffedd5;
}

.mado-operation-guidance__details-body {
    padding: 16px;
    background: #fffaf5;
}

.mado-operation-guidance__steps {
    display: grid;
    gap: 14px;
    margin: 2px 0 0;
    padding-left: 24px;
}

.mado-operation-guidance__step {
    display: grid;
    gap: 4px;
    padding-left: 4px;
    color: var(--mado-operation-text);
}

.mado-operation-guidance__step h3 {
    margin: 0;
    color: var(--mado-operation-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
}

@media (max-width: 920px) {
    .mado-operation-settings__top-grid {
        grid-template-columns: 1fr;
    }

    #mado-operation-contact-page,
    .mado-operation-mode > .mado-operation-scope,
    .mado-operation-business-hours,
    .mado-operation-staff-availability,
    .mado-operation-mode-selector,
    .mado-operation-guidance,
    .mado-operation-mode > .mado-operation-mode-editor {
        grid-column: auto;
        height: auto;
    }
}