/*────────────────────── alert / confirm диалоги ──────────────────────
  Разметка (ts_uicontrol.ts → Modals.Alert / Modals.Confirm):

    div.modal.center.alert[.alert-error|.alert-info]
        .emoji
        .title
        .description      (если есть)
        .but-block[.two]
            .button[.green|.red]

  Файл подключается ПОСЛЕ страничных CSS (см. Views/WorkPlace/_Layout.cshtml),
  чтобы окна выглядели одинаково на всех страницах, включая расписание,
  которое грузит только room_schedule.css.
  --------------------------------------------------------------------- */

.overlay .modal.center.alert {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 420px;
    min-width: 0;
    max-width: 92vw;
    max-height: 88vh;
    padding: 26px 26px 20px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 16px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    /*background-color: var(--surface-card, #2b2c2f);*/
    color: var(--fore-color, #f0f0f0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    overflow: auto;
}

    /*--------------------------------------------------------------- эмодзи */

    .overlay .modal.center.alert .emoji {
        order: -1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin: 0;
        font-size: 32px;
        line-height: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
    }

    .overlay .modal.center.alert.alert-error .emoji {
        background: rgba(229, 72, 77, 0.16);
    }

    .overlay .modal.center.alert.alert-info .emoji {
        background: rgba(53, 199, 89, 0.16);
    }

    /*--------------------------------------------------------------- тексты */

    .overlay .modal.center.alert .title {
        max-width: 100%;
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.45;
        text-align: center;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .overlay .modal.center.alert .description {
        width: 100%;
        margin: 0;
        padding: 10px 12px;
        box-sizing: border-box;
        font-size: 12.5px;
        line-height: 1.5;
        text-align: left;
        white-space: pre-wrap;
        opacity: 0.85;
        color: var(--fore-color, #f0f0f0);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
    }

    /*--------------------------------------------------------------- кнопки */

    .overlay .modal.center.alert .but-block,
    .overlay .modal.center.alert .but-block.two {
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
        margin-top: 4px;
        text-align: center;
    }

    .overlay .modal.center.alert .but-block .button {
        flex: 0 1 auto;
        width: auto;
        min-width: 120px;
        margin: 0;
        padding: 9px 18px;
        font-family: inherit;
        font-size: 13px;
        line-height: 1.2;
        border-radius: 10px;
        /* фон не задаём: в светлой теме тёмная заливка давала «серое на сером».
           Рамка и цвет — из темы */
        border: 1px solid var(--border-color, rgba(128, 128, 128, 0.5));
        color: var(--fore-color, #f0f0f0);
        cursor: pointer;
    }

        .overlay .modal.center.alert .but-block .button:hover {
            /* нейтральная подсветка, читаемая в обеих темах */
            background-color: rgba(128, 128, 128, 0.16);
            box-shadow: none;
            transform: none;
        }

        .overlay .modal.center.alert .but-block .button.green {
            background-color: #1f7a4d;
            border-color: #1f7a4d;
            color: #ffffff;
        }

            .overlay .modal.center.alert .but-block .button.green:hover {
                background-color: #18633e;
            }

        .overlay .modal.center.alert .but-block .button.red {
            background-color: #a33331;
            border-color: #a33331;
            color: #ffffff;
        }

            .overlay .modal.center.alert .but-block .button.red:hover {
                background-color: #8b2a28;
            }

    /*--------------------------------------------------------------- варианты */

    .overlay .modal.center.alert.alert-error {
        border-color: rgba(229, 72, 77, 0.5);
    }

    .overlay .modal.center.alert.alert-info {
        border-color: rgba(53, 199, 89, 0.5);
    }