/* style.css — Version 11C PDF/Header polish */

/* ===== General ===== */
.vw-calc input {
  margin: 0 6px 6px 6px;
}

#productsModal table th,
#productsModal table td {
  white-space: nowrap;
}

#itemsBody td {
  vertical-align: top;
}

/* ===== Hero Header (DLS) =====
   Solid corporate blue to match PDF header */
.hero-header {
  background: #0d47a1;
  /* deep blue */
  color: #fff;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 6px;
}

.brand-side {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}

/* Logo framed with white border (as requested) */
.brand-logo {
  position: relative;
  z-index: 3;
  height: 80px;
  width: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 4px;
  border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: .1px;
}

/* add space for contact line under title */
.brand-contacts {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 600;
}

.brand-contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .96
}

/* Small inline icons on white */
.i {
  display: inline-block;
  width: 16px;
  height: 16px;
  filter: invert(1) brightness(200%);
  opacity: .9
}

.i-phone {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 1 .58-.326h2.26c.27 0 .51.163.595.41l.83 2.49c.07.213.007.45-.16.6L6.48 6.03a10.97 10.97 0 0 0 4.49 4.49l1.53-1.279c.15-.167.388-.229.6-.16l2.49.83c.247.085.41.325.41.595v2.26a.678.678 0 0 1-.326.58c-.66.44-1.483.69-2.37.69C6.885 14.035 1.965 9.115 1.965 2.999c0-.886.25-1.71.69-2.37z"/></svg>') center/contain no-repeat;
}

.i-mail {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v.5L8 9 0 4.5V4zm0 2.236V12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6.236l-7.555 4.72a1 1 0 0 1-1.09 0L0 6.236z"/></svg>') center/contain no-repeat;
}

.i-web {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM1.668 5h12.664a6.999 6.999 0 0 0-12.664 0zm12.664 6H1.668a6.999 6.999 0 0 0 12.664 0zM1.2 6.5h13.6a7.04 7.04 0 0 1 0 3H1.2a7.04 7.04 0 0 1 0-3z"/></svg>') center/contain no-repeat;
}

/* Logged-in badge */
.login-line {
  margin-top: 6px;
  font-weight: 700;
  color: rgba(255, 255, 255, .92)
}

.login-line .user-id {
  opacity: .95;
  font-weight: 800
}

/* ===== Toolbar ===== */
.hero-toolbar {
  background: #4EB8C8;
}

.toolbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar-actions button {
  margin-right: 8px;
  background: #fff;
  color: #0d47a1;
  border: 1px solid #244;
  padding: 6px 5px;
  border-radius: 8px;
  cursor: pointer;
}

.toolbar-actions button:hover {
  background: #fff
}

/* ===== Tables (on-screen) =====
   Light blue header with dark text to reflect PDF */
table thead th {
  background: #e6f2ff;
  /* light blue */
  color: #0d2a4d;
  /* dark text */
  border-bottom: 2px solid #bcd7ff;
}

/* ✅ FIX: compact table rows, remove large grey spacing */
table td,
table th {
  padding: 6px 8px;
  /* normal compact padding */
  border-bottom: 1px solid #eee;
  /* thin divider */
}

table tr:last-child td {
  border-bottom: none;
  /* no border on last row */
}

/* Responsive */
@media (max-width:720px) {
  .brand-side {
    align-items: flex-start
  }

  .brand-logo {
    height: 68px;
    width: 148px
  }

  .brand-title {
    font-size: 1.05rem
  }

  .brand-contacts {
    gap: 6px
  }
}

/* Ensure dialogs appear above everything */
dialog {
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 1200px;
  margin: auto;
  padding: 0;
  z-index: 9999;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

/* Use almost the full viewport width, no extra max cap */
#clientsModal {
  width: 90vw;
  /* nearly full screen width */
  max-width: none;
  /* don't cap it elsewhere */
  height: calc(100vh - 10rem);
  /* tall but not off-screen */
  max-height: none;
  overflow: auto;
  /* internal scrolling if needed (vertical) */
}

/* Products modal too (if you have one) */
#productsModal {
  width: 90vw;
  max-width: none;
  height: calc(100vh - 10rem);
  max-height: none;
  overflow: auto;
}

