/* =========================================================
   CRUSHING REQUEST — FORM PREVIEW (CM-FOR-0005)
   Dán vào CUỐI file CSS.
   Cấu trúc:  .cr-document-panel
                ├─ .cr-document-toolbar  (trang | zoom | tải xuống)
                └─ .cr-document-canvas
                     └─ .cr-form-container > CrushingFormView
   ========================================================= */

/* ---------- Khung ngoài: bo góc, nền xám, giãn hết chiều cao còn lại ---------- */
.cr-approve-dialog-content > .cr-document-panel {
    --doc-bg: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-background));
    --doc-bar: color-mix(in srgb, var(--mud-palette-text-primary) 3%, var(--mud-palette-surface));
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--doc-bg);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

/* ---------- Thanh công cụ ---------- */
.cr-document-panel > .cr-document-toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    min-height: 50px;
    padding: 6px 14px;
    background: var(--doc-bar);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.cr-document-pager,
.cr-document-zoom,
.cr-document-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Vạch ngăn giữa các nhóm */
.cr-document-pager {
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid var(--mud-palette-divider);
}

/* Nhóm bên phải (tải xuống...) */
.cr-document-actions {
    margin-left: auto;
}

/* Nút icon: vuông 30px, xám, sáng lên khi hover */
.cr-document-toolbar .mud-icon-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    color: var(--mud-palette-text-secondary);
}

    .cr-document-toolbar .mud-icon-button:hover:not(:disabled) {
        color: var(--mud-palette-text-primary);
        background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    }

    .cr-document-toolbar .mud-icon-button .mud-icon-root {
        font-size: 1.15rem;
    }

/* Ô "100%" và ô số trang: dạng hộp có viền như ảnh mẫu */
.cr-document-zoom .mud-button-root,
.cr-document-page-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    height: 30px;
    padding: 0 10px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.cr-document-page-box {
    min-width: 34px;
    padding: 0 8px;
}

.cr-document-page-total {
    margin: 0 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

/* ---------- Vùng hiển thị tờ form ---------- */
.cr-document-panel > .cr-document-canvas {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* MudPaper (pa-1) bên trong: bỏ nền/viền/padding, để canvas xám lộ ra */
.cr-document-canvas > .cr-form-container {
    flex: 1 1 0;
    padding: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Khoảng thở quanh tờ giấy; thanh cuộn nằm sát mép khung */
.cr-document-canvas .cr-preview-viewport {
    padding: 18px 24px 24px;
}

/* Tờ giấy: trắng, viền mảnh, bo nhẹ, đổ bóng, nằm giữa */
.cr-document-canvas .cr-print-area {
    margin-inline: auto;
    background: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* In: bỏ viền/bóng, chỉ in nội dung form */
@media print {
    .cr-document-canvas .cr-print-area {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 640px) {
    .cr-document-panel > .cr-document-toolbar {
        padding: 6px 10px;
    }

/*    .cr-document-canvas .cr-preview-viewport {
        padding: 10px;
    }*/
}
/* ---------- Zoom ----------
   Razor gán --cr-preview-zoom (0.6 → 1.5) lên .cr-document-panel.
   `zoom` co giãn cả bố cục (khác transform) nên thanh cuộn vẫn đúng. */
.cr-document-canvas .cr-print-area {
    zoom: var(--cr-preview-zoom, 1);
}

@media print {
    .cr-document-canvas .cr-print-area {
        zoom: 1;
    }
}
/* =========================================================
   CRUSHING REQUEST — DOCUMENT PREVIEW ZOOM
   Chỉ zoom biểu mẫu, không zoom toolbar và nút điều khiển
   ========================================================= */

.cr-document-panel .cr-preview-viewport > * {
    zoom: var(--cr-preview-zoom, 1);
}