/* === GLOBAL RESET & BASE === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* ✅ prevent horizontal scroll */
  overflow-y: auto;     /* ✅ allow vertical scroll */
  background-color: #fdf8f3;
  font-family: 'Segoe UI', sans-serif;
  color: #3a2f2f;
}

body {
  display: flex;
  flex-direction: column;
}

/* === HEADER === */
.headercss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #4b2e2e;
  color: #fff;
  padding: 16px 24px;
  border-bottom: 1px solid #d8b88e;
}

.header-left h1 {
  margin: 0;
  font-size: 20px;
}

.header-left p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #f5e9dc;
}

.header-right {
  text-align: right;
}

.header-right p {
  margin: 0 0 6px;
  font-weight: 500;
}

/* === FOOTER === */
.pos-footer {
  background: #4b2e2e;
  color: #f5e9dc;
  font-size: 13px;
  padding: 8px 24px;
  border-top: 1px solid #d8b88e;
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left, .footer-right {
  line-height: 1.4;
}


/* === MAIN CONTENT === */
main {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  background: #fdf8f3;
}

/* === LAYOUT CONTAINER === */
.layout-container {
  width: 100%;
  max-width: 800px;
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
}
/* === LAYOUT CONTAINER international=== */
.layout-container_inter {
  width: 100%;
  max-width: 1024px;
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* === BUTTON TAB === */
.tab-margin-top {
  margin-top: 12px;
}


/* === GRID LAYOUT === */
.pos-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
}

.pos-left {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: visible;
}

/* .pos-right {} */

/* === SUMMARY BOX === */
.summary-box {
  position: sticky;
  top: 18px;
  background: #fff;
  border: 1px solid #d8b88e;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(11,20,35,0.04);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* === HEADINGS === */
h3, h4 {
  margin: 0 0 10px 0;
  color: #3a2f2f;
  font-weight: 600;
}

/* === FORM ELEMENTS === */
.form-group {
  margin-bottom: 12px;
}
.form-group label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: #4b2e2e;
}
input[type="text"], select, textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #d8b88e;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

/* === BUTTONS === */
button {
  background: #c9a063;
  color: #fff;
  border: none;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
button.secondary {
  background: #f5e9dc;
  color: #4b2e2e;
  border: 1px solid #d8b88e;
}

/* === TABLES === */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
thead th {
  background: #f5e9dc;
  font-weight: 700;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  color: #4b2e2e;
  border-bottom: 1px solid #d8b88e;
}
tbody td {
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid #f2f2f2;
}
td.price, td.qty, td.line-total, td.stock {
  text-align: right;
}

/* === STOCK BADGES === */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.out {
  background: #ffecec;
  color: #c0392b;
  border: 1px solid #f2c6c6;
}
.badge.low {
  background: #fff7e6;
  color: #b36b00;
  border: 1px solid #f0d7b2;
}
.badge.ok {
  background: #e9fbf0;
  color: #1e8b4b;
  border: 1px solid #cfeed4;
}

/* === ORDER SECTION === */
#order-section form {
  display: block;
}
#order-items {
  margin-top: 8px;
}
#order-section {
  margin-top: 14px;
}

/* === SUMMARY ROWS === */
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.summary-row strong {
  font-size: 16px;
  color: #4b2e2e;
}
#order-total {
  font-size: 20px;
  font-weight: 700;
  color: #4b2e2e;
}
.summary-box button {
  width: 100%;
}

/* === SEARCH RESULTS === */
.search-results-wrap {
  width: 100%;
  max-height: 184px;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d8b88e;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
  margin-top: 10px;
}
.search-results-wrap table {
  width: 100%;
  border-collapse: collapse;
}
.search-results-wrap::-webkit-scrollbar {
  width: 10px;
}
.search-results-wrap::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08);
  border-radius: 8px;
}
.search-results-wrap thead th {
  padding: 8px 10px;
}
.search-results-wrap tbody td {
  padding: 6px 10px;
}

