/* ══════════════════════════════════════════════════════════════════════════
   editor-layers.css — Bảng "Quản lý Lớp" ở cột phải (chuẩn Figma/Canva)

   VÌ SAO KHÔNG VIẾT VÀO editor-advanced.css:
   file đó là của bộ bảng `.adv-*` (advanced-ui.js), không liên quan bảng Lớp.
   Giao diện lớp hiện đang nằm rải ở 8 chỗ: css/editor.css + 7 khối <style>
   trong home.blade.php, chỗ nào cũng !important. File này nạp SAU tất cả để
   thắng dứt điểm, khỏi phải mò sửa từng chỗ.

   VÀ QUAN TRỌNG HƠN: trước đây app.js in thẻ lớp KÈM style="" nội tuyến.
   Style nội tuyến đè MỌI CSS ngoài (trừ !important) → dù có viết CSS cũng
   không ăn. Đã bỏ hết inline trong app.js `_liveLayerHTML`, giao diện mới
   nằm trọn ở file này.

   HAI NGỮ CẢNH phải cùng đẹp:
     · phẳng   : #layersPanel > .layer-item        (1 áo, chưa bật nhiều đơn)
     · folder  : #layersPanel .lf-body .layer-item (mỗi áo 1 thư mục — mặc định)
   Lớp CSS cũ cố ý gỡ viền của item trong folder để tránh "2 viền bó nhau".
   Ở đây viền dùng #F3F4F6 (rất nhạt) nên đặt trong thẻ folder trắng vẫn êm,
   không tái diễn vụ 2 viền.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── BẢNG MÀU: chỉ 3 màu — xanh thương hiệu, xám đá, đỏ ──
   Bản đầu bê nguyên mã màu trong bản mô tả Figma: xanh #3B82F6 và cam #D97706.
   Đặt cạnh web thì lạc quẻ: cả trang dùng xanh navy #014089, tự nhiên bảng Lớp
   lòi ra xanh sáng + mấy chấm cam ở ổ khoá/con mắt. Nay quy về đúng 3 màu:
     · xanh   var(--brand) #014089  → đang chọn (viền, nền nhạt, tên lớp)
     · xám đá #64748B               → trạng thái phụ (đang ẩn / đang khoá)
     · đỏ     #DC2626               → chỉ dành cho XOÁ
   Nền nhạt #EFF4FB lấy đúng tông đang dùng cho nút bật ở thanh nổi. */
.editor-embed .lyr-panel {
    --lyr-line: #F3F4F6;
    --lyr-hover: #F9FAFB;
    --lyr-ink: #1F2937;
    --lyr-muted: #9CA3AF;
    --lyr-accent: var(--brand, #014089);
    --lyr-accent-bg: #EFF4FB;
    --lyr-state: #64748B;    /* cờ "đang ẩn" / "đang khoá" — trước là cam #D97706 */
    --lyr-danger: #DC2626;
}

/* ══════════════ 1) ĐẦU BẢNG ══════════════ */
.editor-embed #editorSidebarRight .property-title.lyr-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--lyr-ink) !important;
    flex-wrap: nowrap !important;
}
/* Cột phải chỉ 266px: chữ "Quản lý Lớp" + 3 nút vừa khít. Không chặn xuống dòng
   thì tiêu đề vỡ làm 2 dòng, đầu bảng cao gấp đôi nhìn rất lệch. */
