/**
 * App shell — fixed left sidebar on desktop, off-canvas drawer on mobile.
 *
 * Built on Bootstrap's theme tokens (--bs-*) rather than hard-coded colours, so
 * light/dark/auto all work without a second palette to maintain.
 */

:root {
  --lab-sidebar-w: 250px;
  --lab-sidebar-w-collapsed: 60px;
  --lab-topbar-h: 60px;
}

/* ---------- shell ---------- */

.lab-shell {
  display: flex;
  min-height: 100vh;
}

.lab-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--lab-sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--bs-tertiary-bg);
  border-inline-end: 1px solid var(--bs-border-color);
  z-index: 1040;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lab-main {
  flex: 1 1 auto;
  min-width: 0; /* cho phep bang rong hon co co lai, thay vi tran ra ngoai */
  margin-inline-start: var(--lab-sidebar-w);
  display: flex;
  flex-direction: column;
}

.lab-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--lab-topbar-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Nut khong duoc co lai thanh mat chu; phan co lai la subtitle */
.lab-topbar > .btn { flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .lab-topbar { gap: .4rem; padding-inline: .6rem; }
  /* Subtitle la thu duy nhat bo duoc tren man hinh hep — nut thi phai bam duoc */
  .lab-topbar .lab-subtitle { display: none; }
  /* An subtitle la mat luon khoang dan; day nhom nut sang phai bang margin */
  .lab-topbar #btn-theme { margin-inline-start: auto; }
}

.lab-content {
  padding: 1.25rem 1rem 3rem;
}

/* ---------- sidebar brand + nav ---------- */

.lab-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.lab-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: .5rem;
  background: var(--bs-primary);
  color: #fff;
  font-size: 1.1rem;
}

.lab-nav-group { padding: .75rem 0 .25rem; }

.lab-nav-label {
  padding: 0 1rem .4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.lab-nav-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .5rem 1rem;
  border: 0;
  border-inline-start: 3px solid transparent;
  background: transparent;
  color: var(--bs-body-color);
  font-size: .9rem;
  text-align: start;
  cursor: pointer;
}

.lab-nav-item:hover { background: var(--bs-secondary-bg); }

.lab-nav-item.active {
  border-inline-start-color: var(--bs-primary);
  background: var(--bs-secondary-bg);
  font-weight: 600;
  color: var(--bs-primary);
}

.lab-nav-item i { font-size: 1rem; width: 1.1rem; text-align: center; }

.lab-sidebar-foot {
  margin-top: auto;
  padding: .85rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: .72rem;
  color: var(--bs-secondary-color);
}

/* ---------- log + diagram ---------- */

.lab-log {
  height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: .75rem;
  font-size: .78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bs-tertiary-bg);
}

.lab-diagram {
  overflow-x: auto;
  line-height: 1.45;
  color: var(--bs-secondary-color);
}

/* ---------- table column grouping ---------- */

.table-group-server { background: rgba(13, 110, 253, .08); }
.table-group-browser { background: rgba(25, 135, 84, .08); }

/* DataTables ke mot vien doi lap voi Bootstrap khi o dark mode */
table.dataTable > tbody > tr { background-color: transparent; }

/* ---------- desktop: thu gon sidebar con icon ----------
 *
 * Thu gon chu KHONG an: cac tool van bam duoc bang icon, va tooltip giu lai
 * ten. An han thi phai mo ra moi doi duoc tool, cham hon han khi dang demo.
 */

.sidebar-collapsed .lab-sidebar { width: var(--lab-sidebar-w-collapsed); }
.sidebar-collapsed .lab-main { margin-inline-start: var(--lab-sidebar-w-collapsed); }

.sidebar-collapsed .lab-nav-label,
.sidebar-collapsed .lab-nav-item span,
.sidebar-collapsed .lab-brand > div:not(.lab-brand-mark),
.sidebar-collapsed .lab-foot-full {
  display: none;
}

/* Chu trong sidebar hep phai bi cat, khong duoc xuong hang thanh cot doc */
.sidebar-collapsed .lab-sidebar { overflow-x: hidden; }
.sidebar-collapsed .lab-sidebar * { white-space: nowrap; }

