/* ════════════════════════════════════════════════════════════════════════
   editor-advanced.css — BỘ UI NÂNG CAO (Top Bar · Floating Toolbar · Bottom Sheet)
   ------------------------------------------------------------------------
   AN TOÀN: MỌI class đều có tiền tố `adv-` → KHÔNG đá vào ~2900 dòng CSS cũ
   trong home.blade.php, không đá Bootstrap 3.
   Phong cách: bám theo Canva — thẻ trắng, bo tròn, bóng nhẹ, icon nét mảnh.
   Token màu lấy từ dự án: brand #0056b3 · mực #0F172A · viền #E7E9EF.
   Mobile-first, có chừa safe-area cho iPhone.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════ THANG BO GÓC CHUẨN CỦA TOÀN BỘ EDITOR ════════════
   MỘT ĐỊNH NGHĨA DUY NHẤT — mọi file khác dùng var(), không gõ số.
   Vì sao có: đo thực tế các tab cột trái ra 11 giá trị bo góc khác nhau
   (6 · 7 · 8 · 9 · 10 · 12 · 14 · 16 · 50 · 99 · 999px). Tệ nhất là một nút
   có tới BA khai báo đá nhau tích tụ qua các giai đoạn:
       .ed-big-btn                14px          (bản gốc)
       .tool-tile,.ed-big-btn,…   16px !important  (GĐ "làm sạch cột phải")
       .tool-tile,.ed-big-btn,…   12px !important  (GĐ sau nữa, thắng)
   nên CÙNG một nút "kéo thả ảnh" mà tab Tải lên bo 16px (bị luật id
   #btnUploadImage.ed-dropzone ghi đè) còn tab Chữ / AI bo 12px.
   CÁCH SỬA an toàn: KHÔNG xoá luật cũ (dễ vỡ ~2900 dòng CSS kế thừa) mà trỏ
   TẤT CẢ các khai báo đá nhau về CÙNG một token → luật nào thắng cũng ra
   một số như nhau, xung đột trở thành vô hại.

   BẬC THANG — chọn theo KÍCH CỠ vật thể, không theo cảm tính:
       --r-xs   6px    mảnh nhỏ: ô màu con, ảnh thu nhỏ, hộp icon
       --r-sm   8px    điều khiển: nút, ô nhập, select, ô số, chip số
       --r-md  12px    thẻ & bảng nổi: ô hình khối, tile, thẻ mẫu, popover
       --r-lg  16px    mặt lớn: bảng trượt, khối đơn, vùng kéo thả, thẻ panel
       --r-pill 999px  viên thuốc & rãnh thanh kéo
       (hình tròn vẫn viết 50% — đó là hình dạng, không phải một bậc thang)

   Đặt trên :root nên với tới được cả CSS nội tuyến trong home.blade.php —
   những chỗ đó nằm NGOÀI .dc-ui / .adv-ui nên không thấy var(--dc-*).
   Luôn kèm giá trị dự phòng var(--r-sm, 8px): var() rỗng thì HUỶ CẢ DÒNG
   khai báo chứ không rơi về mặc định (bài học đã dính ở khối token màu dưới). */
:root {
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;
}

/* ── TOKEN MÀU — phải khai báo trên CẢ .adv-sheet, không chỉ .adv-ui ──
   Bảng "Hiệu ứng" (#advSheetEffects) chỉ mang class `adv-sheet`. Ban đầu nó
   nằm trong khối .adv-ui nên vẫn thừa hưởng biến; nhưng desktop-canva.js
   CHUYỂN nó sang cột trái (#dcEffectsHost) — chỗ đó chỉ có `dc-ui`. Ra khỏi
   .adv-ui là mọi var(--adv-*) thành RỖNG, mà `var()` rỗng thì cả dòng khai
   báo bị huỷ, KHÔNG phải rơi về giá trị mặc định của mình. Hậu quả đo được:
     · .adv-color  border: 1px solid var(--adv-line)   → computed 0px  (ô màu
       trắng, không viền, trên nền trắng → khách không thấy ô chọn màu viền)
     · .adv-switch input:checked + i  background: var(--adv-brand)
       → computed rgba(0,0,0,0) TRONG SUỐT → gạt công tắc "Bật viền" mà nó
         không đổi màu, nhìn y như chưa bấm được.
   Nay tách phần token ra selector riêng để đi đâu cũng đủ biến; còn
   font-family vẫn giữ nguyên trên .adv-ui để bảng nằm trong cột trái ăn
   theo phông của cột đó, không lệch với các nút xung quanh. */