/* === SEARCH FIELD === */
.search-wrapper {
  background: #fff;
  position: relative;
  width: 100%;
}
.search-row {
  display: flex;
  gap: 8px;
}
.search-dropdown-list {
  font-family: "Times New Roman", Times, serif;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.search-item {
  padding: 10px 14px;
  font-size: 15px;
  color: #333;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.search-item:hover {
  background-color: #f5f5f5;
}
.search-item span {
  font-weight: 500;
  font-style: italic;
}

/* === USER BAR === */
.user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5e9dc;
  border: 1px solid #d8b88e;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}
.user-info {
  color: #4b2e2e;
  font-weight: 500;
}
.user-actions button {
  padding: 8px 14px;
  font-size: 13px;
}

/* === RECEIPT LAYOUT === */
.receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 16px;
}
.receipt-left, .receipt-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* #receipt-section */

/* print button */
.print-actions {
  position: fixed;
  bottom: 80px; /* sits above footer */
  right: 24px;
  display: flex;
  gap: 12px;
  z-index: 999;
}

.print-actions button {
  background: #c9a063;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.print-actions button:hover {
  background: #b88b4f;
}


/* === TABLE SCROLL WRAPPER === */
.table-scroll {
  width: 100%;
  overflow-x: auto;
}

/* === INTERNATIONAL POS TABLE === */

#intl-items {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

#intl-items th,
#intl-items td {
  padding: 6px 8px;
  white-space: nowrap;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid #f2f2f2;
}

/* Scrollable body with fixed layout */
#intl-items tbody {
  display: block;
  max-height: 300px;
  overflow-y: auto;
}

#intl-items thead,
#intl-items tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Zebra striping and hover */
#intl-items tbody tr:nth-child(even) {
  background-color: #fdf4e7;
}

#intl-items tbody tr:hover {
  background-color: #f5e9dc;
}

/* === COLUMN WIDTHS === */
#intl-items thead th:nth-child(1),
#intl-items tbody td:nth-child(1) {
  width: 120px; /* SKU */
}

#intl-items thead th:nth-child(2),
#intl-items tbody td:nth-child(2) {
  width: 240px; /* Item name */
}

#intl-items thead th:nth-child(3),
#intl-items tbody td:nth-child(3) {
  width: 80px; /* Quantity */
}

#intl-items thead th:nth-child(4),
#intl-items tbody td:nth-child(4) {
  width: 100px; /* Unit */
}

#intl-items thead th:nth-child(5),
#intl-items tbody td:nth-child(5) {
  width: 120px; /* Price */
}

#intl-items thead th:nth-child(6),
#intl-items tbody td:nth-child(6) {
  width: 40px; /* Delete button */
}

/* === INPUT STYLING === */
#intl-items input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px;
  border: 1px solid #d8b88e;
  border-radius: 4px;
  background: #fff;
}

/* Specific input widths */
#intl-items td input[name^="quantity_"] {
  width: 60px;
}

#intl-items td input[name^="unit_"] {
  width: 80px;
}

#intl-items td input[name^="price_"] {
  width: 100px;
}

#intl-items td input[name^="item_name_"] {
  width: 100%;
  min-width: 180px;
}

/* === SEARCH DROPDOWN === */
.search-dropdown-list {
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  position: absolute;
  z-index: 1000;
  width: 100%;
}

.search-item {
  padding: 6px 10px;
  cursor: pointer;
}

.search-item:hover {
  background-color: #f0f0f0;
}

.search-item.active {
  background-color: #0078d7;
  color: white;
}

/* === HIGHLIGHTING === */
.manual-entry {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
}

.highlight {
  outline: 2px solid orange;
  transition: outline 0.3s ease;
}

/* === RESPONSIVE ADJUSTMENTS === */
@media screen and (max-width: 768px) {
  #intl-items {
    font-size: 0.9em;
  }

  #intl-items td input {
    font-size: 0.9em;
  }
}


/* for country search */
#country-results {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: white;
  position: absolute;
  z-index: 10;
  width: 100%;
}
.search-item.highlighted {
  background-color: #e0f0ff;
  cursor: pointer;
}