/* Ensure inner containers don’t cap width */
#clientsModal form,
#clientsModal .card,
#productsModal form,
#productsModal .card {
  width: 100%;
  max-width: none;
}

/* Make the table flex to the dialog width instead of forcing h-scroll */
#clientsModal table {
  width: 100%;
  table-layout: auto;
  /* let columns size naturally */
}

/* Allow long content to wrap so it doesn’t force horizontal overflow */
#clientsModal th,
#clientsModal td {
  white-space: normal;
  /* wrap multi-word and long strings */
  word-break: break-word;
  /* wrap long tokens if needed */
}

/* Optional: tighten cell padding a bit to gain width */
#clientsModal table th,
#clientsModal table td {
  padding: 6px 8px;
}


/* Sender card */
/* ===== Sender card (scoped) ===== */
#senderCard>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

#senderCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#senderCard input[type="text"],
#senderCard input[type="tel"],
#senderCard input[type="number"],
#senderCard select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#senderCard input:focus,
#senderCard select:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Specific rows as grids */
#senderRowContact,
#senderRowAddress,
#senderRowCoords,
#senderRowCoords2,
#senderQrRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 16px;
}

/* Make the “Choose Sender” select span full width */
#senderSelect {
  width: 100%;
}

/* Button only inside Sender card */
#senderCard #refreshQrBtnSender {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #0d47a1;
  background: #0d47a1;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  align-self: end;
  /* aligns with bottom of inputs in same row */
}

#senderCard #refreshQrBtnSender:hover {
  filter: brightness(1.05);
}

/* QR box (sender-only) */
#senderCard #qrBoxSender {
  min-height: 130px;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: #fafafa;
}


/* Client card */

/* --- Scope everything to the Client card --- */
#clientCard>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

/* Labels & fields */
#clientCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* space between label text and input */
  font-size: 14px;
}

#clientCard input[type="text"],
#clientCard input[type="tel"],
#clientCard input[type="number"],
#clientCard select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#clientCard input:focus,
#clientCard select:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Grids for specific rows (IDs) */
#clientRowContact,
#clientRowCoords,
#deliveryRowCoords,
#clientQrRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  /* row gap / column gap */
  margin-top: 16px;
}

#clientRowAddress {
  margin-top: 16px;
}

#clientDeliveryAddress {
  margin-top: 16px;
}



/* Make selects span full width nicely */
#clientSelect,
#deliverySelect {
  width: 100%;
}

/* Button (only inside client card) */
#clientCard #refreshQrBtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #0d47a1;
  background: #0d47a1;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  align-self: end;
  /* aligns with bottom of inputs in the same row */
}

#clientCard #refreshQrBtn:hover {
  filter: brightness(1.05);
}

/* QR box styling (client-only) */
#clientCard #qrBox {
  min-height: 130px;
  /* keeps your inline min-height if you want */
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: #fafafa;
}


/* --- 1) Make all inputs inside the cards get the rounded styling, 
       even when type="" is omitted --- */

/* Client */
#clientCard input,
#clientCard select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#clientCard input:focus,
#clientCard select:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Sender */
#senderCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#senderCard input,
#senderCard select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#senderCard input:focus,
#senderCard select:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Sender grid rows (explicit IDs so nothing else is touched) */
#senderRowContact,
#senderRowAddress,
#senderRowCoords,
#senderQrRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-top: 16px;
}

/* Make selects span full width */
#senderSelect {
  width: 100%;
}

/* --- 2) Align both "Refresh QR" buttons horizontally --- */
/* Remove the inline margin in HTML and rely on align-self here */
#senderCard #refreshQrBtnSender,
#clientCard #refreshQrBtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #0d47a1;
  background: #0d47a1;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0;
  /* override any inline */
  align-self: end;
  /* sit on the same baseline as the inputs */
}

#senderCard #refreshQrBtnSender:hover,
#clientCard #refreshQrBtn:hover {
  filter: brightness(1.05);
}

/* --- 3) Add a bit of space between the top meta card and the grid below --- */
section.card+section.grid {
  margin-top: 20px;
}

/* If you want the two columns to breathe a bit more */
section.grid.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}


