/* ====== TMT Truck — Sidebar with overlay (desktop + mobile) ====== */
:root{
  --sb-bg:#0f172a;
  --sb-bg2:#15233f;
  --sb-fg:#e5e7eb;
  --sb-fg-dim:#9aa4b2;
  --sb-primary:#6366f1;
  --sb-accent:#22d3ee;
  --sb-sep:rgba(148,163,184,.18);
  --sb-w:264px;
  --radius:12px;
}

/* Layout */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#f7f8fb;color:#0b1220;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100vh}
main{padding:28px}
.page-head{max-width:720px;background:#fff;padding:22px 24px;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.page-head h1{margin:0 0 8px 0}

/* Sidebar */
.kero-aside{
  width:var(--sb-w);
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));
  color:var(--sb-fg);
  box-shadow:0 10px 30px rgba(2,6,23,.4) inset;
  border-right:1px solid rgba(255,255,255,.06);
  padding:14px 10px 16px;
  position:sticky;top:0;align-self:start;height:100vh;overflow:auto;-webkit-overflow-scrolling:touch;
}
.kero-brand{display:flex;align-items:center;gap:10px;padding:8px 10px 14px 12px;margin:0 4px 8px;border-bottom:1px dashed var(--sb-sep)}
.kero-brand__dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--sb-primary),var(--sb-accent));box-shadow:0 0 0 5px rgba(34,211,238,.15)}
.kero-brand__title{font-weight:800;color:#fff;letter-spacing:.2px}
.kero-nav{padding:6px 4px 8px}
.kero-top{margin:2px 2px 8px;padding-bottom:6px;border-bottom:1px dashed var(--sb-sep)}

/* Section */
.kero-section{
  margin:10px 6px 6px;padding:10px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;user-select:none;
  color:#eef2ff;background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.22);
  border-radius:10px;backdrop-filter:blur(3px);
  transition:background .18s,border-color .18s,transform .18s;
}
.kero-section:hover{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.35);transform:translateX(2px)}
.kero-section .kero-caret{font-size:12px;color:var(--sb-fg-dim);transition:transform .25s,color .18s}
.kero-section.open .kero-caret{transform:rotate(180deg);color:var(--sb-accent)}
.kero-section span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sub */
.kero-sub{max-height:0;overflow:hidden;opacity:0;transform:translateY(-2px);margin:0 2px;transition:max-height .28s ease,opacity .2s ease,transform .2s ease}
.kero-sub.open{max-height:600px;opacity:1;transform:translateY(0)}

/* Item */
.kero-item{
  position:relative;display:flex;align-items:center;gap:12px;
  height:46px;padding:0 14px;margin:4px 4px;
  color:var(--sb-fg);text-decoration:none;border-radius:10px;
  transition:background .18s,color .18s,transform .1s;
}
.kero-item:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px)}
.kero-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;opacity:.95}
.kero-lbl{font-size:14px;line-height:1;white-space:nowrap}

/* Accent bar */
.kero-item::before{
  content:"";position:absolute;left:10px;top:11px;width:6px;height:24px;border-radius:6px;background:transparent;
  transition:background .18s,height .18s,top .18s;
}
.kero-item:hover::before{background:linear-gradient(180deg,var(--sb-primary),var(--sb-accent));top:9px;height:28px}

/* Active */
.kero-item.is-active{
  background:linear-gradient(180deg,rgba(34,211,238,.14),rgba(99,102,241,.16));
  color:#eaf9ff;box-shadow:0 12px 24px rgba(2,6,23,.25), inset 0 1px 0 rgba(255,255,255,.04);
  border:1px solid rgba(34,211,238,.32);
}
.kero-item.is-active::before{background:linear-gradient(180deg,var(--sb-accent),var(--sb-primary))}
.kero-item.is-active::after{
  content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:12px solid #fff;
}
/* 3 cụm trái/giữa/phải */
.kero-topbar__left,.kero-topbar__right{display:flex; align-items:center; gap:8px; min-width:0;}
.kero-topbar__left{flex:1;}
.kero-topbar__center{
  color: #fff;
  background-color: #0d6efd;
  border-color: #0a58ca;
  padding: 6px 12px; 
  flex:2; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:13.5px;
}

