#containerLocationPanel { display: grid; gap: 0.85rem; padding: 1.2rem; min-width: 0; }
#containerLocationPanel label { display: grid; gap: 0.35rem; min-width: 0; }
#containerLocationPanel input, #containerLocationPanel select { width: 100%; min-width: 0; padding: 0.65rem; box-sizing: border-box; }
#containerLocationPanel details { padding: 0.75rem 0; }
#containerLocationPanel details > label { margin-top: 0.75rem; }
#containerLocationPanel button { justify-self: start; margin-top: 0.4rem; }
#containerLocationPanel .table-wrapper { overflow-x: auto; }
#containerLocationPanel table { width: 100%; min-width: 600px; }
#clPreviewRows { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 20rem; overflow-y: auto; }
#clPreviewRows table { min-width: 1400px; white-space: normal; }
#clPreviewRows th, #clPreviewRows td { padding: 0.6rem; text-align: left; vertical-align: top; }
#containerLocationSummary, #containerInheritedLocation { overflow-wrap: anywhere; }

/* Isolated workspace: never fit the history into the former side column. */
#fuelContainersSection .container-view[hidden] { display: none !important; }
#fuelContainersSection .container-view { min-width: 0; width: 100%; display: grid; gap: 16px; }
#fuelContainersSection .container-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
#fuelContainersSection .container-tabs button { padding: 12px 18px; border: 1px solid #52647f; border-radius: 10px; color: #e7edf7; background: #17243a; cursor: pointer; }
#fuelContainersSection .container-tabs button[aria-pressed="true"] { background: #2159d7; border-color: #84afff; }
#fuelContainersSection :is(button,input,select,summary):focus-visible { outline: 3px solid #8dbaff; outline-offset: 3px; }
#fuelContainersSection button:disabled { opacity: .48; cursor: not-allowed; }
#fuelContainersSection .container-admin-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
#containerNewView > .card { width: 100%; max-width: 780px; }
#clReconciliationCard { display: grid; gap: 12px; padding: 20px; }
#clReconciliationCard > :is(h3,p), .cl-confirmation p, #clConditions { margin: 4px 0; }
.cl-selection-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-selection-actions button { width: auto; }
#clReconciliationCard :is(input,select), #containerLocationPanel :is(input,select) { padding: 10px; color: #edf3ff; background: #202f44; border: 1px solid #52647f; border-radius: 8px; box-sizing: border-box; }
#clReconciliationCard label { display: grid; gap: 6px; }
.cl-target-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.cl-confirmation { background: #15233a; padding: 14px; border: 1px solid #536785; border-radius: 10px; }
#clConditions { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; }
#clSelectedSummary { position: sticky; top: 0; z-index: 4; background: #162d4a; padding: 12px; border-radius: 8px; font-weight: 600; }
.cl-table-summary { position: sticky; top: 0; z-index: 5; background: #162d4a; padding: 12px; border-radius: 8px; }
#fuelContainersSection #containerHistoryView .table-wrapper { overflow: auto; max-height: 65vh; max-width: 100%; min-width: 0; }
#fuelContainersSection #containerHistoryView .table-wrapper::-webkit-scrollbar { height: 12px; width: 12px; }
#fuelContainersSection #containerHistoryView .table-wrapper::-webkit-scrollbar-thumb { background: #6884ad; border-radius: 8px; }
#fuelContainersSection #containerHistoryView .table-wrapper:focus-visible { outline: 3px solid #8dbaff; outline-offset: 2px; }
#containerLocationsView .table-wrapper { overflow-x: auto; }
#fuelContainersSection #containerLocationsView table { min-width: 700px; table-layout: auto; }
#fuelContainersSection #containerHistoryView table { width: max-content; min-width: 1700px; table-layout: auto; }
#fuelContainersSection #containerHistoryView th { position: sticky; top: 0; z-index: 2; background: #172840; }
#fuelContainersSection #containerHistoryView :is(th,td) { white-space: nowrap; overflow-wrap: normal; word-break: normal; padding: 12px; vertical-align: top; }
#fuelContainersSection #containerHistoryView td:nth-child(3) { min-width: 190px; }
#fuelContainersSection #containerHistoryView td.table-actions { white-space: normal; min-width: 180px; max-width: 220px; }
#fuelContainersSection #containerHistoryView .container-note { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fuelContainersSection #containerHistoryView details[open] { white-space: normal; max-width: 300px; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .cl-target-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #fuelContainersSection .container-admin-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  #fuelContainersSection .container-tabs { display: grid; grid-template-columns: 1fr; }
  .cl-target-grid { grid-template-columns: 1fr; }
  #fuelContainersSection #containerHistoryView .table-wrapper { max-height: none; overflow: visible; }
  #fuelContainersSection #containerHistoryView table,
  #fuelContainersSection #containerHistoryView tbody { display: block; width: 100%; min-width: 0; }
  #fuelContainersSection #containerHistoryView thead { display: none; }
  #fuelContainersSection #containerHistoryView tr { display: block; border: 1px solid #52647f; border-radius: 12px; padding: 8px; margin: 12px 0; }
  #fuelContainersSection #containerHistoryView td { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 8px; width: auto; min-width: 0; max-width: 100%; padding: 7px 4px; white-space: normal; overflow-wrap: anywhere; }
  #fuelContainersSection #containerHistoryView td::before { content: attr(data-label); color: #a9bbd3; font-size: 12px; }
  #fuelContainersSection #containerHistoryView td:has([colspan])::before { content: none; }
  #fuelContainersSection #containerHistoryView .container-note { white-space: normal; max-width: 100%; }
  #fuelContainersSection #containerHistoryView input[type="checkbox"] { width: 24px; height: 24px; }
  #clSelectedSummary { position: static; }
}