/* Meta bar styles (scoped) */
#metaCard .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}

#metaCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#metaCard input {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#metaCard input:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* A bit of breathing room below meta before the cards */
#metaCard {
  margin-bottom: 20px;
}


/* Equalize field-stack height so the buttons align horizontally */
#senderFields,
#clientFields {
  min-height: 550px;
}

/* Keep the action rows neat */
#senderActions,
#clientActions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

/* Button look + bottom alignment within the action row */
#senderActions button,
#clientActions button,
#senderCard #refreshQrBtnSender,
#clientCard #refreshQrBtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #0d47a1;
  background: #0d47a1;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  align-self: end;
  /* aligns to the bottom of the row */
  margin-top: 0;
  /* ensure no stray margins */
}

#senderActions button:hover,
#clientActions button:hover {
  filter: brightness(1.05);
}


/* ===== Dates & Trailer (scoped) ===== */
#datesCard>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

#datesCard .row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}

#datesCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#datesCard input[type="date"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#datesCard input[type="date"]:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Trailer group */
#trailerGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#trailerGroup>strong {
  font-size: 14px;
  color: #374151;
}

/* Pills layout */
#trailerGroup .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Customizable size via CSS variable */
#trailerGroup {
  --pill: 56px;
}

/* try 56–64px to taste */

#trailerGroup .radio-pill {
  display: inline-flex;
  flex: 0 0 auto;
  /* don't stretch/squash */
  width: var(--pill);
  height: var(--pill);
  border: 1px solid #d1d5db;
  border-radius: 50%;
  /* perfect circle */
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  text-align: center;
  font-size: 12px;
  /* helps “2.5m” fit */
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
}

/* Stack radio over text so it centers nicely */
#trailerGroup .radio-pill {
  flex-direction: column;
}

/* Custom radio look (keeps it accessible) */
#trailerGroup .radio-pill input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #9ca3af;
  border-radius: 50%;
  position: relative;
  margin: 0;
  /* avoid layout nudge */
}

#trailerGroup .radio-pill input[type="radio"]:checked {
  border-color: #0d47a1;
}

#trailerGroup .radio-pill input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #0d47a1;
}

/* Selected-state for the whole pill */
#trailerGroup .radio-pill:has(input[type="radio"]:checked) {
  border-color: #0d47a1;
  background: rgba(99, 102, 241, .06);
}

/* Keyboard focus ring */
#trailerGroup .radio-pill input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
  border-color: #0d47a1;
}


/* Small UX touch: pointer cursor over the whole label */
#datesCard label {
  cursor: pointer;
}


/* ===== Products (scoped) ===== */
#productsCard>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

/* Inputs/selects look like the rest */
#productsCard label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#productsCard input,
#productsCard select {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#productsCard input:focus,
#productsCard select:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Grid: fields + button */
#productsRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

/* Make Qty narrower on wide screens */
@media (min-width: 900px) {
  #qtyInput {
    max-width: 140px;
  }

  #unitWeight {
    max-width: 200px;
  }
}

/* Add Item button */
#addItemBtn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #0d47a1;
  background: #0d47a1;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

#addItemBtn:hover {
  filter: brightness(1.05);
}

/* Table area */
.table-wrap {
  overflow-x: auto;
  /* responsive */
  margin-top: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

#productsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  /* keeps columns readable */
  font-size: 14px;
}

#productsTable thead th {
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

#productsTable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

/* Zebra rows */
#productsTable tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

/* Rounded corners for the table */
#productsTable thead th:first-child {
  border-top-left-radius: 10px;
}

#productsTable thead th:last-child {
  border-top-right-radius: 10px;
}

#productsTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

#productsTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Numeric columns right-align */
/* #productsTable td:nth-child(4),
#productsTable td:nth-child(5),
#productsTable td:nth-child(6) {
  text-align: right;
} */

/* Action buttons inside the table (e.g., Remove) */
#productsTable .btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
}

#productsTable .btn:hover {
  background: #f3f4f6;
}

#productsTable .btn.danger {
  border-color: #ef4444;
  color: #ef4444;
}

#productsTable .btn.danger:hover {
  background: #fee2e2;
}

