/* ===== MENU TRÁI KHU QUẢN TRỊ =====
   Tên class giữ trùng với thongke để hai site đọc như nhau, nhưng CÁCH ĐẶT thì
   khác một điểm cốt lõi và cố ý:

     thongke     — menu trượt ĐÈ lên nội dung, trang không chừa chỗ.
     shopsieuthi — menu CHIẾM CHỖ, nội dung nằm bên phải nó.

   Vì sao khác: cột nội dung của thongke rộng tối đa 1024px nên trên màn rộng nó
   tự lọt qua bên phải dải menu. shopsieuthi rộng tới 1200px, trượt đè là ăn mất
   mép trái nội dung ở gần như mọi khổ màn hình.

   ĐÁNH ĐỔI PHẢI BIẾT: khắp CSS admin có hàng trăm công thức
   calc(N * 100vw / 400) — chúng ngầm hiểu "bề ngang nội dung = bề ngang màn
   hình". Menu chiếm chỗ làm điều đó sai đi. Các mốc dưới đây chọn sao cho sai
   số luôn nhỏ hoặc bằng 0:

     ≥1280px  menu 262px, nội dung ≤1200px  → mọi công thức đã chạm trần px, lệch 0
     1024–1280px  menu co còn 68px          → lệch tối đa 68px
     <1024px  menu thành ngăn kéo, không chiếm chỗ → lệch 0

   Đổi ba mốc này là phải đo lại các trang danh sách / biểu mẫu. */

.admin-sidebar {
    /* Dính ngay dưới thanh trên và cuộn riêng. position:sticky (không phải
       fixed) chính là thứ khiến nó chiếm chỗ trong hàng flex .admin-shell. */
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    flex: none;
    align-self: flex-start;
    width: var(--sidebar-w-min);
    height: calc(100vh - var(--header-h));
    padding: 12px 10px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--line);
    font-family: var(--font);
    transition: width .18s ease;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;

    /* Bề ngang icon của menu — dùng để tính chỗ thụt vào của mục con
       (.sidebar-group-items bên dưới). Khai ở đây chứ không đọc thẳng .svg-icon
       vì CSS không tính ngược được: site nào phóng icon to hơn thì khai lại
       biến này cho khớp (thongke 18px, xem admin/overrides.css). */
    --sb-icon-w: 16px;
}

body.sidebar-open .admin-sidebar {
    width: var(--sidebar-w);
}

.admin-sidebar::-webkit-scrollbar { width: 10px; }
.admin-sidebar::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: #d1d5db;
    background-clip: content-box;
}

.admin-sidebar-nav { min-width: 0; }

.sidebar-list,
.sidebar-group-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Khoảng hở giữa các mục, kể cả mục trong nhóm: 3px. Sát hơn thì nền của mục
   đang mở và mục kề nhau dính thành một mảng liền. */
.sidebar-list > li + li,
.sidebar-group-items > li + li { margin-top: 3px; }

/* ----- Nhóm ----- */

.sidebar-group-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 9px 5px;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    /* Tên nhóm là cấp cha nên đậm màu hơn mục con (--ink so với --ink-2), cỡ chữ
       thì nhỏ hơn nửa pixel. Trước đây nó dùng --muted, tức nhạt hơn cả mục con. */
    color: var(--ink);
    font: 600 13.5px/1.3 var(--font);
    letter-spacing: .02em;
    text-align: left;
    cursor: pointer;
}

.sidebar-group-btn:hover { color: var(--brand-text); }

.sidebar-group-arrow {
    display: flex;
    margin-left: auto;
    color: var(--muted);
    transition: transform .18s ease;
}

.sidebar-group--closed .sidebar-group-arrow { transform: rotate(-90deg); }
.sidebar-group--closed .sidebar-group-items { display: none; }

/* Vạch dọc nối các mục trong nhóm, cho mắt bám được thứ bậc.

   Chỗ thụt vào tính sao cho ICON của mục con rơi đúng vào chữ đầu của TÊN NHÓM
   cha. Tên nhóm bắt đầu sau (lề trong của nút nhóm + icon + khe 10px); mục con
   bắt đầu sau (lề trong của mục + 8px margin + 1px vạch + padding này). Hai vế
   có chung "lề trong" — .sidebar-item và .sidebar-group-btn luôn nhận cùng một
   padding-left ở mọi mốc — nên rút gọn còn: padding = icon + 10 - 8 - 1.
   Đừng đặt lại padding ngang cho .sidebar-group-items .sidebar-item, phép cân
   này dựa vào việc mục con và nút nhóm cùng lề trong. */
