/* ══════════════════════════════════════════════════════════════════════════
   editor-polish.css — "TRANG ĐIỂM" giao diện Editor (tương phản + chiều sâu)

   VÌ SAO LÀ FILE RIÊNG, NẠP CUỐI:
   Rail/panel đang bị 6 lớp CSS chồng nhau trong khối <style> của home.blade.php
   (dòng ~940, 1156, 1199, 1683, 1923, 2015) và lớp nào cũng !important.
   Muốn thắng chắc mà KHÔNG phải mò sửa từng lớp → tách file, nạp SAU khối đó
   (cuối @push('styles')), dùng đúng specificity `.editor-embed .x` + !important.
   Cùng specificity + cùng !important thì file nào đứng SAU sẽ thắng.

   ⛔ TUYỆT ĐỐI KHÔNG ĐỤNG `.editor-workspace`:
   nền chấm lưới của chủ dự án là  background-color #f8fafc
                                 + radial-gradient(#cbd5e1 1px, transparent 1px)
                                 + background-size 20px 20px.
   File này KHÔNG có bất kỳ khai báo background* nào cho .editor-workspace.

   ĐÃ HOÀN TÁC PHẦN RAIL TỐI MÀU (chủ dự án thấy "đen thui, ghê quá").
   Rail trả về đúng giao diện trắng gốc — file này KHÔNG còn luật nào cho
   .ed-rail / .ed-rail-btn nữa, để 6 lớp CSS gốc trong home.blade.php tự lo.
   Kèm theo đó bỏ luôn cụm biến --ed-rail-* và màu nhấn sáng #1868D8: màu đó
   sinh ra CHỈ để đọc được trên nền tối, rail trắng rồi thì quay về --brand
   #014089 của web cho đồng bộ.
   ══════════════════════════════════════════════════════════════════════════ */

.editor-embed {
    --ed-line: #E5E7EB;
    --ed-hover: #F3F4F6;

    /* Thanh trượt + ô tick: 1 dòng là đổi hết range/checkbox/radio về màu web */
    accent-color: var(--brand, #014089);
}

/* ══════════════ 1) TIÊU ĐỀ THẺ CỘT PHẢI — hạ cỡ cho cân ══════════════
   "Quản lý Lớp" / "Bản nháp" / "Mẫu (Admin)" đang 16px/700 do luật GĐ69 sẵn có
   trong home.blade.php (.editor-embed #editorSidebarRight .property-title).
   16px là to so với ruột thẻ: tên lớp 12.5px, dòng phụ 11px, mẹo nhanh 12px.
   Hạ về 14px thì thứ bậc rõ mà không lấn: 14 (tiêu đề) › 12.5 (tên lớp) › 11 (phụ).
   Sửa CẢ BA cùng lúc, không sửa mỗi thẻ Lớp — lệch nhau nhìn còn tệ hơn. */
.editor-embed #editorSidebarRight .property-title {
    font-size: 14px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}
.editor-embed #editorSidebarRight .property-title i { font-size: 16px !important; }

/* ══════════════ 2) DRAWER PANEL — trắng, viền phân cách rõ ══════════════ */
.editor-embed .ed-panel {
    background: #fff !important;
    border-right: 1px solid var(--ed-line) !important;
}

