/* ══════════════════════════════════════════════════════════════
   MISSING CLASSES FIX — added 2026-06
   ══════════════════════════════════════════════════════════════ */

/* ─── Mobile / Desktop visibility helpers ───────────────────── */
.vcna-mobile-only  { display: none; }
.vcna-desktop-only-flex { display: flex; }

@media (max-width: 768px) {
    .vcna-mobile-only                        { display: block; }
    .vcna-mobile-only-flex                   { display: flex; }
    .vcna-filter-sheet-btn.vcna-mobile-only  { display: inline-flex; }
}

/* ─── Active filter chips (mobile) ─────────────────────────── */
.vcna-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 8px;
    box-sizing: border-box;
}
.vcna-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: #e8f0fe;
    color: #1a56db;
    border: 1px solid #c3d8fd;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.vcna-chip:active { background: #c3d8fd; }

/* ─── Filter sheet button (mobile) ─────────────────────────── */
.vcna-filter-sheet-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
}
.vcna-filter-sheet-btn.active {
    background: #e8f0fe;
    border-color: #1a56db;
}
.vcna-filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ─── Lightbox ───────────────────────────────────────────────── */
.vcna-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vcna-lightbox-img {
    max-width: 92vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    display: block;
}
.vcna-lightbox-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    -webkit-tap-highlight-color: transparent;
}
.vcna-lightbox-close:hover { background: rgba(255,255,255,.3); }
.vcna-lightbox-prev,
.vcna-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2001;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.vcna-lightbox-prev { left: 14px; }
.vcna-lightbox-next { right: 14px; }
.vcna-lightbox-prev:hover,
.vcna-lightbox-next:hover { background: rgba(255,255,255,.3); }
.vcna-lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.75);
    font-size: 13px;
    background: rgba(0,0,0,.4);
    padding: 3px 10px;
    border-radius: 12px;
}


/* ══════════════════════════════════════════════════════════════
   BOTTOM SHEET FILTER — mobile overlay từ dưới lên
   ══════════════════════════════════════════════════════════════ */

/* z-index 1200/1201 — PHẢI cao hơn .vcna-panel (1001, xem main.css) vì các sheet
   này thường được mở TỪ BÊN TRONG panel chi tiết đang mở (Tóm Tắt Đơn/Chia Sẻ TT
   TX/Thao Tác Khác...) — trước đây dùng z-index 300/301 nên trên desktop (panel
   z-index 1001 áp dụng mọi kích thước màn hình, không hạ xuống 150 như mobile)
   sheet bị panel đè lên, hiện mờ phía sau thay vì nổi lên trên cùng. Vẫn thấp hơn
   lightbox ảnh (2000/2001) — lightbox luôn phải là lớp trên cùng tuyệt đối. */
.vcna-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1200;
    display: block;
}

.vcna-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
    padding: 0 0 env(safe-area-inset-bottom, 0);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: bottom-sheet full-width tràn từ mép trái (che luôn sidebar) nhìn vỡ
   layout — thu gọn thành hộp thoại vừa phải, né hẳn sidebar, không dàn ngang
   hết màn hình. */
@media (min-width: 769px) {
    .vcna-sheet-overlay {
        left: var(--sidebar-width);
    }
    .vcna-bottom-sheet {
        left: var(--sidebar-width);
        right: 0;
        max-width: 460px;
        margin: 0 auto;
        bottom: 24px;
        border-radius: 16px;
        max-height: calc(85vh - 24px);
        box-shadow: 0 8px 32px rgba(0,0,0,.18);
    }
}

.vcna-sheet-handle {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 10px auto 0;
}

.vcna-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f3f4f6;
}

.vcna-sheet-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-1);
}

.vcna-sheet-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    color: var(--color-text-2);
}

.vcna-sheet-body {
    padding: 16px;
}

.vcna-sheet-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
    position: sticky;
    bottom: 0;
}

.vcna-sheet-footer .vcna-btn {
    flex: 1;
}

/* Nút "Đặt lại" / "Áp dụng" ở cuối bottom-sheet bộ lọc (template dùng class
   .vcna-sheet-actions — trước đây không có CSS riêng nên 2 nút bị co nhỏ,
   dồn về bên trái thay vì canh giữa). */
.vcna-sheet-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.vcna-sheet-actions .vcna-btn {
    flex: 1 1 0;
    max-width: 180px;
    justify-content: center;
    padding: 10px 16px;
}

/* Translate helpers cho Alpine transition */
.translate-y-full { transform: translateY(100%); }
.translate-y-0    { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   PANEL DETAIL — mobile: full screen, no horizontal overflow
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .vcna-panel.vcna-panel-right,
    .vcna-panel.vcna-panel-wide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .vcna-panel-body {
        overflow-x: hidden !important;
    }

    /* Prevent any child from overflowing panel horizontally */
    .vcna-panel-body * {
        max-width: 100%;
        word-break: break-word;
    }

    /* Detail grid: single column */
    .vcna-detail-row .vcna-detail-val {
        text-align: left !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        min-width: 0;
    }
}


/* ══════════════════════════════════════════════════════════════
   HISTORY LIST — max-height scroll + entry styles
   ══════════════════════════════════════════════════════════════ */