.sidebar-group-items {
    margin-left: 8px;
    padding-left: calc(var(--sb-icon-w) + 1px);
    border-left: 1px solid var(--line);
}

/* ----- Mục ----- */

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 9px;
    border-radius: var(--radius-control);
    color: var(--ink-2);
    font: 500 14px/1.25 var(--font);
    text-decoration: none;
}

/* ===== MÀU RIÊNG CHO TỪNG MỤC MENU =====
   Gắn vào chính .sidebar-item nên tô cả CHỮ lẫn ICON.

   Phải nhắm riêng .svg-icon: nó tự khai `color: var(--muted)` chứ không kế
   thừa từ mục, nên chỉ đổi màu mục thôi là icon vẫn xám.

   VỊ TRÍ CỦA KHỐI NÀY LÀ CÓ CHỦ Ý — phải đứng TRƯỚC .sidebar-item--active và
   .sidebar-item:hover ở dưới. Hai quy tắc kia cùng độ đặc hiệu với mấy quy tắc
   ở đây, nên ai khai sau thì thắng: để khối này xuống dưới là mục đang mở và
   mục đang rê chuột mất luôn màu trạng thái của chúng.

   KHÔNG dùng bộ .color- trong lib.css dù màu y hệt — mấy class đó kèm
   !important, mà ở đây không cần, thêm vào là trạng thái hover/active không đè
   lại được nữa.

   Tương phản với nền trắng (chữ 14px nên ngưỡng 4.5:1): lá 5.93, đỏ 5.08,
   dương 7.21, ngọc 4.34, tím 6.85, nâu 5.87, cam 4.57. Tím lấy luôn #5347c4 — đã có
   trong admin/tokens.css dưới tên --t3-ink, khỏi bịa màu mới; nâu #8a5a2b thì
   bảng token không có nên chọn mới, lấy mức nằm giữa dải cho khỏi lạc; cam
   #c05621 lấy luôn --btn-orange trong tokens.css để trùng với màu nút. Thêm
   màu nào thì đo màu đó.

   (Đừng viết tên bộ class đó kèm dấu sao và gạch chéo liền nhau trong chú
   thích: hai ký tự ấy ĐÓNG khối chú thích giữa chừng, phần chữ còn lại thành
   rác CSS và quy tắc ngay sau đó bị nuốt mất. Đã dính đúng lỗi này — mất
   .sidebar-item--green, chữ xanh lá không ăn mà icon vẫn xanh.) */
