/* EMS BIC — thay thế toàn bộ style.css hiện tại. Chỉ thay đổi giao diện. */
:root {
  --navy: #193958;
  --maroon: #a52e3b;
  --gray-light: #f3f6fa;
  --gray-dark: #526277;
  --white: #fff;
  --green: #22835a;
  --lime: #9aca65;
  --border: #dce4ed;
  --text: #26364a;
  --muted: #708096;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--gray-light);
}
button,
input,
select,
textarea {
  font: inherit;
}
h2 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 650;
}
h3 {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
}
a {
  color: var(--navy);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.hidden {
  display: none !important;
}
.active {
  display: block;
}
.w-100 {
  width: 100%;
}
.text-error {
  color: var(--maroon);
  font-weight: 600;
}
.text-primary {
  color: var(--navy);
  font-weight: 650;
}
.btn {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 1.4;
  transition:
    background 0.15s,
    box-shadow 0.15s;
}
.btn-primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.btn-primary:hover {
  background: #254e73;
}
.btn-secondary {
  background: #eaf0f6;
  color: var(--navy);
  border-color: #d7e1ec;
}
.btn-secondary:hover {
  background: #dde7f1;
}
.btn-danger {
  background: var(--maroon);
  color: white;
}
.btn-danger:hover {
  background: #892632;
}
.toolbar .btn-secondary[style*="--green"] {
  color: white;
  border-color: var(--green);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #93b4d5;
  outline-offset: 3px;
}
#login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #102b45, #234c70);
}
.login-card {
  width: 100%;
  max-width: 370px;
  background: white;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 55px #081d3433;
  text-align: center;
}
.login-card h2 {
  margin-bottom: 22px;
  color: var(--navy);
}
.login-card .logo {
  max-width: 100%;
  max-height: 52px;
  margin-bottom: 20px;
}
#login-form > .btn {
  width: 100%;
}
#login-error {
  margin-top: 12px;
  font-size: 12px;
}
#change-pass-modal {
  padding: 20px;
}
#change-pass-modal .login-card {
  width: min(100%, 360px) !important;
  padding: 24px !important;
  border-radius: 12px !important;
}
.input-group {
  margin-bottom: 16px;
  text-align: left;
}
.input-group label {
  display: block;
  margin-bottom: 6px;
  color: #405269;
  font-size: 12px;
  font-weight: 600;
}
.input-group input,
.input-group select,
.search-input,
#new-password {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #ccd7e4;
  border-radius: 7px;
  background: white;
  color: var(--text);
  font-size: 13px !important;
  font-weight: 400;
  outline: none;
}
input::placeholder {
  color: #8896a7;
  opacity: 1;
}
input:focus,
select:focus,
.search-input:focus {
  border-color: #658fb7;
  box-shadow: 0 0 0 3px #658fb71f;
}
.navbar {
  min-height: 60px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--navy);
  color: white;
}
.nav-brand {
  font-size: 15px;
  font-weight: 650;
}
.nav-user {
  font-size: 12px;
}
.navbar a {
  color: white;
}
.app-body {
  display: flex;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
}
.sidebar {
  width: 210px;
  flex-shrink: 0;
  padding: 16px 10px;
  background: white;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sidebar .tab-btn {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  background: transparent;
  color: var(--gray-dark);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.sidebar .tab-btn.active {
  background: #eaf1f8;
  color: var(--navy);
  border-color: #dbe6f1;
  font-weight: 650;
  box-shadow: inset 3px 0 var(--navy);
}
.sidebar .tab-btn:hover:not(.active) {
  background: #f3f6fa;
}
.content {
  flex: 1;
  min-width: 0;
  padding: 24px;
  overflow: auto;
}
.tab-content > h2 {
  color: var(--navy);
  margin-bottom: 5px;
}
.tab-content > p {
  color: var(--muted);
  font-size: 12px;
}
.card {
  background: white;
  padding: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px #19395805;
}
.card h3 {
  color: var(--navy);
  margin-bottom: 12px;
}
.form-card {
  padding: 22px;
}
#routing-builder {
  border-color: #cbd7e4 !important;
  border-radius: 7px !important;
  background: #f8fafc !important;
  padding: 12px !important;
}
#routing-builder > div {
  align-items: center;
  gap: 8px !important;
}
#routing-builder > div > span {
  min-width: 52px !important;
  font-size: 12px;
}
#routing-builder select {
  min-width: 0;
}
#routing-builder .btn {
  padding: 7px 10px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
}
.toolbar .search-input {
  flex: 1 1 155px;
  width: auto;
}
#matrix-table-container,
#master-list-container {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}
#master-list-container {
  overflow: auto !important;
}
.matrix-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.matrix-table th,
.matrix-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.matrix-table th {
  background: #edf2f7;
  color: var(--navy);
  font-weight: 650;
}
/* Các nhóm công đoạn có nền pastel do JS gán: chữ tối để đọc rõ. */
.matrix-table thead tr:first-child th {
  color: var(--navy);
}
.matrix-table tr:last-child td {
  border-bottom: 0;
}
.matrix-table th:last-child,
.matrix-table td:last-child {
  border-right: 0;
}
.matrix-table tbody tr:hover td {
  box-shadow: inset 0 0 0 999px #19395808;
}
.matrix-table .cell-empty {
  color: #96a3b3;
}
.matrix-table .badge-good {
  display: inline-block;
  color: var(--navy);
  font-weight: 650;
}
.matrix-table .badge-ng,
.matrix-table .badge-out {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  background: var(--maroon);
  font-size: 11px;
}
.matrix-table .badge-out {
  background: #94691b;
}
#master-list-container td {
  text-align: left;
}
#master-list-container td:nth-child(2),
#master-list-container td:nth-child(3) {
  white-space: normal;
  min-width: 140px;
  overflow-wrap: anywhere;
}
#history-table td {
  text-align: left;
}
#history-table td:nth-child(5) {
  text-align: right;
}
.has-tooltip {
  position: relative;
  cursor: help;
}
.has-tooltip:hover::after {
  content: attr(data-time);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--navy);
  color: white;
  font-size: 11px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 3px 10px #19395833;
}
.mobile-nav {
  padding: 12px 18px;
}
.tabs-mobile {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--border);
}
.tab-btn-mobile {
  flex: 1;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: white;
  color: var(--gray-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tab-btn-mobile.active {
  color: var(--navy);
  background: #f6f9fc;
  border-bottom-color: var(--navy);
}
.content-mobile {
  max-width: 760px;
  margin: 0 auto;
  padding: 18px;
}
#search-leader-po {
  padding: 9px 11px !important;
  font-weight: 400 !important;
  border-color: #ccd7e4 !important;
}
#tab-wip .card {
  border-left-color: var(--green) !important;
}
#tab-wip .card p,
#tab-wip .card h3 span {
  font-size: 13px !important;
}
#tab-wip .card .text-primary {
  font-size: 16px !important;
}
@media (max-width: 1000px) {
  .sidebar {
    width: 180px;
  }
  .content {
    padding: 18px;
  }
  #tab-master .form-card {
    min-width: 100% !important;
  }
}
@media (max-width: 640px) {
  .navbar {
    padding: 12px 14px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .nav-brand {
    font-size: 14px;
  }
  .app-body {
    height: auto;
    min-height: calc(100dvh - 60px);
    flex-direction: column;
  }
  .sidebar {
    display: flex;
    width: 100%;
    padding: 8px;
    gap: 6px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .tab-btn {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0;
    padding: 9px 11px;
    font-size: 12px;
  }
  .content,
  .content-mobile {
    padding: 14px;
  }
  .form-card {
    padding: 17px;
  }
  h2 {
    font-size: 17px;
  }
  .login-card {
    padding: 25px;
  }
  .toolbar .search-input {
    flex-basis: 100%;
  }
  .toolbar .btn {
    flex: 1 1 auto;
  }
  /* 16px cho ô nhập trên điện thoại để tránh trình duyệt tự phóng to. */
  .input-group input,
  .input-group select,
  .search-input,
  #new-password {
    font-size: 16px !important;
  }
  #routing-builder > div {
    flex-wrap: wrap;
  }
  #routing-builder select {
    flex-basis: 55% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
  body {
    background: white;
    font-size: 10px;
  }
  #login-screen,
  #leader-screen,
  .navbar,
  .sidebar,
  .toolbar {
    display: none !important;
  }
  #admin-screen {
    display: block !important;
  }
  .app-body {
    display: block;
    height: auto;
  }
  .content {
    padding: 0;
    overflow: visible;
  }
  #admin-screen .tab-content {
    display: none !important;
  }
  #admin-screen #tab-matrix {
    display: block !important;
  }
  #matrix-table-container {
    overflow: visible !important;
    border: 0;
  }
  .matrix-table {
    font-size: 9px;
  }
  .matrix-table th,
  .matrix-table td {
    padding: 4px 3px;
    font-size: 9px;
    white-space: normal;
  }
  .matrix-table thead {
    display: table-header-group;
  }
  .matrix-table tr {
    break-inside: avoid;
  }
  .has-tooltip::after {
    display: none;
  }
}

/* ====================================================
   FIX LỖI TRÀN VIỀN (OVERFLOW) TRÊN GIAO DIỆN MOBILE
   ==================================================== */

/* 1. Ép tất cả phần tử tính toán kích thước bao gồm cả padding */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Khóa vĩnh viễn thanh cuộn ngang của toàn bộ trang web */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* 3. Ép thanh Header và nội dung mobile giãn vừa khít 100% */
.mobile-nav,
.tabs-mobile,
.content-mobile {
  width: 100%;
  max-width: 100%;
}

/* 4. Fix 2 nút tab (Số lượng tồn / Thao Tác) chia đều 50/50 màn hình */
.tabs-mobile {
  display: flex;
  justify-content: space-between;
}

.tab-btn-mobile {
  flex: 1; /* Chia đều không gian */
  text-align: center;
  padding: 12px 5px;
  margin: 0;
  white-space: nowrap; /* Chống rớt chữ */
}

/* 5. Fix 2 ô chọn (Mã hàng / Số LOT) không bị phình to làm vỡ layout */
#leader-screen select {
  max-width: 100%;
  min-width: 0; /* Ép flexbox cho phép thu nhỏ ô Select */
}