/* ========== RESET NHẸ & CƠ BẢN ========== */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding: 0px 20px;
}
.wrap { max-width: 1200px; margin: 0 auto; }
h2 { font-size: 1.4em; clear: both; }
h3, p { margin: 10px 0; }
.site-footer {margin: 10px 0;}
/* Link & màu nhấn */
a, a:visited {
  text-decoration: none;
  color: #0866ff;
  cursor: pointer;
}
.pointer{cursor: pointer;}
/* ========== COLORS (TEXT ONLY) ========== */
.brown {color: #A52A2A;}
.red {color: #DB4437;}
.blue {color: #0866ff;}
.green {color: #006400;}
.yellow {color: #F4B400;}
.right {text-align: right !important;}
.f_right {float: right !important;}
.left {text-align: left !important;}
.f_left {float: left !important;}
.center {text-align: center !important;}
.bold {font-weight: bold;}
.hidden { display: none; }
.highlight {background-color: #e2ecf7 !important;}
.cashbox {background-color: #e2ecf7; border: 1px solid #006400; font-size: 16pt;}
legend {font-weight: bold; text-transform: uppercase;}
/* ========== BẢNG ========== */
table { border-collapse: collapse; width: 100%; }
th, td { padding: 8px; border: 1px solid #ccc; text-align: center; }
th { background: #f2f2f2; }
tfoot td { font-weight: bold; background: #f9f9f9; }
#history_customer thead th, #history_supplier thead th , #nhapxuatTable thead th, #nhapTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
/* DataTables: zebra + căn chỉnh an toàn */
.dataTable tr:nth-child(odd) { background-color: #f7f7f7; }
.dataTable tr:nth-child(even) { background-color: #ffffff; }

/* Nếu dùng DataTables, mặc định căn trái nội dung để tránh lệch header/footer */
table.dataTable thead th,
table.dataTable tbody td,
table.dataTable tfoot th { 
  vertical-align: middle; 
}
table.dataTable tfoot th { text-align: right; } /* footer số liệu bên phải */

/* ========== FORM & INPUT ========== */
input, select { padding: 5px; margin: 5px 0; font-size: 13pt; }
input[type="date"], select, button { min-height: 36px; }
table.dataTable input, .filters input {
    padding: 8px;
    font-size: 12pt;
    border: 0px;
    margin: 0px;
}
table.dataTable .filters th, .filters th{
    padding: 0px;
}
.choices {margin-bottom: 0px;}
.choices__list--single {padding:5px;}
.choices__list[aria-expanded] .choices__item, .choices[data-type*=select-one] .choices__input, .choices[data-type*=select-one] .choices__inner, .choices__inner {
    font-size: 14pt !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: auto;
	padding: 5px !important;
}
input[readonly] {
  background-color: #e9e9e9;
  border: 1px solid #767676;
  cursor: default;
  padding: 6px;
  border-radius: 2px;
}
/* ========== NÚT ========== */
.tabs a, .tab-menu button {
  display: inline-block;
  padding: 6px;
  background: #eee;
  border: 1px solid #ccc;
  margin: 5px 5px 5px 0;
  transition: background .2s;
  cursor: pointer;
  font-size: 15px;
}
.tabs a:hover, .tab-menu button:hover { background: #ddd; }
.tabs a.active { background: #ddd; font-weight: bold; }
/* ========== alert ========== */
.alert { padding:10px; border-radius:6px; margin: 10px 0px;}
.alert-general { background:#cce5ff; color:#004085; border:1px solid #b8daff; }
.alert-danger { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.alert-warn   { background:#fff3cd; color:#856404; border:1px solid #ffeeba; }
.alert-success   { background:#d4edda; color:#155724; border:1px solid #006400; }
.alert-info   { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
.alert-dark   { background:#d6d8d9; color:#1b1e21; border:1px solid #c6c8ca; }
.larger {font-size: larger;}
/* Nút Excel của DataTables */
.dt-buttons { margin: 10px; text-align: right; }
.dt-buttons .dt-button {
  border-radius: 8px !important;
  padding: 8px 12px !important;
}
/* ========== BUTTONS (UNIFIED SYSTEM) ========== */
/* Base button class - REQUIRED for all buttons */
.btn, button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-block;
  font-size: 15px;
  margin: 5px 5px 5px 0;
  transition: all 0.2s;
  background: #e1e1e1;
  color: #212529 !important;
  border-radius: 4px;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  user-select: none;
}

/* Fix for <a> tags - override default link styles */
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active {
  text-decoration: none !important;
}

a.btn:link    { color: inherit !important; }
a.btn:visited { color: inherit !important; }
a.btn:hover   { color: inherit !important; }
a.btn:active  { color: inherit !important; }

/* High specificity override for nav and other link styles */
a.btn.btn-primary,   nav a.btn.btn-primary   { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-secondary, nav a.btn.btn-secondary { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-success,   nav a.btn.btn-success   { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-danger,    nav a.btn.btn-danger    { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-warning,   nav a.btn.btn-warning   { color: #212529 !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-info,      nav a.btn.btn-info      { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-light,     nav a.btn.btn-light     { color: #212529 !important; text-transform: none !important; font-weight: normal !important; }
a.btn.btn-dark,      nav a.btn.btn-dark      { color: white !important; text-transform: none !important; font-weight: normal !important; }
a.btn,               nav a.btn               { color: #212529 !important; text-transform: none !important; font-weight: normal !important; }

/* Button sizes */
.btn-sm { padding: 4px 8px; font-size: 12px; }
.btn-lg { padding: 12px 24px; font-size: 16px; font-weight: bold; }

/* Button variants - use with .btn base class */
.btn-primary   { background: #007bff; color: white !important; border-color: #0056b3; }
.btn-secondary { background: #6c757d; color: white !important; border-color: #545b62; }
.btn-success   { background: #28a745; color: white !important; border-color: #1e7e34; }
.btn-danger    { background: #dc3545; color: white !important; border-color: #bd2130; }
.btn-warning   { background: #ffc107; color: #212529 !important; border-color: #d39e00; }
.btn-info      { background: #17a2b8; color: white !important; border-color: #117a8b; }
.btn-light     { background: #f8f9fa; color: #212529 !important; border-color: #dae0e5; }
.btn-dark      { background: #343a40; color: white !important; border-color: #1d2124; }

/* Hover effects */
.btn:hover:not(:disabled):not(.btn-disabled) {
  opacity: 0.85;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-primary:hover:not(:disabled)   { background: #0056b3; }
.btn-secondary:hover:not(:disabled) { background: #545b62; }
.btn-success:hover:not(:disabled)   { background: #1e7e34; }
.btn-danger:hover:not(:disabled)    { background: #bd2130; }
.btn-warning:hover:not(:disabled)   { background: #d39e00; }
.btn-info:hover:not(:disabled)      { background: #117a8b; }
.btn-light:hover:not(:disabled)     { background: #dae0e5; }
.btn-dark:hover:not(:disabled)      { background: #1d2124; }

/* Disabled state */
.btn:disabled,
.btn.btn-disabled {
  background: #e9ecef !important;
  color: #6c757d !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* DEPRECATED: Old button styles - kept for backward compatibility */
/* Use .btn + variant classes instead */
.btn_red   { background: #dc3545; color: #fff; border: 1px solid #bd2130; padding: 8px 12px; transition: background .2s; display: inline-block; cursor: pointer; }
.btn_green { background: #28a745; color: #fff; border: 1px solid #1e7e34; padding: 8px 12px; transition: background .2s; display: inline-block; cursor: pointer; }
.btn_blue  { background: #007bff; color: #fff; border: 1px solid #0056b3; padding: 8px 12px; transition: background .2s; display: inline-block; cursor: pointer; }

.btn_red:hover   { background: #bd2130; }
.btn_green:hover { background: #1e7e34; }
.btn_blue:hover  { background: #0056b3; }


/* ========== KHU VỰC ĐẦU TRANG ========== */
.center { text-align: center; }
.logout { float: right; clear: both; text-align: right; font-size: 14px; }

/* ========== TABS ========== */
.tab-menu {
  position: sticky; top: 0;
  background: #fff; padding: 6px 0; border-bottom: 1px solid #eee;
  overflow-x: auto; white-space: nowrap;
}
.tablink {
  display: inline-flex; align-items: center;
  padding: 8px 12px; margin-right: 6px;
  border: 1px solid #ddd; background: #f9f9f9; border-radius: 999px;
  cursor: pointer; font-size: 14px;
}
.tablink.active { background: #ddd; }
.tabcontent { margin-top: 10px; }
.dataTables_wrapper { width: 100%; overflow-x: auto; }



/* ========== MODAL ========== */
.modalbox {
  display: none; position: fixed; top: 2%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #ccc; padding: 20px; z-index: 1000;
  box-shadow: 0 0 15px rgba(0,0,0,.3);
}
.modal-content { max-height: 60vh; overflow: auto; }


/* Các modal cụ thể: co giãn tốt trên mọi màn hình */
#modalHistoryCustomer,
#modalHistorySupplier,
#popupPhieuXuat,
#popupPhieuNhap,
#popupPhieu {
  width: min(900px, 95vw) !important;
  max-height: 90vh; overflow: auto;
  left: 50% !important; transform: translateX(-50%) !important;
  right: auto !important;
}

/* ========== FORM LỌC (3 HÀNG LOGIC) ========== */
.db-select br { display: none; } /* bỏ <br> cũ */

.db-select form {
  display: grid;
  gap: 8px 10px;
}

/* Hàng 1: label + select chi nhánh */
.db-select .row-branch {
  display: grid; align-items: center; gap: 8px 10px;
  grid-template-columns: max-content 1fr;
}

/* Hàng 2: Từ ngày – Đến ngày – nút Lọc */
.db-select .row-dates {
  display: grid; align-items: center; gap: 8px 10px;
  grid-template-columns: auto 1fr auto 1fr auto;
}
/* Mặc định: mỗi khối thành 1 dòng */
.row-branch,
.row-dates,
.row-quick {
  grid-column: 1 / -1;
}
#filterForm button[type="submit"] { margin: 5px 0px;}
.row-quick button{cursor: pointer;}
/* Hàng 3: các nút nhanh luôn đứng riêng, có thể wrap */
.row-quick { background: #fff; padding: 8px 0; overflow-x: auto; white-space: nowrap;}

/* Đảm bảo select & date giãn đầy cột (tránh bị co) */
.db-select select,
.db-select input[type="date"] { width: 100% !important; }

/* ========== MÀU NỀN HÀNG ========== */
.nhap { background: #ceffdc !important; }
.si   { background: #efffce !important; }
.thu  { background: #dcf6ff !important; }
.chi  { background: #ffeddc !important; }

/* ========== nav ========== */
nav a { text-transform: uppercase; font-weight: 600; font-size: 11.5pt; }

/* ========== RESPONSIVE ========== */
/* Điện thoại */
@media (max-width: 600px) {
  .hide_mb { display: none; }
  .row-dates input[type="date"] {
    width: 110px !important;
	font-size: 14pt;
  }
.db-select select {
    width: 100% !important;
}
  .logout { text-align: left; margin-bottom: 8px; }
  h2.center { font-size: 18px; text-align: center; line-height: 1.3; }

  /* 3 khối form tách thành 3 hàng rõ ràng */
  .db-select .row-branch,
  .db-select .row-dates,
  .db-select .row-quick { grid-column: 1 / -1; }

  .db-select .row-branch { grid-template-columns: 1fr; }
  .db-select .row-dates  { grid-template-columns: max-content max-content max-content max-content max-content; font-size: 11pt;}

  #modalHistoryCustomer,
  #modalHistorySupplier,
  #popupPhieuXuat,
  #popupPhieuNhap,
  #popupPhieu { top: 2% !important; padding: 12px !important; }

  #modalTenKhach { font-size: 16px; }
}

/* Tablet (601–900px) */
@media (min-width: 601px) and (max-width: 900px) {
  .db-select .row-branch { grid-template-columns: auto 1fr; }
  .db-select .row-dates {
    grid-template-columns: auto 1fr auto 1fr auto;
  }
}

/* Desktop (>=901px) – không bị co ô chọn chi nhánh & ngày */
@media (min-width: 901px) {
	.db-select form {
    grid-template-columns:
      max-content minmax(360px, 1fr) /* dropdown chi nhánh */
      max-content minmax(200px, 1fr) /* từ ngày */
      max-content minmax(200px, 1fr) /* đến ngày */
      max-content;                    /* nút Lọc */
  }
  .db-select .row-quick { grid-column: 1 / -1; }
  .db-select .row-branch {
    grid-template-columns: max-content minmax(360px, 640px);
    column-gap: 12px;
  }
  .db-select .row-dates {
    grid-template-columns:
      max-content minmax(240px, 320px)
      max-content minmax(240px, 320px)
      max-content;
    column-gap: 12px;
  }
  .db-select .row-dates button[type="submit"] {
    white-space: nowrap; padding-inline: 14px;
  }
  #modalNhapXuatHistory{width: 800px;}
}

/* Desktop: gộp "Chọn chi nhánh" + 2 ô ngày lên cùng một hàng */
@media (min-width: 901px) {
  /* Bỏ giới hạn khiến row-branch bị hẹp và có thể rớt dòng */
  .db-select .row-branch { max-width: none; }

  /* Trải phẳng 2 wrapper để con của chúng tham gia grid cha theo thứ tự DOM */
  .db-select .row-branch,
  .db-select .row-dates { display: contents; }

  /* Grid cha: 1 hàng gồm label+select (chi nhánh) + label+from + label+to + nút Lọc */
  .db-select form {
    grid-template-columns:
      max-content minmax(360px, 1fr)   /* Chọn chi nhánh: label + select */
      max-content minmax(240px, 320px) /* Từ ngày: label + input */
      max-content minmax(240px, 320px) /* Đến ngày: label + input */
      max-content;                     /* Nút Lọc */
    align-items: center;
    column-gap: 12px;
  }

  /* Nút Lọc không bị co */
  .db-select button[type="submit"] {
    white-space: nowrap;
    padding-inline: 14px;
    justify-self: start;
  }

  /* Hàng nút nhanh vẫn ở hàng riêng bên dưới */
  .db-select .row-quick { grid-column: 1 / -1; }
  
	table.dataTable td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px; /* hoặc giá trị phù hợp */
  }

  table.dataTable td:hover::after {
    content: attr(data-fulltext);
    position: absolute;
    background: #fff;
    color: #000;
    padding: 6px 10px;
    border: 1px solid #ccc;
    white-space: normal;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    top: 100%;
    left: 0;
    max-width: 300px;
    width: max-content;
  }

  table.dataTable td {
    position: relative;
  }
}

.form-section {
  background: var(--rbn-card);
  border: 1px solid #aaa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 20px;
}

.form-section h3 {
  margin-top: 0;
  color: #495057;
  border-bottom: 2px solid #dc3545;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  padding: 8px 0;
}

.info-item label {
  font-weight: bold;
  min-width: 120px;
  color: #495057;
}

.info-item span {
  flex: 1;
  padding-left: 10px;
}

.confirm-section {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  cursor: pointer;
}

.confirm-checkbox input[type="checkbox"] {
  margin-top: 2px;
  transform: scale(1.2);
}

.form-actions {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #dee2e6;
  margin-top: 20px;
}

.table-responsive {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}


.center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: #6c757d; }


.alert-warning {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}


.badge {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: bold;
}

.badge-success { background: #28a745; color: white; }
.badge-danger { background: #dc3545; color: white; }
.badge-info { background: #17a2b8; color: white; }
.badge-warning { background: #ffc107; color: #212529; }
.badge-default { background: #6c757d; color: white; }