.editor-embed .lyr-head .lyr-head-tx {
    flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-embed #editorSidebarRight .property-title.lyr-head > i { flex: 0 0 auto; }

.editor-embed .lyr-tools { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; }

.editor-embed .lyr-tool {
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: var(--r-xs, 6px);
    color: #6B7280; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.editor-embed .lyr-tool svg { width: 16px; height: 16px; display: block; }
.editor-embed .lyr-tool:hover:not(:disabled) { background: #F3F4F6; color: var(--lyr-ink); }
.editor-embed .lyr-tool.is-danger:hover:not(:disabled) { background: #FEF2F2; color: var(--lyr-danger); }
/* Nút mờ khi chưa chọn lớp — và phải chặn cả con trỏ, nếu không khách bấm hụt hoài */
.editor-embed .lyr-tool:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ══════════════ 2) DẢI NHẮC LỚP ĐANG ẨN ══════════════
   Lớp ẩn KHÔNG được in (export.js lọc o.visible) nên vẫn phải nói rõ.
   Bỏ tông vàng-hổ phách (#FFFBEB/#FDE68A/#92400E): nó là màu thứ tư lạc khỏi
   bảng màu của web. Dùng đúng tông xanh nhạt của thẻ "Mẹo nhanh" ngay dưới
   cùng cột (đo được #F0F7FF nền / #CCE5FF viền) → cùng một ngôn ngữ.
   Chữ #014089 trên #F0F7FF thừa tương phản cho cỡ 12px. */
.editor-embed .lyr-warn {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; padding: 8px 10px;
    background: #F0F7FF; border: 1px solid #CCE5FF; border-radius: var(--r-sm, 8px);
    font-size: 12px; line-height: 1.45; color: var(--brand, #014089);
}
.editor-embed .lyr-warn[hidden] { display: none; }
.editor-embed .lyr-warn i { font-size: 15px; flex: 0 0 auto; }

/* ══════════════ 3) KHUNG DANH SÁCH + THANH CUỘN SIÊU MỎNG ══════════════ */
.editor-embed #layersPanel {
    /* Cap 300px cũ để chừa chỗ Bản nháp/Mẹo nhanh phía dưới — nay rail cột phải đã
       tách chúng thành section riêng nên panel Lớp đứng MỘT MÌNH → cho dài gần hết
       cột (vẫn cap theo màn để nhiều đơn thì cuộn trong, không tràn viewport). */
    max-height: calc(100vh - 180px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: #E5E7EB transparent;
}
.editor-embed #layersPanel::-webkit-scrollbar { width: 4px !important; }
.editor-embed #layersPanel::-webkit-scrollbar-track { background: transparent !important; }
.editor-embed #layersPanel::-webkit-scrollbar-thumb {
    background: #E5E7EB !important; border-radius: var(--r-pill, 999px) !important;
}
.editor-embed #layersPanel::-webkit-scrollbar-thumb:hover { background: #D1D5DB !important; }

/* ══════════════ 4) THẺ LỚP ══════════════
   Ghi đè cả 2 ngữ cảnh (phẳng + trong folder) bằng cùng 1 bộ luật. */
.editor-embed #layersPanel .layer-item,
.editor-embed #layersPanel .lf-body .layer-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    background: #fff !important;
    border: 1px solid var(--lyr-line) !important;
    border-radius: var(--r-sm, 8px) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, opacity .2s ease !important;
    transform: none !important;   /* lớp CSS cũ có translateX(2px) khi hover → bỏ */
}
.editor-embed #layersPanel .layer-item:last-child,
.editor-embed #layersPanel .lf-body .layer-item:last-child { margin-bottom: 0 !important; }

.editor-embed #layersPanel .layer-item:hover,
.editor-embed #layersPanel .lf-body .layer-item:hover {
    background: var(--lyr-hover) !important;
    border-color: #E5E7EB !important;
}

/* Đang chọn */
.editor-embed #layersPanel .layer-item.active,
.editor-embed #layersPanel .lf-body .layer-item.active {
    background: var(--lyr-accent-bg) !important;
    border-color: var(--lyr-accent) !important;
    box-shadow: none !important;
}
.editor-embed #layersPanel .layer-item.active .layer-name { color: var(--brand, #014089) !important; font-weight: 600; }

/* Tay nắm kéo */
.editor-embed #layersPanel .layer-grip {
    flex: 0 0 auto; font-size: 15px; color: #D1D5DB; cursor: grab;
    transition: color .2s ease;
}
.editor-embed #layersPanel .layer-item:hover .layer-grip { color: var(--lyr-muted); }
.editor-embed #layersPanel .layer-grip:active { cursor: grabbing; }

/* Ảnh xem trước 32×32 */
.editor-embed #layersPanel .lyr-thumb {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-xs, 6px);
    display: inline-flex; align-items: center; justify-content: center;
    background: #F9FAFB; border: 1px solid #F3F4F6; overflow: hidden;
}
.editor-embed #layersPanel .lyr-thumb img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Ô chữ "Ag" — vẽ bằng đúng font của lớp để khách nhận ra font ngay */
.editor-embed #layersPanel .lyr-thumb-tx {
    font-size: 15px; font-weight: 600; color: #4B5563; line-height: 1;
}
.editor-embed #layersPanel .lyr-thumb-ic { color: #D1D5DB; font-size: 16px; }

