/* =============================================================
   sidebar.css — Nút đóng/mở sidebar.
   Nạp SAU layout.css để override mà không phải sửa file cũ.

   Nút #sidebar-toggle CHỈ hiển thị từ 1024px trở xuống:

     <=1024px : DRAWER  — body.sidebar-open, sidebar trượt đè lên nội dung
                kèm lớp phủ nền. Mặc định đóng.
     > 1024px : nút ẩn. Desktop giữ nguyên như trước, không thêm nút nào
                vào header.

   Bản gốc ở dự án sale còn cho nút chạy ở desktop để thu gọn sidebar
   (body.sidebar-collapsed). Ở đây yêu cầu chỉ là mobile cho màn lệnh sản
   xuất, nên phần thu gọn desktop được tắt: thêm một nút lạ vào header của
   mọi người dùng desktop là thay đổi ngoài phạm vi. Mã của chế độ thu gọn
   vẫn giữ nguyên bên dưới, chỉ cần bỏ rule ẩn là bật lại được.

   Mốc 1024px phải khớp với hằng DRAWER_QUERY trong js/sidebar.js.
   ============================================================= */

:root {
  --drawer-width: 280px;
  --z-sidebar-overlay: 1400;
  --z-sidebar-drawer: 1500;
}

/* -------------------------------------------------------------
   1. Nút hamburger
   ------------------------------------------------------------- */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.sidebar-toggle svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}

/* Ba gạch đổi thành dấu X khi drawer đang mở */
.sidebar-toggle .icon-close { display: none; }
body.sidebar-open .sidebar-toggle .icon-menu { display: none; }
body.sidebar-open .sidebar-toggle .icon-close { display: block; }

/* -------------------------------------------------------------
   2. Chừa chỗ cho nút trong header.
   .header-title-area là flex item, mặc định min-width:auto nên nó co
   được xuống tận min-content, làm tiêu đề vỡ thành mỗi dòng một từ.
   ------------------------------------------------------------- */
.header {
  gap: 16px;
}

.header-title-area {
  flex: 1;
  min-width: 0;
}

.header-title,
.header-subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-widgets {
  flex-shrink: 0;
}

/* -------------------------------------------------------------
   3. Chuyển động chung cho cả hai chế độ
   ------------------------------------------------------------- */
.app-container {
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------
   4. Chế độ THU GỌN (> 1024px)
   ------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Desktop không dùng nút này - xem ghi chú đầu file. Ẩn bằng CSS chứ không
     bỏ khỏi markup, để bật lại chỉ là xoá một rule. */
  .sidebar-toggle {
    display: none;
  }

  /* Khai báo trên body, không phải :root, để đè được giá trị kế thừa */
  body.sidebar-collapsed {
    --sidebar-width: 0px;
  }

  body.sidebar-collapsed .sidebar {
    overflow: hidden;
    border-right: none;
    transform: translateX(-100%);
  }
}

/* -------------------------------------------------------------
   5. Lớp phủ nền — chỉ tồn tại ở chế độ drawer
   ------------------------------------------------------------- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(4, 8, 16, 0.65);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: var(--z-sidebar-overlay);
}

/* -------------------------------------------------------------
   6. Chế độ DRAWER (<= 1024px)
   Khớp với DRAWER_QUERY trong js/sidebar.js
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Dùng 100% thay 100vw để sidebar trượt ra không đẩy tràn ngang.
     Giữ display:grid vì auth.js gán inline style.display = 'grid'. */
  body,
  .app-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-container {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--drawer-width);
    max-width: 85vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    z-index: var(--z-sidebar-drawer);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
  }

  .sidebar-overlay { display: block; }

  body.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
  }
}

/* -------------------------------------------------------------
   7. Tôn trọng thiết lập giảm chuyển động của hệ điều hành
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app-container,
  .sidebar,
  .sidebar-overlay {
    transition: none;
  }
}