/* ════════════════════════════════════════════════════════════
   EDITOR.CSS — Desktop layout & design tokens
   Công cụ thiết kế áo (Printify-style)
   ════════════════════════════════════════════════════════════ */

:root {
    /* ── Color tokens ── */
    --c-bg-canvas:    #f3f4f6;   /* nền workspace xám nhạt */
    --c-bg-panel:     #ffffff;
    --c-border:       #e5e7eb;   /* viền 1px subtle */
    --c-text:         #111827;   /* chữ chính */
    --c-text-muted:   #6b7280;
    --c-primary:      var(--brand,#0056b3);   /* accent / button chính */
    --c-primary-dark: var(--brand-dark,#004494);
    --c-primary-soft: #e8f0fb;   /* nền hover nhạt */

    /* ── Spacing & radius ── */
    --radius-sm: var(--r-xs, 6px);   /* nối vào thang chung — xem editor-advanced.css */
    --radius-md: var(--r-sm, 8px);   /* 10px cũ → 8px cho khớp thang */
    --radius-lg: var(--r-lg, 16px);  /* 14px cũ → 16px cho khớp thang */
    --sidebar-w: 300px;

    /* ── Typography ── */
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ── Shadow ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
}

/* ── Reset & base ── */
* { box-sizing: border-box; }

html, body.editor-body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-bg-canvas);
    -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════
   SHELL — bố cục 2 cột (sidebar + workspace)
   ════════════════════════════════════════════════════════════ */
.editor-shell {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   LEFT SIDEBAR
   ════════════════════════════════════════════════════════════ */
.editor-sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    height: 100vh;
    background: var(--c-bg-panel);
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

/* Brand */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--c-border);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--c-text);
}
.sidebar-brand i {
    color: var(--c-primary);
    font-size: 18px;
}

/* Scrollable middle area */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Section */
.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    margin: 0;
}
.section-label i { font-size: 12px; }

/* Product select */
.product-select {
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    color: var(--c-text);
    background-color: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.product-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-soft);
    outline: none;
}

/* Tool buttons */
.tool-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tool-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text);
    cursor: pointer;
    transition: all .15s ease;
}
.tool-btn i {
    font-size: 16px;
    color: var(--c-primary);
    width: 20px;
    text-align: center;
}
.tool-btn:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.tool-btn:active { transform: translateY(0); }

/* Layers panel */
.layers-section { flex: 1; }
.layers-panel {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: #fafafa;
    min-height: 160px;
    padding: 8px;
}
.layers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 12px;
    color: var(--c-text-muted);
}
.layers-empty i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.4;
}
.layers-empty p {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 500;
}
.layers-empty small { font-size: 11px; opacity: 0.8; }

/* Sidebar footer */
.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--c-border);
    background: #fff;
}
.btn-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn-order:hover { background: var(--c-primary-dark); }
.btn-order:active { transform: scale(0.98); }