/* Force ALL body cells to be left-aligned */
#productsTable tbody td {
  text-align: left !important;
}

#productsTable tbody td:last-child {
  text-align: left;
  /* or center */
}



/* Totals box */
#totalsBox {
  margin-top: 10px;
  color: #6b7280;
  font-size: 13px;
}

/* Barcode canvas container */
#barcodeWrap {
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
}

/* Optional: make the “Add Item” sit on the same baseline as inputs if needed */
#productsRow .align-end {
  align-self: end;
}


/* ===== Signatures (scoped) ===== */
#signaturesSection {
  gap: 16px 20px;
  /* a touch more space between the three cards */
}

/* Card headings */
#signaturesSection .card>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}

/* Two-field grid inside each card (stacks on small, 2 cols on wider) */
#signaturesSection .sig-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* mobile */
  gap: 12px 16px;
}

@media (min-width: 700px) {
  #signaturesSection .sig-grid {
    grid-template-columns: 1.2fr 0.8fr;
    /* name a bit wider than date */
  }
}

/* Labels + inputs match the rest of your UI */
#signaturesSection label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

#signaturesSection input[type="text"],
#signaturesSection input[type="date"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#signaturesSection input[type="text"]:focus,
#signaturesSection input[type="date"]:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

/* Optional signature box style (for future canvas or drawn signature) */
#signaturesSection .sig-box {
  margin-top: 12px;
  min-height: 110px;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 13px;
}

/* ===== Toolbar (scoped) ===== */
#toolbarCard {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 16px;
}

#toolbarCard button {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Primary & secondary styles */
#submitWaybillBtn {
  border-color: #0d47a1;
  background: #0d47a1;
  color: #fff;
}

#submitWaybillBtn:hover {
  filter: brightness(1.3);
}

#previewBtn {
  border-color: #d1d5db;
  background: #fff;
  color: #111827;
}

#previewBtn:hover {
  background: #f3f4f6;
}

/* Keyboard focus */
#toolbarCard button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

/* ===== Waybill Records — visual polish ===== */
#recordsCard {
  /* subtle separation from what precedes it */
  margin-top: 16px;
}

/* Table wrapper keeps things responsive */
#recordsCard .table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* Table base */
#recordsTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
  /* keeps columns readable */
  font-size: 14px;
}

/* Sticky header for long lists */
#recordsTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}

/* Body cells */
#recordsTable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #111827;
}

/* Zebra + hover */
#recordsTable tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

#recordsTable tbody tr:hover td {
  background: #f6f8ff;
}

/* Rounded corners on first/last rows */
#recordsTable thead th:first-child {
  border-top-left-radius: 10px;
}

#recordsTable thead th:last-child {
  border-top-right-radius: 10px;
}

#recordsTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

#recordsTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Column alignment & widths */
#recordsTable td:nth-child(4),
/* Items */
#recordsTable td:nth-child(5) {
  /* Weight */
  text-align: right;
  white-space: nowrap;
}

#recordsTable td:nth-child(2) {
  /* Waybill No */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#recordsTable td:nth-child(1) {
  /* Created At */
  white-space: nowrap;
  color: #374151;
}

/* Action buttons inside table (Edit / View / Delete etc.) */
#recordsTable .btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}

#recordsTable .btn+.btn {
  margin-left: 6px;
}

#recordsTable .btn:hover {
  background: #f3f4f6;
}

#recordsTable .btn.primary {
  border-color: #6366f1;
  color: #fff;
  background: #6366f1;
}

#recordsTable .btn.primary:hover {
  filter: brightness(1.05);
}

#recordsTable .btn.danger {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff;
}

#recordsTable .btn.danger:hover {
  background: #fee2e2;
}

/* Empty state — centered and friendly */
#recordsEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin-top: 8px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  background: #fafafa;
}

/* Show/hide logic via class */
#recordsTable.hidden {
  display: none;
}

#recordsTable:not(.hidden)~#recordsEmpty {
  display: none;
}

/* Optional compact mode:
   Add class 'compact' to #recordsCard to tighten rows a bit */
#recordsCard.compact #recordsTable thead th {
  padding: 10px 12px;
}

#recordsCard.compact #recordsTable tbody td {
  padding: 8px 12px;
}


