/* ====== Dialog brand tokens (используются внутри kit-диалогов) ====== */
:root {
    --rlv-dialog-surface: #ffffff;
    --rlv-dialog-panel:   #faf8f6;
    --rlv-dialog-border:  #e9e2dd;
    --rlv-dialog-title:   #0B0F1A;
    --rlv-dialog-text:    #0B0F1A;
    --rlv-dialog-accent:  #3F4A8D;
}

:root[data-theme="dark"] {
    --rlv-dialog-surface: #18202d;
    --rlv-dialog-panel:   #202a38;
    --rlv-dialog-border:  #334155;
    --rlv-dialog-title:   #f5f7fb;
    --rlv-dialog-text:    #e5ebf5;
    --rlv-dialog-accent:  #b6c1ff;
}

/* ====== ОБЩИЙ СТИЛЬ ДИАЛОГОВ (Radzen Dialog) ====== */

/* фон под диалогом: лёгкое затемнение + blur */
.rz-dialog-wrapper {
    background-color: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .rz-dialog-wrapper {
    background-color: rgba(15, 23, 42, 0.65);
}

/* сам диалог — закругления, стекло, тень */
.rz-dialog {
    border-radius: 22px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

/* dark-theme панель диалога */
:root[data-theme="dark"] .rz-dialog {
    background: rgba(15, 23, 42, 0.98);
    border-color: rgba(148, 163, 184, 0.7);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95);
}

/* заголовок диалога */
.rz-dialog-titlebar {
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    padding: 12px 18px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--rlv-text-main, #111827);
}

:root[data-theme="dark"] .rz-dialog-titlebar {
    border-bottom-color: rgba(55, 65, 81, 0.9);
    color: rgba(248, 250, 252, 0.98);
}

/* тело диалога */
.rz-dialog-content {
    padding: 14px 18px 16px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--rlv-text-main, #111827);
}

:root[data-theme="dark"] .rz-dialog-content {
    color: rgba(229, 231, 235, 0.98);
}

/* нижняя зона с кнопками */
.rz-dialog-buttons {
    padding: 10px 18px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

:root[data-theme="dark"] .rz-dialog-buttons {
    border-top-color: rgba(55, 65, 81, 0.9);
}

/* ====== Form-dialog общие правила (Grade/VideoMeta-семейство) ====== */
.rlv-form-dialog__fieldset {
    margin: 10px;
}

.rlv-form-dialog__full {
    width: 100%;
}

/* ====== AvatarCropDialog: scoped через CssClass="avatar-crop" ====== */
/* Открывать диалог обязательно с DialogOptions { CssClass = "avatar-crop" },
   иначе ширина по умолчанию из общих стилей. */
.rz-dialog.avatar-crop {
    width: 70vw !important;
    position: relative;
    border-radius: 20px;
}

.rz-dialog.avatar-crop .rz-dialog-content,
.rz-dialog.avatar-crop .rz-dialog-side-content {
    flex: 0 1 auto;
    padding: 1.3rem;
    overflow: hidden;
    width: 97%;
}

/* Круглый кроп аватара. Cropper.js монтирует .cropper-view-box/.cropper-face
   динамически после рендера, поэтому используем не scoped, а глобальное правило
   под классом диалога. */
.rz-dialog.avatar-crop .cropper-view-box,
.rz-dialog.avatar-crop .cropper-face {
    border-radius: 50% !important;
}

@media (max-width: 768px) {
    .rz-dialog.avatar-crop {
        width: min(95vw, 480px) !important;
        max-width: 95vw !important;
        border-radius: 18px;
    }
}