/* ================================================================== *
 * Bản sắc Logidata cho tài liệu — đồng bộ với website (logidata.vn)
 * và Portal. Nguồn giá trị: logidata-api/design/DESIGN.md
 *
 *   brand        #f26522  cam Logidata — CHỈ dùng cho hình khối
 *                         (viền, thanh, icon). Không làm màu chữ trên
 *                         nền sáng (3.15:1, trượt AA).
 *   brand-strong #c2490d  cam đậm — chữ liên kết, nút, viền focus (4.94:1)
 *   brand-deep   #a93e0a  trạng thái nhấn / chữ trên nền cam nhạt
 *   brand-soft   #fdf0e8  nền tint cho alert/badge
 *   surface-code #262a31  nền khối lệnh — cũng dùng cho header (menu)
 *   surface-sunken #f1f3f6  nền inline code
 *
 * Logo header dùng bản âm bản (assets/logo-white.svg); favicon dùng
 * bản cam (assets/logo.svg). Sidebar trái KHÔNG tô nền riêng — để trắng
 * như phần nội dung, chỉ header mang màu.
 * ================================================================== */

:root {
  --ld-brand: #f26522;
  --ld-brand-strong: #c2490d;
  --ld-brand-deep: #a93e0a;
  --ld-brand-soft: #fdf0e8;
  --ld-sunken: #f1f3f6;
  /* Header/menu: cùng tông xám than với khối code (surface-code) */
  --ld-header: #262a31;
  --ld-header-dark: #1c1f25;
}

/* --- Primary: header xám than (surface-code), chữ/icon sáng --------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--ld-header);
  --md-primary-fg-color--light: #3a3f48;
  --md-primary-fg-color--dark: var(--ld-header-dark);
  --md-primary-bg-color: #ffffff;                 /* chữ/icon trên header */
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
}

/* --- Accent: cam thương hiệu (hover, liên kết đang trỏ, focus) ------- */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--ld-brand-strong);
  --md-accent-fg-color--transparent: rgba(194, 73, 13, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}

/* --- Chế độ sáng --------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--ld-brand-strong);   /* liên kết: 4.94:1 trên trắng */
  --md-code-bg-color: var(--ld-sunken);
  --md-footer-bg-color: #2b3038;                  /* xám than, không đen kịt */
  --md-footer-bg-color--dark: #1f232a;
}
[data-md-color-scheme="default"] .md-typeset a > code {
  color: var(--ld-brand-strong);
}

/* --- Chế độ tối — header cùng tông xám than, thân trang tối --------- */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #ff8547;   /* cam sáng lên để đạt AA trên nền tối */
  --md-accent-fg-color: #ff8547;
  --md-footer-bg-color: #16191f;
}

/* --- Header --------------------------------------------------------- */
.md-header {
  box-shadow: 0 1px 4px rgba(10, 12, 15, 0.18);
}

/* Nút CTA (.md-button--primary) theo mẫu button-primary của Portal */
.md-typeset .md-button--primary {
  background-color: var(--ld-brand-strong);
  border-color: var(--ld-brand-strong);
  color: #ffffff;
}
.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: var(--ld-brand-deep);
  border-color: var(--ld-brand-deep);
  color: #ffffff;
}

/* Admonition "info" (!!! info) — tint cam thay cho xanh mặc định */
[data-md-color-scheme="default"] .md-typeset .admonition.info,
[data-md-color-scheme="default"] .md-typeset details.info {
  border-color: var(--ld-brand-strong);
}
[data-md-color-scheme="default"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="default"] .md-typeset .info > summary {
  background-color: var(--ld-brand-soft);
  color: var(--ld-brand-deep);
}
[data-md-color-scheme="default"] .md-typeset .info > .admonition-title::before,
[data-md-color-scheme="default"] .md-typeset .info > summary::before {
  background-color: var(--ld-brand-deep);
}

/* Viền trên thẻ trong "grid cards" — mẫu card-stat của Portal */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  border-top: 3px solid var(--ld-brand);
}

/* ------------------------------------------------------------------ *
 * Thanh điều hướng trái — KHÔNG tô nền riêng (giữ trắng như nội dung).
 * Chỉ chỉnh cỡ chữ và điểm nhấn cam cho nhãn phân mục / trang đang xem.
 * ------------------------------------------------------------------ */

/* Mọi liên kết trong nav trái — CÙNG một cỡ chữ, dù ở gốc hay trong phân mục */
.md-nav--primary .md-nav__item .md-nav__link {
  font-size: .72rem;
  font-weight: 400;
}
.md-nav--primary .md-nav__link--active {
  color: var(--ld-brand-strong);
  font-weight: 700;
}

/* Trang đang xem: vạch cam bên trái để quét mắt nhanh.
   margin-left âm + padding-left dương cùng độ lớn: mở thêm khoảng
   trống cho vạch mà không đẩy chữ lệch so với các link khác. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  box-shadow: inset 2px 0 0 var(--ld-brand);
  margin-left: -.5rem;
  padding-left: .5rem;
}

/* Nhãn phân mục cấp 1: chữ hoa nhỏ, màu thương hiệu, có đường kẻ phía trên.
   Đây là tiêu đề nhóm, không phải liên kết — nên cỡ chữ riêng. */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  margin-top: 1.4rem;
  padding-top: .9rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  color: var(--ld-brand-strong);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
[data-md-color-scheme="slate"] .md-nav--primary .md-nav__item--section > .md-nav__link {
  color: #ff8547;
}

/* Phân mục đầu tiên không cần đường kẻ (đã có khoảng trắng sau nhóm link lẻ) */
.md-nav--primary > .md-nav__list > .md-nav__item--section:first-of-type > .md-nav__link {
  border-top: 0;
  margin-top: .6rem;
}

/* Trang con trong phân mục: thụt vào, có đường dẫn dọc mảnh */
.md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
  margin-left: .35rem;
  padding-left: .7rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

/* Ẩn tiêu đề "Logidata API" lặp ở đầu sidebar trên desktop — header đã có rồi.
   Vẫn giữ nó trong drawer trên mobile (nơi không có header title). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    padding-top: .4rem;
  }
}