/* Base style for action buttons in the Records table */
#recordsTable tbody td:last-child button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, filter .12s ease;
}

/* Spacing between multiple buttons in the Action cell */
#recordsTable tbody td:last-child button+button {
  margin-left: 6px;
}

/* Keyboard focus */
#recordsTable tbody td:last-child button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
  border-color: #6366f1;
}

/* Variants using your existing classes */
#recordsTable .viewBtn {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

#recordsTable .viewBtn:hover {
  filter: brightness(1.05);
}

#recordsTable .delBtn {
  border-color: #ef4444;
  background: #fff;
  color: #ef4444;
}

#recordsTable .delBtn:hover {
  background: #fee2e2;
}

/* Disabled/loading state (optional class you can toggle in JS) */
#recordsTable .is-loading {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}



/* ===== Admin Portal (scoped) ===== */
#adminPanel {
  margin-top: 20px;
}

#adminPanel>h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}

#adminHint {
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 13px;
}

#adminPanel .admin-toolbar {
  gap: 10px;
  margin: 8px 0;
}

#adminPanel .admin-toolbar button,
#recyclePanel .admin-toolbar button,
#counterPanel button {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
}

#adminPanel .admin-toolbar button:hover,
#recyclePanel .admin-toolbar button:hover,
#counterPanel button:hover {
  background: #f3f4f6;
}

/* Primary accents for key actions */
#toggleRecycleBtn,
#exportAllCsvBtn,
#purgeExpiredBtn {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

#toggleRecycleBtn:hover,
#exportAllCsvBtn:hover,
#purgeExpiredBtn:hover {
  filter: brightness(1.05);
}

/* Focus ring */
#adminPanel button:focus-visible,
#recyclePanel button:focus-visible,
#counterPanel button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}

/* Tables (admin & recycle) */
#adminPanel .table-wrap,
#recyclePanel .table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

#adminTable,
#recycleTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 820px;
  font-size: 14px;
}

#adminTable thead th,
#recycleTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
}

#adminTable tbody td,
#recycleTable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #111827;
}

#adminTable tbody tr:nth-child(odd) td,
#recycleTable tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

#adminTable tbody tr:hover td,
#recycleTable tbody tr:hover td {
  background: #f6f8ff;
}

/* Rounded corners */
#adminTable thead th:first-child,
#recycleTable thead th:first-child {
  border-top-left-radius: 10px;
}

#adminTable thead th:last-child,
#recycleTable thead th:last-child {
  border-top-right-radius: 10px;
}

#adminTable tbody tr:last-child td:first-child,
#recycleTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

#adminTable tbody tr:last-child td:last-child,
#recycleTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* Numeric-ish column alignment */
#adminTable td:nth-child(5),
#adminTable td:nth-child(6),
#recycleTable td:nth-child(5),
#recycleTable td:nth-child(6),
#recycleTable td:nth-child(8) {
  text-align: right;
  white-space: nowrap;
}

#adminTable td:nth-child(1),
#recycleTable td:nth-child(1),
#adminTable td:nth-child(2),
#recycleTable td:nth-child(2) {
  white-space: nowrap;
}

/* Empty states */
#adminEmpty,
#recycleEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin-top: 8px;
  border: 1px dashed #e5e7eb;
  border-radius: 10px;
  color: #6b7280;
  font-size: 13px;
  background: #fafafa;
}

/* Hide empty when table visible */
#adminTable.hidden+#adminEmpty {
  display: flex;
}

#adminTable:not(.hidden)+#adminEmpty {
  display: none;
}

#recycleTable.hidden+#recycleEmpty {
  display: flex;
}

#recycleTable:not(.hidden)+#recycleEmpty {
  display: none;
}

/* Action buttons inside table (View/Delete/etc.) */
#adminTable tbody td:last-child button,
#recycleTable tbody td:last-child button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, filter .12s ease;
}

#adminTable tbody td:last-child button+button,
#recycleTable tbody td:last-child button+button {
  margin-left: 6px;
}

#adminTable tbody td:last-child button:focus-visible,
#recycleTable tbody td:last-child button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
  border-color: #6366f1;
}

/* Variants */
#adminTable .viewBtn,
#recycleTable .viewBtn {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