.vcna-history-list {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    margin-top: 8px;
}

.vcna-history-entry {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border-light);
}
.vcna-history-entry:last-child { border-bottom: none; }

.vcna-history-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 2px;
}

.vcna-history-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    gap: 4px;
}

/* Đưa "Admin · 2026-07-19 11:46:31" lên NGANG HÀNG với tiêu đề hành động
   (VD "Chuyển trạng thái") thay vì xuống dòng riêng — gọn hơn cho mỗi entry. */
.vcna-history-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.vcna-history-head .vcna-history-action { margin-bottom: 0; }
.vcna-history-head .vcna-history-meta { flex-shrink: 0; white-space: nowrap; }

.vcna-history-detail {
    font-size: 12px;
    color: var(--color-text-2);
    margin-top: 3px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ── Ảnh xác nhận đính kèm 1 entry lịch sử (Cập Nhật Tình Trạng) ─── */
.vcna-history-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.vcna-history-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--color-border-light);
    cursor: pointer;
}

/* ── Nút "Cập Nhật Tình Trạng" — cuối panel chi tiết đơn (Dashboard Tài Xế) ─── */
.vcna-cn-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
}

/* ── Chip chọn "Loại cập nhật" trong sheet Cập Nhật Tình Trạng ─── */
.vcna-cn-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── "Đã xem bởi" list (chi tiết đơn hàng) ─── */
.vcna-daxem-list { display: flex; flex-direction: column; gap: 8px; }
.vcna-daxem-item { display: flex; align-items: center; gap: 8px; }
.vcna-daxem-avatar {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--color-info-bg);
    color: var(--color-info);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.vcna-daxem-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vcna-daxem-time { flex-shrink: 0; font-size: 11px; color: var(--color-text-muted); }

/* ── Richtext content: prevent overflow ─── */
.vcna-detail-richtext,
.vcna-panel-body .vcna-input[readonly] {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    max-width: 100%;
    overflow-x: hidden;
}


/* ══════════════════════════════════════════════════════════════
   FILTER BOTTOM SHEET — form group / pill / row styles
   ══════════════════════════════════════════════════════════════ */

.vcna-filter-group {
    margin-bottom: 16px;
}

.vcna-filter-group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

/* Pills row */
.vcna-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vcna-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-2, #6b7280);
    background: var(--color-bg-2, #f9fafb);
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 20px;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.vcna-filter-pill.active,
.vcna-filter-pill:active {
    color: var(--color-primary, #f97316);
    background: #fff7ed;
    border-color: var(--color-primary, #f97316);
    font-weight: 600;
}

/* Two-col date row */
.vcna-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Input/select inside sheet */
.vcna-sheet-body .vcna-input,
.vcna-sheet-body .vcna-select,
.vcna-sheet-body input[type="date"],
.vcna-sheet-body select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-size: 14px;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text-1, #111827);
    outline: none;
    appearance: auto;
    -webkit-appearance: auto;
}

.vcna-sheet-body .vcna-input:focus,
.vcna-sheet-body .vcna-select:focus,
.vcna-sheet-body input[type="date"]:focus,
.vcna-sheet-body select:focus {
    border-color: var(--color-primary, #f97316);
    box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

/* Fix: prevent native select from overflowing sheet */
.vcna-sheet-body select {
    max-width: 100%;
}

/* ── Richtext content: fix overflow completely ─── */
.vcna-detail-richtext {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-1);
    margin-top: 4px;
    padding: 8px 10px;
    background: var(--color-bg-2, #f9fafb);
    border-radius: 6px;
    /* Overflow prevention */
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: hidden;
    max-width: 100%;
    white-space: pre-wrap;
}

.vcna-detail-richtext * {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.vcna-detail-richtext b,
.vcna-detail-richtext strong,
.vcna-detail-richtext i,
.vcna-detail-richtext em {
    display: inline;
    white-space: normal;
}


/* ══════════════════════════════════════════════════════════════
   CUSTOM INLINE PICKER — thay native <select> trong bottom sheet
   ══════════════════════════════════════════════════════════════ */

.vcna-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--color-text-1, #111827);
    background: #fff;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s;
}
.vcna-picker-btn:active,
.vcna-picker-btn:focus {
    outline: none;
    border-color: var(--color-primary, #f97316);
}

.vcna-picker-arrow {
    font-size: 11px;
    color: var(--color-text-muted, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
}

.vcna-picker-list {
    margin-top: 4px;
    border: 1.5px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.vcna-picker-option {
    padding: 11px 14px;
    font-size: 14px;
    color: var(--color-text-1, #111827);
    cursor: pointer;
    border-bottom: 1px solid var(--color-border-light, #f3f4f6);
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
}
.vcna-picker-option:last-child { border-bottom: none; }
.vcna-picker-option:active { background: #f9fafb; }
.vcna-picker-option.active {
    color: var(--color-primary, #f97316);
    font-weight: 600;
    background: #fff7ed;
}

/* Multi-select picker */
.vcna-picker-multi {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vcna-pick-check {
    width: 16px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--color-primary, #f97316);
    font-weight: 700;
    text-align: center;
}