/* Tên lớp + dòng phụ (font) */
.editor-embed #layersPanel .lyr-meta {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 1px; overflow: hidden;
}
.editor-embed #layersPanel .lyr-nameline {
    display: flex; align-items: center; gap: 5px; min-width: 0;
}
.editor-embed #layersPanel .layer-name {
    max-width: 110px;
    font-size: 12.5px !important; font-weight: 500 !important; color: #374151;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.editor-embed #layersPanel .lyr-sub {
    max-width: 110px;
    font-size: 11px; color: var(--lyr-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Cờ trạng thái cạnh tên (ẩn / khoá) */
.editor-embed #layersPanel .lyr-flag { flex: 0 0 auto; font-size: 13px; color: var(--lyr-state); }

/* ══════════════ 5) CỤM ICON THAO TÁC ══════════════
   ĐỂ TUYỆT ĐỐI (absolute), KHÔNG nằm trong dòng chảy flex. Lý do đo được:
   cột phải chỉ 266px → thân thư mục 188px → thẻ lớp 188px. Trừ padding 16,
   viền 2, tay nắm 15, ảnh 32, 3 khoảng cách 18 và cụm nút 74 thì TÊN LỚP
   chỉ còn ~24px — "Hình ảnh 1" bị cắt còn "H…", vô dụng.
   Cho cụm nút nổi đè lên mép phải và chỉ hiện khi rê chuột (đúng cách Figma
   làm) thì lúc đọc tên có trọn ~130px, lúc thao tác mới cần nút. */
.editor-embed #layersPanel .layer-item { position: relative; }

.editor-embed #layersPanel .lyr-acts {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 1px;
    padding-left: 14px; border-radius: var(--r-xs, 6px);
    opacity: 0;
    transition: opacity .2s ease;
    /* Dải trắng loang sang trái để nút không chồng chữ gây rối mắt */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 14px);
}
/* CỐ Ý KHÔNG dùng pointer-events:none lúc mờ.
   Đã thử và hỏng: khi chưa hover thì cụm nút "trong suốt với chuột", nên phép
   thử điểm chạm trả về .layer-name nằm dưới → cú bấm rơi vào tên lớp chứ không
   vào nút. Phần tử opacity:0 VẪN nhận được chuột, mà đưa chuột tới nút thì thẻ
   lớp cũng đã hover rồi nên nút hiện ra ngay — không có cảnh "bấm vào chỗ trống". */
.editor-embed #layersPanel .layer-item:hover .lyr-acts,
.editor-embed #layersPanel .layer-item:focus-within .lyr-acts { opacity: 1; }
/* Thẻ đang chọn có nền xanh nhạt → dải loang phải đổi theo, không thì lòi mảng trắng */
.editor-embed #layersPanel .layer-item.active .lyr-acts {
    background: linear-gradient(90deg, rgba(239, 244, 251, 0) 0%, var(--lyr-accent-bg) 14px);
}
.editor-embed #layersPanel .layer-item:hover:not(.active) .lyr-acts {
    background: linear-gradient(90deg, rgba(249, 250, 251, 0) 0%, var(--lyr-hover) 14px);
}

.editor-embed #layersPanel .lyr-act {
    width: 24px; height: 24px; padding: 0; line-height: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; border-radius: var(--r-xs, 6px);
    color: #6B7280; cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.editor-embed #layersPanel .lyr-act i { font-size: 15px; }
.editor-embed #layersPanel .lyr-act:hover { background: #F3F4F6; color: var(--lyr-ink); }
.editor-embed #layersPanel .lyr-act.layer-del:hover { background: #FEF2F2; color: var(--lyr-danger); }

/* Không có chuột (máy cảm ứng) thì không có hover → cho hiện sẵn, nếu không
   khách trên tablet vĩnh viễn không thấy nút ẩn/khoá/xoá. */
@media (hover: none) {
    .editor-embed #layersPanel .lyr-acts { opacity: 1; }
}

/* ══════════════ 6) TRẠNG THÁI ẨN & KHOÁ ══════════════ */

/* ĐANG ẨN — mờ đi + gạch ngang tên. Dấu hiệu nhận biết là cờ .lyr-flag cạnh
   tên (luôn hiện), KHÔNG ép hiện cả cụm nút — ép hiện sẽ che mất tên lớp. */
.editor-embed #layersPanel .layer-item.is-hidden { opacity: .5 !important; }
.editor-embed #layersPanel .layer-item.is-hidden .lyr-eye { color: var(--lyr-state); }
.editor-embed #layersPanel .layer-item.is-hidden .layer-name { text-decoration: line-through; }

/* ĐANG KHOÁ — mờ nhẹ, ổ khoá màu xám đá, tay nắm kéo đổi sang con trỏ cấm */
.editor-embed #layersPanel .layer-item.is-locked { opacity: .6 !important; }
.editor-embed #layersPanel .layer-item.is-locked .lyr-lock { color: var(--lyr-state); }
.editor-embed #layersPanel .layer-item.is-locked .layer-grip {
    cursor: not-allowed; color: #E5E7EB;
}
/* Đang chọn thì kéo mờ lại cho dễ đọc, kể cả khi đang khoá/ẩn */
.editor-embed #layersPanel .layer-item.active.is-locked,
.editor-embed #layersPanel .layer-item.active.is-hidden { opacity: .85 !important; }

/* ══════════════ 7) Tôn trọng người dùng tắt hiệu ứng chuyển động ══════════════ */
@media (prefers-reduced-motion: reduce) {
    .editor-embed .lyr-tool,
    .editor-embed #layersPanel .layer-item,
    .editor-embed #layersPanel .lyr-act,
    .editor-embed #layersPanel .lyr-acts,
    .editor-embed #layersPanel .layer-grip { transition: none !important; }
}