#adminTable .viewBtn:hover,
#recycleTable .viewBtn:hover {
  filter: brightness(1.05);
}

#adminTable .delBtn,
#recycleTable .delBtn {
  border-color: #ef4444;
  color: #ef4444;
  background: #fff;
}

#adminTable .delBtn:hover,
#recycleTable .delBtn:hover {
  background: #fee2e2;
}

/* ===== Waybill Number Control ===== */
#counterPanel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

#counterPanel>h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
}

#counterPanel p {
  margin: 0 0 10px;
  color: #374151;
}

#counterPanel .counter-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px 12px;
  align-items: end;
}

#counterPanel label {
  font-size: 14px;
  color: #374151;
}

#counterPanel input[type="number"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#counterPanel input[type="number"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}


/* Make admin action rows behave like a compact toolbar (not a grid) */
#adminPanel .admin-toolbar {
  display: flex;
  /* override .row grid */
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

/* Match the size/feel of Preview/Submit buttons */
#adminPanel .admin-toolbar button {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  width: auto;
  /* prevent full-width stretch */
  min-width: 140px;
  /* similar footprint to toolbar buttons */
  white-space: nowrap;
}

/* Keep your primary accent for these actions */
#toggleRecycleBtn,
#exportAllCsvBtn {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

#toggleRecycleBtn:hover,
#exportAllCsvBtn:hover {
  filter: brightness(1.05);
}

/* Match heading style to "Waybill Records" */
#adminPanel>h3 {
  margin: 0 0 12px 0;
  /* same spacing */
  font-size: 18px;
  /* same size */
  font-weight: 600;
  /* same weight */
}


/* Force admin action rows to behave like a compact toolbar */
#adminPanel .row.admin-toolbar {
  display: flex !important;
  /* override any .row grid */
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: none !important;
  /* in case grid props linger */
}

/* Make the buttons compact like the top toolbar */
#adminPanel .row.admin-toolbar>button,
#adminPanel .row.admin-toolbar>*>button {
  flex: 0 0 auto !important;
  /* never stretch */
  width: auto !important;
  /* ignore any width:100% */
  min-width: 140px;
  /* same feel as Preview/Submit */
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  cursor: pointer;
}

/* Primary accent (kept) */
#toggleRecycleBtn,
#exportAllCsvBtn {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
}

#toggleRecycleBtn:hover,
#exportAllCsvBtn:hover {
  filter: brightness(1.05);
}

/* Match the heading to "Waybill Records" */
#adminPanel>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
}


/* Make .hidden actually hide things everywhere */
.hidden {
  display: none !important;
}

/* If the table is visible (not .hidden), hide the empty message (works regardless of element order) */
#recordsCard:has(#recordsTable:not(.hidden)) #recordsEmpty {
  display: none;
}


/* Make .hidden actually hide, everywhere */
.hidden {
  display: none !important;
}

/* Hide admin empty state when the table is visible */
#adminPanel:has(#adminTable:not(.hidden)) #adminEmpty {
  display: none;
}

/* (While here) Do the same for Recycle Bin */
#recyclePanel:has(#recycleTable:not(.hidden)) #recycleEmpty {
  display: none;
}


/* =========================
   Senders Modal — match cards
   ========================= */
#sendersModal {
  width: 90vw;
  /* like clients/products modal */
  max-width: none;
  height: calc(100vh - 10rem);
  max-height: none;
  overflow: auto;
  /* internal scroll */
  padding: 0;
  border: none;
  border-radius: 12px;
}

#sendersModal::backdrop {
  background: rgba(0, 0, 0, .4);
}

/* Card shell inside the modal matches your cards */
#sendersModal .card {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  border: 1px solid #e5e7eb;
}

#sendersModal .card>h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  /* same as cards */
  font-weight: 600;
}

/* ----- Form layout (fixes overlap) ----- */
#sendersModal .row {
  display: grid;
  /* switch from flex -> grid */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  /* (row, col) gap like cards */
  margin-bottom: 12px;
}

#sendersModal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  /* match card labels */
  color: #374151;
}

/* Inputs consistent with Sender/Client cards */
#sendersModal input[type="text"],
#sendersModal input[type="number"],
#sendersModal input[type="tel"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #111827;
}