/* Nút Lưu Thiết Kế (export) — primary, đặt trên nút giỏ */
.btn-export {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px;
    margin-bottom: 8px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn-export:hover { background: var(--c-primary-dark); }
.btn-export:active { transform: scale(0.98); }

/* Nút giỏ thành phụ (outline) khi đứng cạnh nút export */
.sidebar-footer .btn-order {
    background: #fff;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}
.sidebar-footer .btn-order:hover {
    background: var(--c-primary-soft);
}

/* ════════════════════════════════════════════════════════════
   DPI BADGE — cảnh báo chất lượng in (nổi góc trên phải workspace)
   ════════════════════════════════════════════════════════════ */
.dpi-badge {
    position: absolute;
    top: 64px;
    right: 20px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    padding: 8px 14px 8px 9px;
    border-radius: var(--r-md, 12px);
    background: #fff;
    border: 1px solid #e2e8f0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
    animation: dpiIn .2s ease;
}
/* ô icon vuông bo góc */
.dpi-badge .dpi-ic {
    width: 30px; height: 30px; border-radius: var(--r-sm, 8px);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; flex-shrink: 0;
}
/* cụm chữ 2 dòng */
.dpi-badge .dpi-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dpi-badge .dpi-tx b { font-size: 12.5px; font-weight: 700; color: #1e293b; line-height: 1.25; }
.dpi-badge .dpi-tx small { font-size: 11px; font-weight: 500; color: #64748b; line-height: 1.2; }

/* Bảng màu Quy tắc vàng: brand (xanh) / slate / đỏ — KHÔNG shadow */
.dpi-good .dpi-ic { background: #e9f2fb; color: #0056b3; }   /* tốt → brand xanh */
.dpi-avg  .dpi-ic { background: #f1f5f9; color: #475569; }   /* khá → slate */
.dpi-poor .dpi-ic { background: #fef2f2; color: #dc2626; }   /* thấp → đỏ cảnh báo */
.dpi-poor { border-color: #fecaca; }

@keyframes dpiIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   LOADING OVERLAY + SPINNER (khi đang lưu)
   ════════════════════════════════════════════════════════════ */
.pod-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.35);   /* dịu hơn để hộp trắng nổi bật */
    backdrop-filter: blur(3px);
}
/* HỘP LOADING: thẻ trắng bo góc lớn + bóng sâu êm, tách hẳn khỏi nền */
.pod-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 24px 28px;
    min-width: 180px;
}
.pod-loading-box p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;   /* xám đậm sang trọng */
}
.pod-spinner {
    width: 2rem;
    height: 2rem;
    border: 0.2em solid rgba(0, 86, 179, 0.18);
    border-top-color: #0056b3;   /* màu xanh brand */
    border-radius: 50%;
    animation: podSpin .8s linear infinite;
}
@keyframes podSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   TOAST thông báo — dạng PILL (viên thuốc) + bóng sâu
   ════════════════════════════════════════════════════════════ */
.pod-toast {
    position: fixed;
    /* GIỮA-ĐÁY khu vẽ. Thanh công cụ ngữ cảnh luôn ở ĐỈNH (tabs ~77–112px, .dc-ctx
       ~115–157px) nên top:130px cũ rơi TRÚNG thanh → toast đè lên nhìn loạn (ảnh khách
       gửi). Đưa xuống đáy (trên thanh zoom ~798px) vẫn căn giữa mà không đè điều khiển nào. */
    bottom: 130px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center; /* icon + chữ luôn nằm giữa, gọn 1 dòng */
    gap: 10px;
    width: max-content;      /* ôm 1 dòng theo nội dung (hết cảnh pill hẹp → chữ xuống 2 dòng lệch) */
    max-width: 90vw;         /* tin dài mới xuống dòng */
    padding: 12px 24px;
    border-radius: var(--r-pill, 999px);   /* viên thuốc */
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.pod-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.pod-toast i { font-size: 16px; }
.pod-toast-success { background: var(--brand, #0056b3); }
/* Chủ dự án chốt: bỏ đỏ chói ("phèn") → dùng xanh brand cho gọn, đồng bộ. Nội dung
   toast tự ghi "Lỗi..." nên vẫn rõ nghĩa mà không cần nền đỏ + icon. */
.pod-toast-error   { background: var(--brand, #0056b3); }
.pod-toast-info    { background: #1e293b; }   /* hướng dẫn/nhắc nhẹ */

/* ════════════════════════════════════════════════════════════
   CART: badge số lượng trên nút + Modal chọn size/qty
   ════════════════════════════════════════════════════════════ */
.btn-order { position: relative; }
.cart-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    background: var(--c-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--r-pill, 999px);
}

/* Modal */
.pod-cart-modal {
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    overflow: hidden;
}
.pod-cart-modal .modal-header {
    border-bottom: 1px solid var(--c-border);
    padding: 16px 20px;
}
.pod-cart-modal .modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pod-cart-modal .modal-title i { color: var(--c-primary); }
.pod-cart-modal .modal-body { padding: 20px; }
.pod-cart-modal .modal-footer {
    border-top: 1px solid var(--c-border);
    padding: 14px 20px;
}

.cart-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    margin-bottom: 10px;
}
.cart-modal-label:not(:first-child) { margin-top: 20px; }

/* Size pills */
.size-options { display: flex; gap: 10px; }
.size-pill {
    flex: 1;
    padding: 12px 0;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    cursor: pointer;
    transition: all .15s ease;
}
.size-pill:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.size-pill.active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

/* Quantity control */
.qty-control { display: flex; align-items: center; gap: 0; max-width: 160px; }
.qty-btn {
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    cursor: pointer;
    font-size: 13px;
    transition: all .15s ease;
}
.qty-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.qty-btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.qty-btn:hover { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
.qty-input {
    width: 60px;
    height: 44px;
    border: 1px solid var(--c-border);
    border-left: none;
    border-right: none;
    text-align: center;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--c-text);
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Confirm button */
.btn-cart-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn-cart-confirm:hover { background: var(--c-primary-dark); }
.btn-cart-confirm:active { transform: scale(0.98); }

/* ════════════════════════════════════════════════════════════
   CENTER WORKSPACE
   ════════════════════════════════════════════════════════════ */
.editor-workspace {
    flex: 1;
    position: relative;
    height: 100vh;
    background: var(--c-bg-canvas);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* View toggle pill */
.view-toggle {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill, 999px);
    padding: 4px;
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.view-toggle-btn {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-muted);
    padding: 8px 22px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    transition: all .2s ease;
}
.view-toggle-btn.active {
    background: var(--c-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* Canvas stage */
.canvas-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 80px 40px 40px;
}
.mockup-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 520px;
    line-height: 0;
}

/* Ảnh áo trắng — định kích thước cho cả vùng */
.mockup-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    background: #fff;
    user-select: none;
    -webkit-user-drag: none;
}

/* Bounding box = giới hạn vùng in. overflow:hidden → clip mask */
.bounding-box-wrapper {
    position: absolute;
    /* KHÔNG vẽ viền ở đây — khung vùng in do #boundingBox::after (trong home.blade) lo,
       tránh 2 đường nét đứt chồng nhau. */
    border: none;
    overflow: hidden;
    /* khi đang chọn object → ẩn viền vùng in, chỉ còn khung chọn (1 viền duy nhất) */
    box-sizing: border-box;
    line-height: normal;
    /* top / left / width / aspect-ratio / transform: JS set inline */
}
/* Đang chọn object → ẩn viền vùng in để chỉ còn 1 viền (khung chọn) */
.bounding-box-wrapper.sel-active { border-color: transparent; }

/* Fabric tự bọc <canvas> trong .canvas-container — ép phủ kín box */
.bounding-box-wrapper .canvas-container {
    position: absolute !important;
    top: 0;
    left: 0;
}

/* ── Layer list ── */
.layer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .12s ease;
}
.layer-item:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-soft);
}
.layer-item > i {
    font-size: 13px;
    color: var(--c-primary);
    width: 16px;
    text-align: center;
}
.layer-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.layer-del {
    border: none;
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    transition: all .12s ease;
}
.layer-del:hover {
    background: #fee2e2;
    color: #dc2626;
}