/* ===== Customer Part Numbers — white/grey with #03283f accents ===== */

.cpnt-wrap {
  --cpnt-primary: #03283f;     /* your theme color */
  --cpnt-bg: #ffffff;          /* card/table background */
  --cpnt-border: #e5e7eb;      /* light grey borders */
  --cpnt-row-alt: #f7f7f7;     /* zebra alt row */
  --cpnt-row-hover: #f0f2f4;   /* row hover */
  --cpnt-header-bg: var(--cpnt-primary);
  --cpnt-header-text: #ffffff;
  --cpnt-muted: #6b7280;       /* grey-500 for small text */
  --cpnt-radius: 12px;
  --cpnt-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.06);
}

/* Force all dimension columns to right-align */
.cpnt-wrap th.dims,
.cpnt-wrap td.dims {
  text-align: right !important;
}

/* Table: white/grey */
#partNumbersTable {
  width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: calc(var(--cpnt-radius) - 2px);
}

/* Header: dark theme color */
#partNumbersTable thead th {
  background: var(--cpnt-header-bg);
  color: var(--cpnt-header-text);
  font-weight: 600;
  border-bottom: 1px solid var(--cpnt-border);
  padding: 12px 14px;
  vertical-align: middle;
}

/* Body rows: white + light grey striping, subtle hover */
#partNumbersTable tbody tr:nth-child(odd)  { background: #ffffff; }
#partNumbersTable tbody tr:nth-child(even) { background: var(--cpnt-row-alt); }
#partNumbersTable tbody tr:hover           { background: var(--cpnt-row-hover); }

#partNumbersTable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--cpnt-border);
  vertical-align: middle;
  color: #111827;
}

/* Right-align numeric columns (Length, Width, Height) 
#partNumbersTable tbody td:nth-child(3),
#partNumbersTable tbody td:nth-child(4),
#partNumbersTable tbody td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
*/

/* Consistent numeric formatting (Length, Width, Height) */
#partNumbersTable td.dims {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  font-family: inherit !important;
}





/* Allow wrapping for Product and X Values */
#partNumbersTable td:nth-child(2),
#partNumbersTable td:nth-child(7) {
  white-space: normal;
  word-break: break-word;
}

/* DataTables: length + search controls */
.cpnt-wrap .dataTables_length,
.cpnt-wrap .dataTables_filter { margin: 8px 0 14px; }

.cpnt-wrap .dataTables_length select,
.cpnt-wrap .dataTables_filter input {
  border: 1px solid var(--cpnt-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.cpnt-wrap .dataTables_filter input:focus,
.cpnt-wrap .dataTables_length select:focus {
  border-color: var(--cpnt-primary);
  box-shadow: 0 0 0 3px rgba(3,40,63,.15);
}

/* Info + pagination row */
.cpnt-wrap .dataTables_info { color: var(--cpnt-muted); font-size: 13px; padding-top: 8px; }
.cpnt-wrap .dataTables_paginate { margin-top: 8px; }

/* Pagination buttons themed */
.cpnt-wrap .dataTables_paginate .paginate_button {
  border: 1px solid var(--cpnt-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin: 0 4px !important;
  color: #111827 !important;
  background: #fff !important;
}
.cpnt-wrap .dataTables_paginate .paginate_button:hover {
  border-color: var(--cpnt-primary) !important;
  color: var(--cpnt-primary) !important;
}
.cpnt-wrap .dataTables_paginate .paginate_button.current,
.cpnt-wrap .dataTables_paginate .paginate_button.current:hover {
  background: var(--cpnt-primary) !important;
  color: #fff !important;
  border-color: var(--cpnt-primary) !important;
}

/* Action buttons inside cells */
.cpnt-wrap td form button,
.cpnt-wrap td .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cpnt-primary);
  background: var(--cpnt-primary);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .04s;
  text-decoration: none;
}
.cpnt-wrap td form button:hover,
.cpnt-wrap td .button:hover {
  filter: brightness(1.05);
}
.cpnt-wrap td form button:active,
.cpnt-wrap td .button:active {
  transform: translateY(1px);
}

/* Make "Delete" look secondary if it's a plain <button> */
.cpnt-wrap td form button[type="submit"] {
  background: #fff;
  color: #111827;
  border-color: var(--cpnt-border);
}
.cpnt-wrap td form button[type="submit"]:hover {
  border-color: var(--cpnt-primary);
  color: var(--cpnt-primary);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .cpnt-wrap .dataTables_length { float: none; }
  .cpnt-wrap .dataTables_filter { float: none; text-align: left; }
  .cpnt-wrap .dataTables_filter input { width: 100%; box-sizing: border-box; }
}

#partNumbersTable thead th {
  background: var(--cpnt-primary);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.12);
}

#partNumbersTable thead th a,
#partNumbersTable thead th span {
  color: inherit; /* keep header text white even if wrapped */
}