#sendersModal input:focus {
  border-color: #0d47a1;
  /* your blue */
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .15);
  /* same style as cards */
}

/* ----- Buttons row (match toolbar/card buttons) ----- */
#sendersModal .row.buttons-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 2px;
}

#sendersModal .row.buttons-row .btn,
#sendersModal #saveSenderBtn,
#sendersModal #saveCloseSendersBtn,
#sendersModal #closeSendersBtn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-weight: 600;
}

#sendersModal #saveSenderBtn,
#sendersModal #saveCloseSendersBtn {
  border-color: #0d47a1;
  background: #0d47a1;
  color: #fff;
}

#sendersModal .row.buttons-row button:hover {
  filter: brightness(1.05);
}

#sendersModal .row.buttons-row button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .25);
}

/* ----- Table (light, like Records/Admin) ----- */
#sendersModal .table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

#sendersModal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  /* prevent cramped columns / overflow */
  font-size: 14px;
}

#sendersModal thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  /* same header tone */
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#sendersModal tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #111827;
  white-space: normal;
  /* allow wrapping to avoid overflow */
  word-break: break-word;
}

#sendersModal tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

#sendersModal tbody tr:hover td {
  background: #f6f8ff;
}

/* Action buttons inside table */
#sendersModal tbody td button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#sendersModal tbody td button+button {
  margin-left: 6px;
}

#sendersModal tbody td button:hover {
  background: #f3f4f6;
}



/* =========================================================
   Clients Modal — white/black theme with #0d47a1 highlights
   ========================================================= */
#clientsModal {
  width: 90vw;
  height: calc(100vh - 10rem);
  overflow: auto;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
}

#clientsModal::backdrop {
  background: rgba(0, 0, 0, .4);
}

/* Card shell */
#clientsModal .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* Heading */
#clientsModal h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* Grid rows (prevents overlap) */
#clientsModal .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
  margin-bottom: 12px;
}

#clientsModal .row.row-compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#clientsModal .row.align-end>* {
  align-self: end;
}

/* for Add button cell */

/* Labels & inputs */
#clientsModal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

#clientsModal input[type="text"],
#clientsModal input[type="number"],
#clientsModal input[type="tel"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  /* black-ish line in your UI */
  border-radius: 8px;
  background: #fff;
  color: #111827;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#clientsModal input:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .15);
}

#clientsModal input::placeholder {
  color: #6b7280;
}

/* Fieldset blocks (replaces inline styles) */
#clientsModal .fs-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  margin: 2px 0 12px 0;
}

#clientsModal .fs-block>legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* Buttons */
#clientsModal .buttons-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

#clientsModal .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
}

#clientsModal .btn:hover {
  background: #f3f4f6;
}

#clientsModal .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .25);
}

#clientsModal .btn.primary {
  background: #0d47a1;
  border-color: #0d47a1;
  color: #fff;
}

#clientsModal .btn-cell {
  display: flex;
  align-items: center;
}

/* Tables */
#clientsModal .table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  overflow-x: auto;
}

#clientsModal .table-wrap.table-compact {
  margin-top: 10px;
}

#clientsModal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  /* avoid cramped columns */
  font-size: 14px;
}

#clientsModal thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#clientsModal tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #111827;
  white-space: normal;
  /* wrap to avoid overflow */
  word-break: break-word;
}

#clientsModal tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

#clientsModal tbody tr:hover td {
  background: #f6f8ff;
}

/* Action buttons inside table (Edit/Delete) */
#clientsModal tbody td button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#clientsModal tbody td button+button {
  margin-left: 6px;
}

#clientsModal tbody td button:hover {
  background: #f3f4f6;
}

/* Solid backgrounds so empty tables don't look translucent */
#clientsModal .table-wrap table,
#clientsModal .table-wrap thead,
#clientsModal .table-wrap tbody,
#clientsModal .table-wrap tr,
#clientsModal .table-wrap th,
#clientsModal .table-wrap td {
  background: #fff;
}

/* When tbody is empty, keep it white and collapse any ghost height */
#clientsModal .table-wrap tbody:empty {
  display: block;
  /* creates a real box to paint white */
  min-height: 0;
  height: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