/* Nút mũi tên thu gọn nằm ở mép phải panel */
.editor-embed .ed-panel-collapse {
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.editor-embed .ed-panel-collapse:hover { background: var(--ed-hover) !important; }

/* Footer cột trái nằm dưới cả rail lẫn panel → viền trên cho liền mạch */
.editor-embed .ed-left-corner > .left-corner-footer {
    border-top: 1px solid var(--ed-line) !important;
    border-right: 1px solid var(--ed-line) !important;
}

/* ══════════════ 3) CÁC THANH NỔI TRÊN VÙNG THIẾT KẾ ══════════════
   GHI CHÚ: dự án KHÔNG còn Top Toolbar (đã gỡ theo yêu cầu trước đó).
   Thứ đóng vai trò đó bây giờ là các cụm nút NỔI trên canvas:
     #edHistory (undo/redo) · #edModeToggle (Chỉnh sửa/Xem trước)
     · #viewToggle (Mặt trước/sau) · .dc-ctx (thanh theo đối tượng đang chọn)
   Cho chúng chung 1 ngôn ngữ: nền trắng đặc, viền tóc, bóng nhẹ → nổi hẳn
   khỏi nền chấm lưới thay vì chìm vào nó. */
@media (min-width: 1024px) {

    /* CHỈ 3 cụm này — chúng là viên thuốc thật (đo được border-radius 50px).
       CỐ Ý BỎ .zoom-controls-wrapper: nó KHÔNG phải viên thuốc mà chỉ là thùng
       chứa trần (bo 0px, 144x74) ôm 2 viên thuốc đã có nền sẵn là #zoom-bar và
       #btnZoomReset. Tô nền vào nó thì thành cái ô vuông trắng bao ngoài 2 viên
       thuốc bo tròn — rất xấu. Hai viên bên trong tự lo giao diện của chúng. */
    .editor-embed .editor-workspace > #edHistory,
    .editor-embed .editor-workspace > #edModeToggle,
    .editor-embed .editor-workspace > #viewToggle {
        background: #fff !important;
        border: 1px solid var(--ed-line) !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .07) !important;
    }

    /* Thanh theo ngữ cảnh: bóng sâu hơn 1 nấc vì nó nằm ĐÈ lên thiết kế */
    .editor-embed .editor-workspace > .dc-ctx {
        background: #fff !important;
        border: 1px solid var(--ed-line) !important;
        box-shadow: 0 6px 20px rgba(15, 23, 42, .12) !important;
    }

    /* ── Hover cho MỌI nút trong các thanh nổi + trong drawer ── */
    .editor-embed .ed-hist-btn,
    .editor-embed .ed-mode-btn,
    .editor-embed .view-toggle-btn,
    .editor-embed .dc-ctx button,
    .editor-embed .dc-shape,
    .editor-embed .img-act-btn {
        transition: background-color .2s ease, color .2s ease,
                    border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }

    /* :not(.is-on) — nếu không loại trừ thì rê chuột lên nút ĐANG BẬT (B, I, U, S…)
       sẽ đè nền xám lên nền "đang bật", khách tưởng nút vừa tắt.
       (Lỗi này vốn đã có sẵn: .dc-btn:hover:not(:disabled) là (0,3,0) còn
        .dc-btn.is-on chỉ (0,2,0) → hover thắng. Sửa luôn tại đây.) */
    .editor-embed .ed-hist-btn:not(:disabled):hover,
    .editor-embed .dc-ctx button:not(:disabled):not(.is-on):hover,
    .editor-embed .img-act-btn:hover {
        background: var(--ed-hover) !important;
    }

    /* Nút đang bật: giữ nền xanh nhạt + chữ xanh, hover chỉ đậm thêm một nấc */
    .editor-embed .dc-ctx .dc-btn.is-on {
        background: #EFF4FB !important;
        color: var(--brand, #014089) !important;
    }
    .editor-embed .dc-ctx .dc-btn.is-on:hover { background: #DEE9F7 !important; }

    /* Nút bị khoá (undo lúc chưa có gì để hoàn tác) không được sáng lên khi rê chuột */
    .editor-embed .ed-hist-btn:disabled { opacity: .4 !important; cursor: not-allowed !important; }
}

/* ══════════════ 4) THANH TRƯỢT ══════════════
   accent-color ở trên đã lo range/checkbox mặc định. Riêng .dc-range vẽ tay
   track + thumb bằng ::-webkit-* nên accent-color không với tới → chỉnh riêng. */
.editor-embed .dc-range::-webkit-slider-thumb { border-color: var(--brand, #014089) !important; }
.editor-embed .dc-range::-moz-range-thumb { border-color: var(--brand, #014089) !important; }

/* ══════════════ 4) Tôn trọng người dùng tắt hiệu ứng chuyển động ══════════════ */
@media (prefers-reduced-motion: reduce) {
    .editor-embed .ed-panel-collapse,
    .editor-embed .ed-hist-btn,
    .editor-embed .ed-mode-btn,
    .editor-embed .view-toggle-btn,
    .editor-embed .dc-ctx button,
    .editor-embed .dc-shape,
    .editor-embed .img-act-btn { transition: none !important; }
}