.adv-ui,
.adv-sheet,
.adv-float,
.adv-topbar {
    --adv-brand: var(--brand, #0056b3);
    --adv-brand-soft: #EFF4FB;
    --adv-ink: #0F172A;
    --adv-ink-soft: #475569;
    --adv-muted: #94A3B8;
    --adv-line: #E7E9EF;
    --adv-panel: #FFFFFF;
    --adv-danger: #E11D48;
    --adv-radius: var(--r-md, 12px);
    --adv-shadow: 0 4px 16px rgba(15, 23, 42, .10);
    --adv-shadow-lg: 0 -6px 24px rgba(15, 23, 42, .12);
}
.adv-ui {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── NÚT DẠNG CHỮ (link) DÙNG CHUNG cho các tab cột trái ──
   Đặt ở file này vì đây là stylesheet editor DUY NHẤT không bọc @media, nên
   mobile và desktop dùng chung một định nghĩa.
   Thay cho `btn btn-link` của Bootstrap: class đó mang sẵn padding, bo góc 6px
   (lạc khỏi thang bo góc), viền focus và gạch chân riêng — phải gỡ ngược bằng
   `p-0 text-decoration-none` cộng 3 thuộc tính inline mới nhìn được, mà vẫn còn
   dính bo góc. Viết thẳng một class nhẹ thì không phải gỡ gì cả.
   Vùng bấm: chữ chỉ cao ~14px nên chừa padding dọc 6px cho dễ chạm trên mobile
   (không dùng height cố định để không đội hàng nhãn lên). */
.ed-linkbtn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 0; margin: 0;
    border: none; background: transparent;
    color: var(--brand, #0056b3);
    font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1;
    text-decoration: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: color .15s ease;
}
.ed-linkbtn:hover { color: #003a7a; text-decoration: underline; text-underline-offset: 3px; }
.ed-linkbtn:active { opacity: .7; }
.ed-linkbtn:focus-visible { outline: 2px solid var(--brand, #0056b3); outline-offset: 3px; border-radius: var(--r-xs, 6px); }
.ed-linkbtn i { font-size: 14px; line-height: 1; }

/* Nút cơ bản dùng chung — icon vuông, bo tròn, hover nền nhạt */
.adv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; margin: 0;
    border: none; border-radius: var(--r-sm, 8px); background: transparent;
    color: var(--adv-ink-soft); cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background-color .16s ease, color .16s ease, transform .12s ease;
}
.adv-btn:hover:not(:disabled) { background: var(--adv-brand-soft); color: var(--adv-brand); }
.adv-btn:active:not(:disabled) { transform: scale(.94); }
.adv-btn:disabled { color: #CBD5E1; cursor: default; }
.adv-btn svg { width: 20px; height: 20px; display: block; }
.adv-btn.is-danger:hover { background: #FEF2F2; color: var(--adv-danger); }

/* ═══════════════ 1) TOP BAR — Undo/Redo · Zoom ═══════════════ */
.adv-topbar {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 30;
    display: flex; align-items: center; gap: 4px;
    padding: 5px 6px;
    background: var(--adv-panel);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius);
    box-shadow: var(--adv-shadow);
    max-width: calc(100vw - 24px);
}
.adv-topbar .adv-sep {
    width: 1px; height: 22px; margin: 0 4px;
    background: var(--adv-line); flex: none;
}
/* Cụm zoom: − 100% + */
.adv-zoom { display: flex; align-items: center; gap: 2px; }
.adv-zoom-val {
    min-width: 52px; text-align: center;
    font-size: 13px; font-weight: 700; color: var(--adv-ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    cursor: pointer; user-select: none;
    padding: 4px 2px; border-radius: var(--r-sm, 8px);
}
.adv-zoom-val:hover { background: var(--adv-brand-soft); color: var(--adv-brand); }

/* ═══════════════ 2) FLOATING OBJECT TOOLBAR ═══════════════ */
.adv-float {
    position: fixed; z-index: 1100;
    display: none;                    /* JS bật khi có object được chọn */
    align-items: center; gap: 2px;
    padding: 4px;
    background: var(--adv-panel);
    border: 1px solid var(--adv-line);
    border-radius: var(--r-md, 12px);
    box-shadow: var(--adv-shadow);
    transform: translate(-50%, -100%);   /* neo theo tâm-dưới của thanh */
    opacity: 0;
    transition: opacity .14s ease;
    pointer-events: auto;
}
.adv-float.is-on { display: flex; opacity: 1; }
/* FloatBar (Nhân bản/Xóa, z-index 1100) không được nổi ĐÈ LÊN bottom-sheet Công cụ/
   Lớp trên mobile (sheet z-index 1050). Khi sheet mở, #mobileOverlay có class .show →
   ẩn hẳn FloatBar (nó thuộc canvas nằm DƯỚI sheet, chọn vật thể xong đóng sheet mới thao
   tác). Adv-sheet Hiệu ứng/Căn/Lớp đã có advBackdrop (z1150) che nên không cần rule này. */
body:has(#mobileOverlay.show) .adv-float { display: none !important; }
.adv-float .adv-btn { width: 34px; height: 34px; }
.adv-float .adv-btn svg { width: 18px; height: 18px; }
/* mũi nhọn chỉ xuống vật thể */
.adv-float::after {
    content: ''; position: absolute; left: 50%; bottom: -5px;
    width: 9px; height: 9px; margin-left: -4.5px;
    background: var(--adv-panel);
    border-right: 1px solid var(--adv-line);
    border-bottom: 1px solid var(--adv-line);
    transform: rotate(45deg);
}

/* ═══════════════ 3) BOTTOM SHEET (Sub-panel trượt lên) ═══════════════ */
.adv-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: var(--adv-panel);
    border-top: 1px solid var(--adv-line);
    border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
    box-shadow: var(--adv-shadow-lg);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: env(safe-area-inset-bottom);
    max-height: 62vh; display: flex; flex-direction: column;
}
.adv-sheet.is-open { transform: translateY(0); }

.adv-sheet-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--adv-line);
}
.adv-sheet-title {
    font-size: 14px; font-weight: 700; color: var(--adv-ink);
    letter-spacing: -.01em; margin: 0;
}
.adv-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }

/* Lưới nút trong sheet (Sắp xếp / Căn chỉnh) */
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adv-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.adv-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-height: 74px; padding: 10px 6px;
    background: #fff; border: 1px solid var(--adv-line); border-radius: var(--r-md, 12px);
    color: var(--adv-ink); font-size: 11.5px; font-weight: 500; line-height: 1.25;
    text-align: center; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.adv-tile svg { width: 22px; height: 22px; color: var(--adv-muted); transition: color .16s ease; }
.adv-tile:hover { background: var(--adv-brand-soft); border-color: var(--adv-brand); color: var(--adv-brand); }
.adv-tile:hover svg { color: var(--adv-brand); }
.adv-tile:active { transform: scale(.96); }
.adv-tile:disabled { opacity: .42; cursor: not-allowed; }
.adv-tile:disabled:hover { background: #fff; border-color: var(--adv-line); color: var(--adv-ink); }
.adv-tile:disabled:hover svg { color: var(--adv-muted); }

/* Nhãn nhóm trong sheet */
.adv-group + .adv-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--adv-line); }
.adv-label {
    display: block; margin: 0 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    color: var(--adv-muted); text-transform: uppercase;
}

/* ═══════════════ 4) HÀNG ĐIỀU KHIỂN: slider · màu · công tắc ═══════════════ */
.adv-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.adv-row:last-child { margin-bottom: 0; }
/* Cùng bài học với .dc-pop-name: khoá cứng bề rộng là nhãn dài bị bẻ 2 dòng,
   hàng đó cao gấp đôi hàng bên cạnh → bảng so le. Để nowrap + tự nới. */
.adv-row-name {
    flex: 0 0 auto; min-width: 76px; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--adv-ink-soft);
}
/* Ô SỐ ĐI KÈM THANH KÉO — CŨNG CHỈ MỘT KIỂU (docs/UI-STANDARD.md §8).
   Trước đây bảng Hiệu ứng để số TRẦN dính sát mép phải, còn bảng "Khoảng cách"
   và "Viền & góc" lại có ô viền bo góc. Hai kiểu này nằm ngay cạnh nhau trong
   cùng cột trái (Độ dày 6 · Lệch ngang 6 · rồi Độ cong [0]) nên nhìn rất so le.
   Chốt theo ô có viền: nó nói rõ "đây là một giá trị", và sau này muốn cho gõ
   số trực tiếp thì không phải đổi lại giao diện.
   `.dc-pop-val` khai riêng trong editor-desktop-canva.css với ĐÚNG các số này. */
.adv-row-val {
    flex: 0 0 44px; height: 28px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: 0; line-height: 1;
    border: 1px solid var(--adv-line); border-radius: var(--r-sm, 8px);
    font-size: 12.5px; font-weight: 700; color: var(--adv-ink);
    font-variant-numeric: tabular-nums;
}

/* ═══════════ THANH KÉO CHUẨN CỦA TOÀN BỘ EDITOR ═══════════
   MỘT ĐỊNH NGHĨA DUY NHẤT — KHÔNG chép lại ở file khác.
   Chủ dự án chốt lấy thanh kéo trong bảng "Khoảng cách" (thanh công cụ Chữ)
   làm chuẩn mực. Trước đó có HAI bản gần giống nhau mà lệch từng pixel:
       .adv-range   vỏ 22px · nút 16px · margin-top −6px
       .dc-range    vỏ 20px · nút 15px · margin-top −5.5px
   Hai bản này đứng CẠNH NHAU ngay trong bảng Hiệu ứng (5 thanh 22px kèm 1
   thanh 20px) nên nhìn ra ngay là so le.
   QUY CÁCH CHỐT — chép ở docs/UI-STANDARD.md §8:
       · vỏ cao 20px, nền trong suốt, không viền
       · rãnh cao 4px, bo tròn hết, màu #E8EEF6
       · nút tròn 15px, nền trắng, viền 2px màu thương hiệu, bóng nhẹ
   Đặt trong file này (KHÔNG bọc @media) để mobile và desktop dùng chung.
   var(--brand, …) có giá trị dự phòng: thiếu biến thì rơi về #0056b3, chứ
   không bị huỷ cả dòng khai báo như trường hợp var() rỗng. */
.adv-range,
.dc-range {
    flex: 1 1 auto; min-width: 0; height: 20px; margin: 0; padding: 0;
    background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.adv-range::-webkit-slider-runnable-track,
.dc-range::-webkit-slider-runnable-track {
    height: 4px; border-radius: var(--r-pill, 999px); background: #E8EEF6;
}
.adv-range::-webkit-slider-thumb,
.dc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; margin-top: -5.5px;
    border-radius: 50%; background: #fff;
    border: 2px solid var(--brand, #0056b3);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.adv-range::-moz-range-track,
.dc-range::-moz-range-track { height: 4px; border-radius: var(--r-pill, 999px); background: #E8EEF6; }
.adv-range::-moz-range-thumb,
.dc-range::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid var(--brand, #0056b3);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.adv-range:disabled,
.dc-range:disabled { opacity: .42; cursor: not-allowed; }

/* Ô chọn màu — VÒNG VIỀN PHẢI VẼ BẰNG box-shadow, không dùng border.
   Màu mặc định của "Màu viền" là #ffffff: ô trắng trên nền thẻ trắng, chỉ có
   1px #E7E9EF thì gần như tàng hình — khách tưởng chưa có chỗ chọn màu viền.
   inset ring đậm hơn (.16 đen) luôn thấy được kể cả khi chọn màu trắng, mà
   vẫn không lấn át khi chọn màu tối. */
.adv-color {
    flex: none; width: 34px; height: 34px; padding: 0;
    border: none; border-radius: var(--r-sm, 8px);
    background: #fff; cursor: pointer; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16), 0 1px 2px rgba(15, 23, 42, .06);
    -webkit-appearance: none; appearance: none;
    transition: box-shadow .15s ease;
}
.adv-color:hover { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .28), 0 2px 6px rgba(15, 23, 42, .12); }
.adv-color::-webkit-color-swatch-wrapper { padding: 3px; }
.adv-color::-webkit-color-swatch { border: none; border-radius: var(--r-xs, 6px); }
.adv-color::-moz-color-swatch { border: none; border-radius: var(--r-xs, 6px); }

/* Công tắc bật/tắt hiệu ứng */
.adv-switch { position: relative; flex: none; width: 42px; height: 24px; cursor: pointer; }
.adv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.adv-switch i {
    position: absolute; inset: 0; border-radius: var(--r-pill, 999px);
    background: #CBD5E1; transition: background-color .18s ease;
}
.adv-switch i::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}
.adv-switch input:checked + i { background: var(--adv-brand); }
.adv-switch input:checked + i::after { transform: translateX(18px); }

/* ── NHÓM KHÔNG DÙNG ĐƯỢC VỚI VẬT THỂ ĐANG CHỌN ──
   Trước đây bảng luôn sáng đèn 100%: chọn hình khối rồi kéo "Độ sáng" thì
   JS lặng lẽ bỏ qua (Effects.target() chỉ nhận ảnh/chữ) — khách kết luận
   "nút không bấm được". Nay nhóm nào không áp được thì mờ đi + chặn chuột +
   ghi rõ lý do ngay dưới nhãn nhóm. */
.adv-group.is-locked .adv-row { opacity: .42; pointer-events: none; }
.adv-why {
    display: none; margin: -4px 0 10px;
    font-size: 11.5px; line-height: 1.45; color: var(--adv-muted);
}
.adv-group.is-locked .adv-why { display: block; }

/* Dòng nhắc trạng thái ở đầu bảng (chưa chọn gì / đang chỉnh cái gì) */
.adv-status {
    margin: 0 0 14px; font-size: 12px; line-height: 1.45;
    color: var(--adv-ink-soft);
}
.adv-status b { color: var(--adv-ink); font-weight: 700; }

/* Vùng phủ mờ sau sheet */
.adv-backdrop {
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(15, 23, 42, .32);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
}
.adv-backdrop.is-on { opacity: 1; visibility: visible; }

/* Trạng thái đang xử lý (áp hiệu ứng ảnh) */
.adv-sheet.is-busy .adv-sheet-body { opacity: .55; pointer-events: none; }

/* ═══════════════ MOBILE (≤991.98px): gỡ đè lên "Mặt trước/Mặt sau" ═══════════════
   Trên mobile khu vực TRÊN đã kín: hàng 1 = Undo/Redo + Mặt trước/Mặt sau (top 12),
   hàng 2 = Chỉnh sửa/Xem trước (top 58), rồi cảnh báo tràn khung (top 106).
   → Đưa thanh xuống GÓC TRÁI–DƯỚI (vùng trống, ngón cái với tới dễ) và ẩn các nút
   TRÙNG LẶP: Undo/Redo đã có sẵn góc trái-trên, Zoom đã có sẵn ở thanh dưới.
   Còn lại đúng 3 nút riêng của bộ mới: Lớp · Căn chỉnh · Hiệu ứng.               */
@media (max-width: 991.98px) {
    .adv-topbar {
        top: auto; bottom: 132px;
        left: 10px; transform: none;
        padding: 4px; gap: 2px;
    }
    .adv-topbar #advUndo,
    .adv-topbar #advRedo,
    .adv-topbar .adv-zoom,
    .adv-topbar .adv-sep { display: none; }
}

/* ═══════════════ Desktop: sheet thành thẻ nổi giữa, gọn hơn ═══════════════ */
@media (min-width: 992px) {
    .adv-sheet {
        left: auto; right: 24px; bottom: 24px;
        width: 360px; max-height: 70vh;
        border-radius: var(--r-lg, 16px); border: 1px solid var(--adv-line);
        box-shadow: 0 12px 40px rgba(15, 23, 42, .16);
        transform: translateY(16px) scale(.98); opacity: 0; visibility: hidden;
        transition: transform .24s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, visibility .2s ease;
    }
    .adv-sheet.is-open { transform: none; opacity: 1; visibility: visible; }
    .adv-backdrop { display: none; }
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    .adv-sheet, .adv-float, .adv-backdrop, .adv-switch i::after { transition: none; }
}