/* Optional: subtle hover/focus for header cells */
#partNumbersTable thead th:hover {
  background: #05344f; /* slightly lighter than #03283f */
}


/* Lock the header to your theme color + white text, even after DataTables init */
.cpnt-wrap table.dataTable thead th,
.cpnt-wrap table.dataTable thead td {
  background: #03283f !important; /* your theme color */
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.15) !important;
}

/* When DataTables adds sorting classes, keep the dark header */
.cpnt-wrap table.dataTable thead th.sorting,
.cpnt-wrap table.dataTable thead th.sorting_asc,
.cpnt-wrap table.dataTable thead th.sorting_desc,
.cpnt-wrap table.dataTable thead td.sorting,
.cpnt-wrap table.dataTable thead td.sorting_asc,
.cpnt-wrap table.dataTable thead td.sorting_desc {
  background: #03283f !important;
  color: #fff !important;
}





/* Keep header dark + white text after DT hydrates, remove default sort sprites */
.cpnt-wrap table.dataTable thead th,
.cpnt-wrap table.dataTable thead td {
  background: #03283f !important;
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.15) !important;
}


/* Round the top corners on the first/last header cells */
#partNumbersTable thead th:first-child {
  border-top-left-radius: calc(var(--cpnt-radius) - 2px);
  background-clip: padding-box;
}
#partNumbersTable thead th:last-child {
  border-top-right-radius: calc(var(--cpnt-radius) - 2px);
  background-clip: padding-box;
}


/* Controls bar sits OUTSIDE the rounded card */
.cpnt-wrap .cpnt-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

/* Keep your existing input/select theming working inside the new bar */
.cpnt-wrap .cpnt-controls .dataTables_length,
.cpnt-wrap .cpnt-controls .dataTables_filter { margin: 0; }

.cpnt-wrap .cpnt-controls select,
.cpnt-wrap .cpnt-controls input[type="search"] {
  border: 1px solid var(--cpnt-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  outline: none;
}
.cpnt-wrap .cpnt-controls input[type="search"]:focus,
.cpnt-wrap .cpnt-controls select:focus {
  border-color: var(--cpnt-primary);
  box-shadow: 0 0 0 3px rgba(3,40,63,.15);
}

/* NEW: the rounded 'card' only around the table area */
.cpnt-wrap .cpnt-card {
  background: var(--cpnt-bg);
  border: 1px solid var(--cpnt-border);
  border-radius: var(--cpnt-radius);
  box-shadow: var(--cpnt-shadow);
  overflow: hidden;           /* keeps the rounded corners crisp with scrollX */
}

/* If scrollX is on, DataTables injects these wrappers — keep them clipped */
.cpnt-wrap .cpnt-card .dataTables_scroll,
.cpnt-wrap .cpnt-card .dataTables_scrollHead,
.cpnt-wrap .cpnt-card .dataTables_scrollBody {
  overflow: hidden;
}

/* Bottom info + pagination sits outside the card */
.cpnt-wrap .cpnt-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.cpnt-wrap .cpnt-bottom .dataTables_info { color: var(--cpnt-muted); font-size: 13px; }






/* ===== Compact Table Mode ===== */

/* Smaller text across table */
#partNumbersTable,
#partNumbersTable th,
#partNumbersTable td {
  font-size: 20px !important;
  line-height: 1.5;
}

/* Compact headers & cells */

#partNumbersTable tbody td {
  padding: 6px 8px !important;
}

/* Reduce row height for better density */
#partNumbersTable tbody tr {
  height: auto !important;
}

/* Compact action buttons */
.cpnt-wrap td form button,
.cpnt-wrap td .button {
  padding: 4px 8px !important;
  font-size: 16px !important;
  border-radius: 6px !important;
}

/* Compact quantity input */
.cpnt-wrap td input[type="number"] {
  width: 55px !important;
  padding: 4px 6px !important;
  font-size: 14px !important;
}

/* GP, price, delete icons tighter spacing */
.cpnt-wrap td {
  white-space: nowrap;
}

/* Allow long product & X columns to wrap */
#partNumbersTable td:nth-child(3),
#partNumbersTable td:nth-child(8) {
  white-space: normal !important;
  max-width: 140px;
  word-break: break-word;
}



/* Add-to-cart cell layout */
.cpnt-add-ui { display:block; }
.cpnt-add-top { display:flex; gap:8px; align-items:center; }
.cpnt-qty { width:70px; }
.cpnt-add-bottom { margin-top:4px; }

.cpnt-add-status{
  display:block;
  font-size:11px;
  line-height:1.2;
  font-weight:600;
  opacity:.85;
}

/* Success styling */
.cpnt-add-btn.cpnt-added{
  background:#1f8a3b !important;
  border-color:#1f8a3b !important;
  color:#fff !important;
}

tr.cpnt-row-added td{
  background:#e9f9ee !important; /* soft green */
}