#clientsModal .table-wrap tbody:empty::after {
  content: "";
  /* ensures the block paints */
  display: block;
  height: 1px;
  /* 1px so borders/sticky header render cleanly */
}

/* Do the same for Senders, so they match exactly */
#sendersModal .table-wrap table,
#sendersModal .table-wrap thead,
#sendersModal .table-wrap tbody,
#sendersModal .table-wrap tr,
#sendersModal .table-wrap th,
#sendersModal .table-wrap td {
  background: #fff;
}

#sendersModal .table-wrap tbody:empty {
  display: block;
  min-height: 0;
  height: 0;
}

#sendersModal .table-wrap tbody:empty::after {
  content: "";
  display: block;
  height: 1px;
}


/* =========================================================
   Products Modal — white/black theme with #0d47a1 accents
   ========================================================= */
#productsModal {
  width: 90vw;
  height: calc(100vh - 10rem);
  overflow: auto;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
}

#productsModal::backdrop {
  background: rgba(0, 0, 0, .4);
}

/* Card shell */
#productsModal .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

/* Heading */
#productsModal h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

/* Grid rows (prevents overlap) */
#productsModal .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
  margin-bottom: 12px;
}

#productsModal .row.row-compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Labels & inputs */
#productsModal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

#productsModal input[type="text"],
#productsModal input[type="number"],
#productsModal input[type="tel"] {
  height: 36px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

#productsModal input:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .15);
}

#productsModal input::placeholder {
  color: #6b7280;
}

/* Fieldset section (Weights) */
#productsModal .fs-block {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  margin: 2px 0 12px 0;
}

#productsModal .fs-block>legend {
  padding: 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

/* Volumetric calculator */
#productsModal .vw-wrap {
  align-self: end;
}

#productsModal .vw-details summary {
  cursor: pointer;
  list-style: none;
  /* remove default marker */
  font-weight: 700;
  color: #0d47a1;
}

#productsModal .vw-details summary::-webkit-details-marker {
  display: none;
}

#productsModal .vw-details[open] summary {
  color: #0b3d8b;
}

#productsModal .vw-calc {
  display: grid;
  grid-template-columns: repeat(11, auto);
  align-items: center;
  gap: 8px;
  padding: 10px 0 0 0;
}

#productsModal .vw-calc span {
  font-size: 13px;
  color: #374151;
}

#productsModal .vw-calc input {
  width: 90px;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

#productsModal .vw-calc input:focus {
  border-color: #0d47a1;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .12);
}

/* Buttons */
#productsModal .buttons-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

#productsModal .btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
}

#productsModal .btn:hover {
  background: #f3f4f6;
}

#productsModal .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 71, 161, .25);
}

#productsModal .btn.primary {
  background: #0d47a1;
  border-color: #0d47a1;
  color: #fff;
}

/* Table */
#productsModal .table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
  overflow-x: auto;
}

#productsModal table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 14px;
}

#productsModal thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  text-align: left;
  font-weight: 600;
  color: #111827;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}

#productsModal tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #111827;
  white-space: normal;
  word-break: break-word;
}

#productsModal tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

#productsModal tbody tr:hover td {
  background: #f6f8ff;
}

/* Action buttons inside table (Edit/Delete) */
#productsModal tbody td button {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

#productsModal tbody td button+button {
  margin-left: 6px;
}

#productsModal tbody td button:hover {
  background: #f3f4f6;
}

/* Fix translucent look when table is empty (solid white) */
#productsModal .table-wrap table,
#productsModal .table-wrap thead,
#productsModal .table-wrap tbody,
#productsModal .table-wrap tr,
#productsModal .table-wrap th,
#productsModal .table-wrap td {
  background: #fff;
}

#productsModal .table-wrap tbody:empty {
  display: block;
  min-height: 0;
  height: 0;
}

#productsModal .table-wrap tbody:empty::after {
  content: "";
  display: block;
  height: 1px;
}


#adminPanel .editBtn,
#adminPanel .delBtn {
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  cursor: pointer;
}

#adminPanel .editBtn:hover,
#adminPanel .delBtn:hover {
  background: #f3f4f6;
}