#localizationWorkspace {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

#localizationContent {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#localizationActions {
  width: 180px; /* fixed width as decided */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loc-block {
  padding: 16px;
  border: 1px dashed #bbb; /* temporary visual guide */
}

.loc-grid-6col {
  display: grid;
  grid-template-columns:
    max-content 160px
    max-content 160px
    max-content 160px;
  column-gap: 48px; /* increased from 8–10 */
  row-gap: 12px;
  align-items: center;
}

.loc-grid-4col {
  display: grid;
  grid-template-columns:
    max-content 160px
    max-content 160px;
  column-gap: 48px;
  row-gap: 12px;
  align-items: center;
}

#localizationSection input {
  width: 160px;
  box-sizing: border-box;
}

.loc-block {
  padding: 16px 20px 16px 28px; /* top right bottom left */
}

#localizationActions {
  display: flex;
  flex-direction: column;
  width: 120px;
  gap: 12px; /* Base S */
}

/* Double spacing where needed */
#btnLocalizationExtract {
  margin-top: 24px; /* +1S (makes total 2S from Return) */
}

#btnLocalizationAccept {
  margin-top: 24px; /* +1S (makes total 2S from Extract) */
}

/* ================================ */
/* Localization Queue Table        */
/* ================================ */

#locQueueContainer {
  margin-top: 32px;
}

#locQueueTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

/* Header */
#locQueueTable thead {
  background: #e8edf3;
  font-weight: 600;
}

/* Cells */
#locQueueTable th,
#locQueueTable td {
  padding: 5px 8px;
  border: 1px solid #cfd6dd;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------- */
/* Column Width Strategy (Class Based) */
/* -------------------------------- */

/* Compact identifier columns */
#locQueueTable .col-key {
  width: 6%;
}
#locQueueTable .col-type {
  width: 8%;
}
#locQueueTable .col-designation {
  width: 10%;
}

/* Material moderate */
#locQueueTable .col-material {
  width: 15%;
}

/* Dimensions compact */
#locQueueTable .col-thk {
  width: 6%;
}
#locQueueTable .col-w {
  width: 6%;
}
#locQueueTable .col-l {
  width: 6%;
}

/* Numeric columns */
#locQueueTable .col-cost {
  width: 8%;
}
#locQueueTable .col-delta {
  width: 6%;
}
#locQueueTable .col-status {
  width: 8%;
}

/* Notes wide */
#locQueueTable .col-notes {
  width: 25%;
}

/* Allow wrapping for Notes only */
#locQueueTable th.col-notes,
#locQueueTable td.col-notes {
  white-space: normal;
  word-break: break-word;
}

/* -------------------------------- */
/* Row Behavior */
/* -------------------------------- */

#locQueueTable tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}

#locQueueTable tbody tr:hover {
  background: #f3f7fb;
}

/* Active row */
.loc-row-active {
  background: #fff6cc !important;
}

/* Status states */
.loc-row-complete {
  background: #e6f5ea;
}

.loc-row-skipped {
  background: #f4f4f4;
  color: #888;
}

.loc-row-pending {
  background: white;
}

.loc-delta-up {
  color: #b00020; /* red for price increase */
  font-weight: 600;
}

.loc-delta-down {
  color: #1b7a1b; /* green for price decrease */
  font-weight: 600;
}

/* ============================= */
/* Localization Snapshot Table  */
/* ============================= */

#locSnapshotBlock {
  margin-bottom: 18px;
}

#locSnapshotTable {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Compact columns (~50% feel for smaller fields) */
#locSnapshotTable .col-key {
  width: 6%;
}
#locSnapshotTable .col-type {
  width: 8%;
}
#locSnapshotTable .col-designation {
  width: 10%;
}
#locSnapshotTable .col-thk {
  width: 6%;
}
#locSnapshotTable .col-w {
  width: 6%;
}
#locSnapshotTable .col-l {
  width: 6%;
}

/* Moderate width for material */
#locSnapshotTable .col-material {
  width: 15%;
}

/* Notes takes remaining visual weight */
#locSnapshotTable .col-notes {
  width: 40%;
}

/* Cell styling */
#locSnapshotTable th,
#locSnapshotTable td {
  padding: 4px 6px; /* slightly tighter */
  border: 1px solid #cfd6dd;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header styling */
#locSnapshotTable thead {
  background: #e8edf3;
  font-weight: 600;
}

/* Snapshot data row background */
#locSnapshotRow td {
  background: #ffffff;
}

/* Allow Notes column to wrap */
#locSnapshotTable th:last-child,
#locSnapshotTable td:last-child {
  white-space: normal;
  word-break: break-word;
}

/* modifications for 8-column pricing grid */
/* 🔥 FORCE PRICING ROW GRID (override everything) */
#locPricingBlock .loc-row {
  display: grid !important;
  grid-template-columns:
    150px 90px
    150px 90px
    150px 90px
    150px 90px;
  column-gap: 20px;
  row-gap: 12px;
  align-items: center;
}

#locPricingBlock .loc-row label {
  text-align: right;
}

#locPricingBlock .loc-row input {
  width: 90px;
  text-align: right;
  box-sizing: border-box;
}

#locPricingBlock .loc-row select {
  width: 90px;
  text-align: left;
  box-sizing: border-box;
}

/* Spacer used in pricing difference row */
.hidden {
  visibility: hidden;
}

/* Ensure spacer input still occupies column width */
#locPricingBlock .loc-row input.hidden {
  width: 90px;
  display: block;
}

/* Fix dropdown alignment */
#locPricingBlock select {
  text-align: right;
  text-align-last: right;
}