.sidebar-item--green     { color: #506d15; }
.sidebar-item--red       { color: #d71f32; }
.sidebar-item--blue      { color: #234cc5; }
.sidebar-item--turquoise { color: #098974; }
.sidebar-item--purple    { color: #5347c4; }
.sidebar-item--brown     { color: #8a5a2b; }
.sidebar-item--orange    { color: #c05621; }

.sidebar-item--green     .svg-icon { color: #506d15; }
.sidebar-item--red       .svg-icon { color: #d71f32; }
.sidebar-item--blue      .svg-icon { color: #234cc5; }
.sidebar-item--turquoise .svg-icon { color: #098974; }
.sidebar-item--purple    .svg-icon { color: #5347c4; }
.sidebar-item--brown     .svg-icon { color: #8a5a2b; }
.sidebar-item--orange    .svg-icon { color: #c05621; }

/* Mục chạy việc (xoá cache) phải là <button> trong <form> POST, không phải <a>.
   Trình duyệt cho <button> nền xám, viền và chữ căn giữa theo mặc định, nên phải
   trả về đúng dáng một dòng menu. */
.sidebar-form { display: block; }

button.sidebar-item {
    width: 100%;
    margin: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    /* Không khai font ở đây: selector này (0,1,1) nặng hơn .sidebar-item (0,1,0)
       nên mọi khai báo font sẽ đè mất cỡ chữ chung. Font mặc định của <button>
       là của trình duyệt, mà quy tắc tác giả .sidebar-item luôn thắng nó. */
}

/* Mục trong nhóm nhẹ nét hơn mục đứng riêng: nhóm đã có tên nhóm dẫn ở trên,
   mục con không cần tự nhấn mạnh thêm. */
.sidebar-group-items .sidebar-item {
    /* Chỉ khai lề TRÊN/DƯỚI: lề ngang phải để .sidebar-item (và các mốc ghi đè
       nó) quyết, nếu không mục con lệch khỏi nút nhóm và phép cân ở
       .sidebar-group-items sai. */
    padding-block: 4px;
    font-weight: 400;
}

.sidebar-item:hover {
    background: var(--field);
    color: var(--ink);
    text-decoration: none;
}

/* Mục đang mở: chỉ đổi MÀU CHỮ và nét đậm, KHÔNG tô nền.

   Nền --brand-soft cũ vẽ một mảng màu chạy hết bề ngang menu, nặng hơn hẳn mọi
   thứ còn lại trong cột và kéo mắt về nó trước cả nội dung trang. Màu chữ +
   nét đậm đã đủ để nhận ra đang đứng ở đâu. */
.sidebar-item--active {
    color: var(--brand-text);
    font-weight: 600;
}

.sidebar-item--active .svg-icon { color: var(--brand-text); }

.svg-icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--muted);
    /* Cùng lý do với .btn-icon: 16px là hơn một nửa cỡ gốc 24px của Heroicons,
       giữ nguyên stroke 1.5 thì nét mảnh hơn chữ bên cạnh. */
    stroke-width: 1.8;
}

/* Icon phụ: mũi tên đóng/mở nhóm và hai mũi tên trên nút thu gọn. Nhỏ hơn hẳn
   icon chính (16px) để mắt đọc được thứ bậc — chúng là dấu hiệu trạng thái chứ
   không phải nội dung. */
.svg-icon--sm { width: 12px; height: 12px; }

.sidebar-item:hover .svg-icon { color: var(--ink-2); }

.sidebar-label {
    /* lib.css có `span { font-size: .875rem }` — selector thẻ trần ghim mọi
       <span> về 14px, và quy tắc khớp thì thắng thừa kế. Không có dòng inherit
       này thì chữ menu trái đứng yên ở 14px dù .sidebar-item đặt bao nhiêu. */
    font-size: inherit;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Dải icon (menu đang đóng, từ 1024px trở lên) ----- */

body:not(.sidebar-open) .sidebar-label,
body:not(.sidebar-open) .sidebar-group-arrow,
body:not(.sidebar-open) .sidebar-group-btn {
    /* Tên nhóm không đọc nổi trong 68px nên giấu hẳn nút nhóm; các mục con dàn
       phẳng ra, phân nhóm bằng vạch ngang bên dưới. */
    display: none;
}

body:not(.sidebar-open) .sidebar-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body:not(.sidebar-open) .sidebar-group-items {
    display: block;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

body:not(.sidebar-open) .sidebar-list > li + li {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

/* ----- Nút mở/đóng, nằm trên thanh trên ----- */

.sidebar-toggle {
    /* Khổ rộng menu trái luôn hiện nên không cần nút; nút chỉ bật lại ở khổ hẹp
       (xem @media 767px bên dưới), giống cd360. */
    display: none;
    align-items: center;
    flex: none;
    gap: 1px;
    height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--radius-control);
    /* Nền trắng như ô tìm kiếm và nút tài khoản: ba khối trên thanh cùng một
       kiểu thì mắt bắt được ngay đâu là chỗ bấm. Màn che --brand-veil trước đây
       chìm quá vào nền màu thương hiệu. */
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
}

.sidebar-toggle:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.sidebar-toggle .svg-icon { color: currentColor; }

/* Mũi tên chỉ hướng menu SẮP chạy tới, không phải hướng hiện tại: đang hiện thì
   trỏ vào (bấm là thu về), đang ẩn thì trỏ ra (bấm là trượt ra). */
.sidebar-toggle-arrow { display: none; }
body.sidebar-open .sidebar-toggle-arrow--open { display: block; }
body:not(.sidebar-open) .sidebar-toggle-arrow--closed { display: block; }

/* ----- Ngăn kéo, dưới 768px -----

   Mốc 768px = máy tính bảng dựng đứng. Từ đó trở lên menu trái là CỘT CHIẾM
   CHỖ, không phải ngăn kéo, và cũng không có nút thu gọn.

   Trước 2026-09-13 mốc này là 1023px, tức máy tính bảng dựng đứng vẫn phải bấm
   nút mới thấy menu. Đổi sau khi đã bỏ khoảng trắng hai bên: ở 768px cột nội
   dung còn ~450px, ở 834px còn ~516px — đủ dùng, và đổi lại menu luôn nhìn thấy.
   Đổi số này là phải đổi cả @media min-width bên dưới VÀ mốc trong JS của
   layouts/app_admin.blade.php (biến `wide`), nếu không sẽ rơi vào cảnh menu co
   thành dải icon mà nút mở đã ẩn mất. */

.sidebar-backdrop { display: none; }

@media only screen and (max-width: 767px) {
    /* Khổ hẹp menu trái thành ngăn kéo nên cần nút mở. */
    .sidebar-toggle { display: flex; }

    .admin-sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        /* Thang z ở khổ hẹp: thanh trên 1200 > ngăn kéo 1100 > màn che 1090 >
           mọi thứ trong nội dung (.image-list dính trong form.css là 999) và
           dưới hộp thoại (9998+). Ngăn kéo THẤP HƠN thanh trên nên không bao
           giờ vẽ đè header, kể cả khi hộp của nó tính sai. */
        z-index: 1100;
        /* NGUYÊN NHÂN GỐC của việc ngăn kéo đè header: quy tắc desktop đặt
           align-self: flex-start (để dính đúng trong hàng flex). Kế thừa xuống
           đây, trên một phần tử fixed là con của flex, nó làm bộ ba
           top + bottom:0 + height:auto bị bỏ qua — hộp co theo nội dung và vẽ
           từ 0, tràn lên thanh trên. Đã thử đối chứng: cùng CSS, chỉ đổi
           align-self auto/flex-start là chuyển từ đúng (50, cao 730) sang sai
           (0, cao 1063). Trả về auto ở đây; chiều cao tường minh bên dưới là
           lớp bảo hiểm thứ hai. */
        align-self: auto;
        width: var(--sidebar-w);
        max-width: 84vw;
        /* Chiều cao khai tường minh thay vì top + bottom:0 + height:auto — bộ
           ba đó phụ thuộc vào containing block của fixed, có môi trường (và
           bộ giả lập viewport) tính sai, kết quả là hộp co theo nội dung và
           tràn lên header. dvh trừ đúng phần thanh địa chỉ di động co giãn. */
        height: calc(100vh - var(--header-h));
        height: calc(100dvh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        box-shadow: 0 24px 48px -22px rgba(16, 24, 40, .55);
        transform: translateX(-101%);
        transition: transform .2s ease;
    }

    body.sidebar-open .admin-sidebar {
        width: var(--sidebar-w);
        transform: none;
    }

    /* Dưới mốc này menu là ngăn kéo che nội dung, nên lúc đóng phải trả lại
       đầy đủ nhãn — không còn khái niệm dải icon nữa. */
    body:not(.sidebar-open) .sidebar-label,
    body:not(.sidebar-open) .sidebar-group-arrow,
    body:not(.sidebar-open) .sidebar-group-btn {
        display: flex;
    }

    body:not(.sidebar-open) .sidebar-label { display: block; }

    body:not(.sidebar-open) .sidebar-item {
        justify-content: flex-start;
        padding-left: 10px;
        padding-right: 10px;
    }

    body:not(.sidebar-open) .sidebar-group-items {
        margin-left: 8px;
        padding-left: calc(var(--sb-icon-w) + 1px);
        border-left: 1px solid var(--line);
    }

    body:not(.sidebar-open) .sidebar-list > li + li {
        margin-top: 3px;
        padding-top: 0;
        border-top: 0;
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: var(--header-h) 0 0 0;
        /* Dưới ngăn kéo (1100) và thanh trên (1200). */
        z-index: 1090;
        background: rgba(16, 24, 40, .45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media only screen and (max-width: 600px) {
    /* Không đặt width cứng: nút là flex chứa hai icon (gạch ngang + mũi tên),
       ghim 34px là hai cái chồng lên nhau. Để padding tự quyết bề ngang. */
    .sidebar-toggle { height: 34px; padding: 0 4px; gap: 3px; }
    .sidebar-toggle .svg-icon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .sidebar-backdrop,
    .sidebar-group-arrow { transition: none; }
}

/* ===== KHỔ DESKTOP: MENU TRÁI KHÔNG NỀN, CHỮ BÁM MÉP CONTAINER =====

   Ở khổ này menu trái là một cột NẰM TRONG container chứ không phải tấm ván
   dán mép màn hình, nên bỏ nền, bỏ vạch ngăn và bỏ luôn lề trong — icon và chữ
   nhờ đó thẳng hàng với mép trái của .admin-shell, cùng mốc với thanh trên.

   Chỉ đặt từ 768px trở lên: dưới mốc đó menu là ngăn kéo đè lên nội dung nên
   BẮT BUỘC phải có nền, và quy tắc gốc .admin-sidebar vẫn giữ nền cho nó. */
@media only screen and (min-width: 768px) {
    .admin-sidebar {
        /* Bỏ nền nhưng GIỮ vạch dọc: nó là ranh giới giữa hai cột, không có thì
           menu và nội dung dính vào nhau. */
        background: transparent;
        padding-inline: 0;
    }

    .sidebar-item,
    .sidebar-group-btn {
        padding-left: 0;
    }
}