.kero-topbar__center strong{font-weight:700;}
.kero-topbar__right{flex:1; justify-content:flex-end;}
/* ==== Overlay behaviour on mobile ==== */
.kero-hamburger{display:none}
.kero-backdrop{display:none}
.ktb-date {
  color: #e11d48;        /* đỏ tươi */
  font-weight: 800;      /* làm nổi bật hơn một chút */
  font-size: 14pt;
}
@media (max-width:1024px){
  /* layout turns to 1 column; aside becomes off-canvas */
  .app{display:block}
  .kero-aside{
    position:fixed;left:0;top:0;z-index:60;height:100vh;width:var(--sb-w);
    transform:translateX(-100%);transition:transform .28s ease;
  }
  body.aside-open .kero-aside{ transform:translateX(0); }
  .kero-hamburger{
    display:inline-flex;flex-direction:column;gap:4px;position:fixed;left:14px;top:14px;z-index:70;
    width:42px;height:38px;align-items:center;justify-content:center;
    border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.1);
  }
  .kero-hamburger span{display:block;width:20px;height:2px;background:#111}
  .kero-backdrop{
    display:block;position:fixed;inset:0;z-index:55;background:rgba(2,6,23,.55);
    opacity:0;pointer-events:none;transition:opacity .2s ease;
  }
  body.aside-open .kero-backdrop{opacity:1;pointer-events:auto}
  /* keep labels visible inside overlay */
  .kero-brand__title,.kero-lbl{display:inline}
  .kero-item.is-active::after{display:none}
  main{padding:76px 16px 24px}
}
/* ==== FIX: Page-head full width on desktop ==== */
@media (min-width: 1024px) {
  .page-head {
    max-width: none;          /* bỏ giới hạn 720px */
    width: 98%;              /* chiếm toàn bộ chiều ngang */
    margin: 12px 14px 0;      /* thêm khoảng cách ngoài */
    padding: 0;               /* bỏ padding trong */
    background: transparent;  /* bỏ nền trắng */
    border: 0;                /* bỏ viền */
    box-shadow: none;         /* bỏ đổ bóng */
    border-radius: 0;         /* bỏ bo góc */
  }

  .page-head h1 {
    margin: 0 0 12px;         /* giữ chút khoảng cách dưới tiêu đề */
  }

  /* đảm bảo grid hiển thị đúng */
  .app {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  main {
    padding: 0;
  }
  
}
/* 1) Chặn tràn ngang toàn cục */
html,body{overflow-x:hidden}

/* 2) Sidebar không tràn ngang (clip pseudo-element/box-shadow) */
.kero-aside{overflow-x:hidden}

/* 3) Mũi tên active KHÔNG vượt khỏi sidebar */
.kero-item.is-active::after{
  right:8px;                 /* thay vì -12px gây tràn */
  border-left-width:10px;    /* thu nhỏ chút cho gọn trong 8px padding */
}

/* 4) Phòng ngừa: grid không đẩy rộng ngoài viewport */
.app{grid-template-columns:264px minmax(0,1fr); overflow-x:hidden}

/* 5) Nội dung chính cho phép cuộn ngang nếu có bảng rất rộng */
main{overflow-x:auto}

/* 6) Ẩn overflow ngang của danh sách con để tránh “giật” khi mở/đóng */
.kero-sub{overflow-x:hidden}

/* 7) (Tuỳ chọn) Khi mobile overlay mở, khóa cuộn ngang nền */
body.aside-open{overflow-x:hidden}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge--dispatching {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.badge--accepted {
  background-color: #cce5ff;
  color: #004085;
  border: 1px solid #b8daff;
}

.badge--to_pickup {
  background-color: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.badge--waiting {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.badge--in_trip {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.badge--done {
  background-color: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}

.badge--canceled {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
 .section-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-title .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
  }

  .inventory-wrap {
    background: #f8fafc;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 24px;
  }

  .inventory-wrap.raw {
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    border-color: #d7e8ff;
  }

  .inventory-wrap.finished {
    background: linear-gradient(180deg, #fffaf2 0%, #fff3dd 100%);
    border-color: #ffe1a8;
  }

  .inventory-card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    height: 100%;
    transition: all 0.2s ease;
  }

  .inventory-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  }

  .inventory-card .card-body {
    padding: 16px;
  }

  .inventory-label {
    font-size: 0.92rem;
    color: #6c757d;
    margin-bottom: 8px;
  }

  .inventory-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1f2937;
  }

  .inventory-sub {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #6b7280;
  }

  .raw .section-title {
    color: #0d6efd;
  }

  .raw .section-title .dot {
    background: #0d6efd;
  }

  .finished .section-title {
    color: #fd7e14;
  }

  .finished .section-title .dot {
    background: #fd7e14;
  }

  .raw .inventory-card.primary-highlight {
    background: linear-gradient(135deg, #0d6efd 0%, #3d8bfd 100%);
    color: #fff;
  }

  .raw .inventory-card.primary-highlight .inventory-label,
  .raw .inventory-card.primary-highlight .inventory-value,
  .raw .inventory-card.primary-highlight .inventory-sub {
    color: #fff;
  }

  .finished .inventory-card.primary-highlight {
    background: linear-gradient(135deg, #fd7e14 0%, #ff9f43 100%);
    color: #fff;
  }

  .finished .inventory-card.primary-highlight .inventory-label,
  .finished .inventory-card.primary-highlight .inventory-value,
  .finished .inventory-card.primary-highlight .inventory-sub {
    color: #fff;
  }