.sidebar-collapsed .lab-brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .lab-nav-item { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .lab-nav-item i { font-size: 1.15rem; }

/* Giu duong ke phan nhom khi mat chu tieu de, neu khong 6 icon dinh lien nhau */
.sidebar-collapsed .lab-nav-group + .lab-nav-group {
  border-top: 1px solid var(--bs-border-color);
  margin-top: .25rem;
  padding-top: .5rem;
}

.sidebar-collapsed .lab-sidebar-foot { text-align: center; padding-inline: 0; }

.lab-foot-mini { display: none; }
.sidebar-collapsed .lab-foot-mini { display: block; }

/* Nut thu gon co nghia tu tablet tro len — tu 768px la con du cho de sidebar
 * DAY noi dung sang phai thay vi de len tren no. Duoi nguong do man hinh qua
 * hep, day se bop noi dung con vai chuc pixel, nen mobile dung drawer. */
#btn-collapse { display: none; }
@media (min-width: 768px) { #btn-collapse { display: inline-flex; } }

.lab-sidebar,
.lab-main { transition: width .18s ease-out, margin-inline-start .18s ease-out; }

/* ---------- mobile: sidebar thanh drawer ---------- */

.lab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1035;
  background: rgba(0, 0, 0, .5);
  display: none;
}

/* Chi mobile that (<768px) moi dung drawer de len noi dung. Tablet tro len,
 * sidebar day noi dung — giong pattern cua cac admin panel quen thuoc, va
 * quan trong hon: khong che mat bang so dang doc. */
@media (max-width: 767.98px) {
  .lab-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease-out;
  }

  .lab-main { margin-inline-start: 0; }

  .sidebar-open .lab-sidebar { transform: translateX(0); }
  .sidebar-open .lab-backdrop { display: block; }
}

/* Tablet: sidebar day noi dung, va mac dinh thu gon con icon vi 250px chiem
 * gan 1/3 be ngang 820px. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .lab-sidebar { width: var(--lab-sidebar-w-collapsed); }
  .lab-main { margin-inline-start: var(--lab-sidebar-w-collapsed); }

  .lab-nav-label,
  .lab-nav-item span,
  .lab-brand > div:not(.lab-brand-mark),
  .lab-foot-full { display: none; }

  .lab-sidebar { overflow-x: hidden; }
  .lab-sidebar * { white-space: nowrap; }

  .lab-brand,
  .lab-nav-item { justify-content: center; padding-inline: 0; }
  .lab-foot-mini { display: block; }
  .lab-sidebar-foot { text-align: center; padding-inline: 0; }

  .lab-nav-group + .lab-nav-group {
    border-top: 1px solid var(--bs-border-color);
    margin-top: .25rem;
    padding-top: .5rem;
  }

  /* Tren tablet, nut collapse mo RONG sidebar ra (nguoc voi desktop) */
  .sidebar-collapsed .lab-sidebar { width: var(--lab-sidebar-w); }
  .sidebar-collapsed .lab-main { margin-inline-start: var(--lab-sidebar-w); }

  .sidebar-collapsed .lab-nav-label,
  .sidebar-collapsed .lab-nav-item span,
  .sidebar-collapsed .lab-brand > div:not(.lab-brand-mark),
  .sidebar-collapsed .lab-foot-full { display: block; }

  .sidebar-collapsed .lab-brand,
  .sidebar-collapsed .lab-nav-item { justify-content: flex-start; padding-inline: 1rem; }
  .sidebar-collapsed .lab-foot-mini { display: none; }
  .sidebar-collapsed .lab-sidebar-foot { text-align: start; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-sidebar,
  .lab-main { transition: none; }
}

/* Tablet doc: sidebar van la drawer, nhung noi dung duoc rong hon */
@media (min-width: 768px) and (max-width: 991.98px) {
  .lab-content { padding-inline: 1.5rem; }
}

/* Man hinh rat nho: bang va card can bot padding de khong bi bop */
@media (max-width: 575.98px) {
  .lab-content { padding-inline: .75rem; }
  .card-body { padding: .85rem; }
}