미디어위키:Nation List Manager.css

.nation-list-manager,
.nation-list-manager * {
box-sizing:border-box;
}

.nation-list-shell,
.nation-list-loading {
position:relative;
width:100%;
background:#080808;
border:1px solid #000;
color:#d8d8d8;
font-size:12px;
line-height:1.45;
box-shadow:
inset 0 1px 0 #1a1a1a,
inset 0 -1px 0 #050505;
}

.nation-list-loading {
padding:10px;
background:#101010;
}

.nation-list-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:32px;
padding:0 8px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-title {
font-weight:700;
letter-spacing:.04em;
color:#e2e2e2;
text-shadow:1px 1px 0 #000;
}

.nation-list-summary {
color:#888;
font-size:11px;
white-space:nowrap;
}

.nation-list-toolbar {
display:flex;
align-items:center;
gap:5px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-toolbar label {
display:flex;
align-items:center;
gap:5px;
color:#aaa;
white-space:nowrap;
}

.nation-list-toolbar select,
.nation-list-toolbar input[type="search"],
.nation-list-table input[type="text"] {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:4px 6px;
font:inherit;
}

.nation-list-toolbar input[type="search"] {
width:320px;
}

.nation-list-toolbar button,
.nation-list-add,
.nation-list-move,
.nation-list-delete,
.nation-list-continent-tab {
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
cursor:pointer;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
}

.nation-list-toolbar button {
height:25px;
padding:0 8px;
}

.nation-list-toolbar button:hover,
.nation-list-add:hover,
.nation-list-move:hover,
.nation-list-delete:hover,
.nation-list-continent-tab:hover {
background:#222222;
color:#ffffff;
}

.nation-list-status {
margin-left:auto;
color:#9db7c7;
font-size:11px;
white-space:nowrap;
}

.nation-list-warning-box {
display:flex;
flex-direction:column;
gap:4px;
padding:6px;
background:#080808;
border-bottom:1px solid #000;
}

.nation-list-warning {
padding:5px 7px;
border:1px solid #202020;
background:#101010;
color:#aaa;
font-size:11px;
line-height:1.45;
}

.nation-list-warning.is-ok {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-warning.is-warn {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-warning.is-soft {
color:#8a8a8a;
}

.nation-list-continent-tabs {
display:grid;
grid-template-columns:repeat(6, minmax(0,1fr));
gap:3px;
padding:6px;
background:#0b0b0b;
border-bottom:1px solid #000;
}

.nation-list-continent-tab {
height:26px;
padding:0 6px;
font-weight:700;
}

.nation-list-continent-tab.is-active {
background:#1d1d1d;
color:#ffffff;
border-top-color:#555555;
}

.nation-list-body {
max-height:calc(100vh - 285px);
overflow:auto;
padding:6px;
}

.nation-list-region {
margin:0 0 7px;
border:1px solid #000;
background:#0b0b0b;
box-shadow:
inset 0 1px 0 #191919,
inset 0 -1px 0 #050505;
}

.nation-list-region:last-child {
margin-bottom:0;
}

.nation-list-region-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-height:28px;
padding:0 6px;
background:#111111;
border-bottom:1px solid #000;
}

.nation-list-region-title {
font-weight:700;
color:#e2e2e2;
}

.nation-list-region-count {
margin-left:7px;
color:#777;
font-size:11px;
}

.nation-list-add {
height:22px;
padding:0 7px;
font-size:11px;
}

.nation-list-table-wrap {
overflow:auto;
}

.nation-list-table {
width:100%;
border-collapse:collapse;
table-layout:fixed;
}

.nation-list-table th,
.nation-list-table td {
border:1px solid #000;
padding:4px;
vertical-align:middle;
background:#0d0d0d;
}

.nation-list-table th {
background:#151515;
color:#aaa;
font-size:11px;
font-weight:600;
}

.nation-list-table tr:hover td {
background:#141414;
}

.nation-list-table input[type="text"] {
width:100%;
}

.nation-list-order-col {
width:56px;
text-align:center;
}

.nation-list-small-col {
width:58px;
text-align:center;
}

.nation-list-check-col {
width:48px;
text-align:center;
}

.nation-list-action-col {
width:56px;
text-align:center;
}

.nation-list-move {
width:22px;
height:22px;
margin:0 1px;
padding:0;
line-height:18px;
}

.nation-list-delete {
height:22px;
padding:0 6px;
font-size:11px;
}

.nation-list-delete:hover {
background:#2a1515;
color:#ffd0d0;
}

.nation-list-flag-cell {
display:grid;
grid-template-columns:24px minmax(0,1fr);
align-items:center;
gap:5px;
}

.nation-list-flag-cell img,
.nation-list-flag-cell span {
display:block;
width:16px;
height:16px;
object-fit:contain;
background:#080808;
border:1px solid #050505;
box-shadow:0 0 0 1px #2b2b2b;
}

.nation-list-flag-cell span {
box-shadow:none;
border-color:#202020;
background:#050505;
}

.nation-list-empty {
height:31px;
text-align:center;
color:#777;
background:#0b0b0b !important;
}

/* 20260705: 국가 목록 관리 - 드래그 정렬 / 저장 시 국기 보정 */
.nation-list-toolbar select,
.nation-list-table select {
height:25px;
background:#070707;
color:#e2e2e2;
border:1px solid #000;
box-shadow:
inset 1px 1px 0 #020202,
inset -1px -1px 0 #191919;
outline:none;
border-radius:0;
padding:3px 5px;
font:inherit;
}

.nation-list-body {
max-height:none;
overflow:visible;
}

.nation-list-table-wrap {
overflow:visible;
}

.nation-list-drag-col {
width:46px;
text-align:center;
}

.nation-list-offset-col {
width:86px;
text-align:center;
}

.nation-list-drag-handle {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:22px;
background:#171717;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #333,
inset 0 -1px 0 #080808;
color:#c8c8c8;
cursor:grab;
user-select:none;
font-weight:700;
line-height:1;
}

.nation-list-drag-handle:hover {
background:#222222;
color:#ffffff;
}

.nation-list-table tr[draggable="true"] {
cursor:default;
}

.nation-list-table tr.is-dragging td {
opacity:.42;
background:#101010 !important;
}

.nation-list-table tr.is-drop-before td {
box-shadow:inset 0 2px 0 #d0b16e;
}

.nation-list-table tr.is-drop-after td {
box-shadow:inset 0 -2px 0 #d0b16e;
}

.nation-list-table tbody.is-region-drop {
box-shadow:inset 0 0 0 1px #493a16;
}

.nation-list-measure-stage {
position:absolute;
left:-10000px;
top:-10000px;
width:auto;
height:auto;
visibility:hidden;
pointer-events:none;
white-space:nowrap;
font-size:12px;
line-height:1.45;
}

.nation-list-measure-item {
display:inline-block;
margin:0 16px 0 0;
}

.nation-list-offset-col select {
width:100%;
}

/* 20260705: Nation List Manager flag picker */
.nation-list-flag-input {
font-family:inherit;
}

.nation-list-flag-picker {
position:absolute;
z-index:1000;
max-height:260px;
overflow:auto;
background:#080808;
border:1px solid #000;
box-shadow:
inset 0 1px 0 #2b2b2b,
inset 0 -1px 0 #050505,
0 8px 18px rgba(0,0,0,.65);
padding:4px;
}

.nation-list-flag-picker[hidden] {
display:none;
}

.nation-list-flag-picker-loading,
.nation-list-flag-picker-empty {
padding:6px;
color:#8a8a8a;
background:#101010;
border:1px solid #202020;
}

.nation-list-flag-option {
display:grid;
grid-template-columns:22px minmax(0,1fr);
align-items:center;
gap:6px;
width:100%;
min-height:26px;
margin:0 0 3px;
padding:3px 5px;
border:1px solid #202020;
background:#101010;
color:#d8d8d8;
text-align:left;
cursor:pointer;
box-sizing:border-box;
font:inherit;
}

.nation-list-flag-option:last-child {
margin-bottom:0;
}

.nation-list-flag-option:hover {
background:#1d1d1d;
border-color:#333;
color:#fff;
}

.nation-list-flag-option img {
display:block;
width:16px;
height:auto;
max-height:16px;
object-fit:contain;
border:1px solid #050505;
background:#080808;
box-sizing:content-box;
}

.nation-list-flag-option span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

/* 20260705: Nation List ↔ Nation Link Map 연동 상태 */
.nation-list-link-col {
width:112px;
text-align:center;
}

.nation-list-link-status {
display:flex;
align-items:center;
justify-content:center;
gap:4px;
min-height:24px;
font-size:11px;
white-space:nowrap;
}

.nation-list-link-status > span {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:19px;
padding:1px 6px;
border:1px solid #202020;
background:#101010;
color:#9a9a9a;
box-shadow:inset 0 1px 0 #1d1d1d,inset 0 -1px 0 #050505;
}

.nation-list-link-status.is-ok > span {
color:#9fc59f;
border-color:#1e3520;
background:#0c130c;
}

.nation-list-link-status.is-missing > span,
.nation-list-link-status.is-flag-mismatch > span,
.nation-list-link-status.is-incomplete > span {
color:#d0b16e;
border-color:#493a16;
background:#151006;
}

.nation-list-link-status.is-soft > span {
color:#777;
}

.nation-list-link-create,
.nation-list-link-sync-one {
height:21px;
padding:0 5px;
border:1px solid #000;
background:#171717;
color:#dcdcdc;
border-radius:0;
font:inherit;
font-size:11px;
cursor:pointer;
box-shadow:inset 0 1px 0 #333,inset 0 -1px 0 #080808;
}

.nation-list-link-create:hover,
.nation-list-link-sync-one:hover {
background:#222;
color:#fff;
}


.nation-list-tag-col {
width:58px;
min-width:58px;
text-align:center;
}

.nation-list-tag-col input[type="text"] {
width:48px;
text-align:center;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}


/* 20260705: unified flag editor
   The flag field is a normal text input. The preview is an absolute overlay inside the input field,
   so it never creates a separate grid column and cannot squeeze, split, or replace the input. */
.nation-list-table-wrap {
  overflow:auto;
}

.nation-list-table {
  width:max-content;
  min-width:100%;
  table-layout:auto;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-flag-col {
  width:430px;
  min-width:430px;
}

.nation-list-flag-cell {
  display:block;
}

.nation-list-flag-field {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
}

.nation-list-flag-input {
  display:block;
  width:100%;
  height:25px;
  min-width:0;
  box-sizing:border-box;
  padding-left:6px;
}

.nation-list-flag-field.has-preview .nation-list-flag-input {
  padding-left:31px;
}

.nation-list-flag-thumb {
  position:absolute;
  left:7px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:16px;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}

.nation-list-flag-field.has-preview .nation-list-flag-thumb {
  display:flex;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto;
  height:auto;
  max-width:16px;
  max-height:16px;
  min-width:0;
  min-height:0;
  object-fit:contain;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb {
  display:none !important;
}

.nation-list-flag-field.is-flag-missing,
.nation-list-flag-cell.is-flag-missing {
  background:transparent;
}

.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px;
  border-color:#000;
  box-shadow:inset 1px 1px 0 #020202,inset -1px -1px 0 #191919;
}


/* 20260705: restore stable flag field structure
   Preview is a real fixed slot beside the normal input, not an overlay inside it. */
.nation-list-table-wrap {
  overflow:auto !important;
}

.nation-list-table {
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-flag-col {
  width:460px !important;
  min-width:460px !important;
  max-width:none !important;
}

.nation-list-flag-field {
  position:static !important;
  display:grid !important;
  grid-template-columns:24px minmax(390px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.nation-list-flag-thumb {
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:20px !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:auto !important;
}

.nation-list-flag-input {
  display:block !important;
  width:100% !important;
  min-width:390px !important;
  height:25px !important;
  box-sizing:border-box !important;
  padding-left:6px !important;
}

.nation-list-flag-field.has-preview .nation-list-flag-input,
.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px !important;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  display:none !important;
}

/* 20260705: 통합 Nation Manager - 링크맵 필드까지 한 행에서 관리 */
.nation-list-table-wrap {
  overflow:auto !important;
}

.nation-list-table {
  width:max-content !important;
  min-width:100% !important;
  table-layout:auto !important;
  border-collapse:collapse;
}

.nation-list-table th,
.nation-list-table td {
  white-space:nowrap;
  vertical-align:middle;
}

.nation-list-drag-col { width:46px; min-width:46px; }
.nation-list-tag-col { width:58px; min-width:58px; }
.nation-list-color-col { width:112px; min-width:112px; }
.nation-list-name-col { width:190px; min-width:190px; }
.nation-list-link-col { width:104px; min-width:104px; }
.nation-list-flag-col { width:460px !important; min-width:460px !important; max-width:none !important; }
.nation-list-small-col { width:58px; min-width:58px; }
.nation-list-check-col { width:48px; min-width:48px; }
.nation-list-offset-col { width:86px; min-width:86px; }
.nation-list-parent-col { width:112px; min-width:112px; }
.nation-list-relation-col { width:140px; min-width:140px; }
.nation-list-note-col { width:190px; min-width:190px; }
.nation-list-action-col { width:56px; min-width:56px; }

.nation-list-color-field {
  display:grid;
  grid-template-columns:20px minmax(76px,1fr);
  align-items:center;
  gap:5px;
  width:100%;
}

.nation-list-color-field span {
  display:block;
  width:20px;
  height:14px;
  border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.55);
  background:#333;
}

.nation-list-color-field input[type="text"] {
  min-width:76px;
}

.nation-list-name-col input[type="text"],
.nation-list-parent-col input[type="text"],
.nation-list-relation-col input[type="text"],
.nation-list-note-col input[type="text"] {
  min-width:0;
}

.nation-list-flag-field {
  position:static !important;
  display:grid !important;
  grid-template-columns:24px minmax(390px,1fr) !important;
  align-items:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
}

.nation-list-flag-thumb {
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  width:20px !important;
  height:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
  z-index:auto !important;
}

.nation-list-flag-input {
  display:block !important;
  width:100% !important;
  min-width:390px !important;
  height:25px !important;
  box-sizing:border-box !important;
  padding-left:6px !important;
}

.nation-list-flag-field.has-preview .nation-list-flag-input,
.nation-list-flag-field.is-flag-missing .nation-list-flag-input {
  padding-left:6px !important;
}

.nation-list-flag-preview,
.nation-list-flag-option img {
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:16px !important;
  max-height:16px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  border:1px solid #050505;
  background:#080808;
  box-sizing:content-box;
  box-shadow:none;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  display:none !important;
}


/* 20260705: Nation List Manager 국기 획 단일 기준
   미리보기/선택지/측정 stage의 국기 획을 alpha drop-shadow 2색 방식으로 통일한다. */
.nation-list-flag-thumb,
.nation-list-flag-option {
  overflow:visible !important;
}

.nation-list-flag-preview,
.nation-list-flag-option img,
.nation-list-measure-stage .clbi-nations-list-flag.has-border {
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  background:transparent !important;
  overflow:visible !important;
  filter:var(--clbi-flag-stroke-filter) !important;
}

.nation-list-flag-preview.is-missing,
.nation-list-flag-option img.is-missing,
.nation-list-flag-field.is-flag-missing .nation-list-flag-thumb img {
  filter:none !important;
}
/* 20260705: Nation List Manager absorbs Link Table relation option controls */
.nation-list-dialog-backdrop {
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.62);
}

.nation-list-relation-dialog {
  width:min(520px, calc(100vw - 48px));
  max-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  border:1px solid #000;
  background:#080808;
  color:#d8d8d8;
  box-shadow:
    inset 0 1px 0 #202020,
    inset 0 -1px 0 #050505,
    0 16px 42px rgba(0,0,0,.78);
}

.nation-list-relation-dialog-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:8px;
  border-bottom:1px solid #000;
  background:#111;
}

.nation-list-relation-dialog-title {
  font-weight:700;
  letter-spacing:.04em;
  color:#e2e2e2;
}

.nation-list-relation-dialog-note {
  margin-top:3px;
  font-size:11px;
  line-height:1.45;
  color:#777;
}

.nation-list-relation-dialog-close {
  width:24px;
  height:24px;
  border:1px solid #000;
  background:#171717;
  color:#dcdcdc;
  padding:0;
  line-height:20px;
  border-radius:0;
  cursor:pointer;
  box-shadow:inset 0 1px 0 #333, inset 0 -1px 0 #080808;
}

.nation-list-relation-dialog-close:hover {
  background:#222;
  color:#fff;
}

.nation-list-relation-dialog-add {
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px;
  border-bottom:1px solid #000;
  background:#0b0b0b;
}

.nation-list-relation-option-input {
  flex:1;
  min-width:0;
  height:25px;
  background:#070707;
  color:#e2e2e2;
  border:1px solid #000;
  box-shadow:inset 1px 1px 0 #020202, inset -1px -1px 0 #191919;
  outline:none;
  border-radius:0;
  padding:4px 6px;
  font:inherit;
}

.nation-list-relation-option-add,
.nation-list-relation-delete {
  border:1px solid #000;
  background:#171717;
  color:#dcdcdc;
  border-radius:0;
  font:inherit;
  cursor:pointer;
  box-shadow:inset 0 1px 0 #333, inset 0 -1px 0 #080808;
}

.nation-list-relation-option-add {
  height:25px;
  padding:0 8px;
}

.nation-list-relation-dialog-list {
  overflow:auto;
  padding:6px;
  background:#090909;
}

.nation-list-relation-dialog-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px 48px;
  align-items:center;
  gap:5px;
  min-height:27px;
  margin:0 0 4px;
  padding:3px;
  border:1px solid #000;
  background:#101010;
  box-shadow:inset 0 1px 0 #1e1e1e, inset 0 -1px 0 #050505;
}

.nation-list-relation-dialog-row:last-child {
  margin-bottom:0;
}

.nation-list-relation-dialog-row:hover {
  background:#151515;
}

.nation-list-relation-dialog-name {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#e2e2e2;
  padding-left:4px;
}

.nation-list-relation-dialog-count {
  font-size:11px;
  color:#777;
  text-align:right;
  white-space:nowrap;
}

.nation-list-relation-delete {
  height:21px;
  color:#cfcfcf;
}

.nation-list-relation-delete:hover {
  background:#2a1515;
  color:#ffd0d0;
}

.nation-list-relation-dialog-empty {
  padding:10px;
  border:1px solid #202020;
  background:#101010;
  color:#777;
  text-align:center;
}

.nation-list-relation-dialog-foot {
  padding:7px 8px;
  border-top:1px solid #000;
  background:#0b0b0b;
  color:#777;
  font-size:11px;
}
/* 20260710: Nation List Manager SYB file support
   SYB uses the same fixed preview/input structure as flag, but is a separate file field and picker target. */
.nation-list-syb-col {
  width:360px !important;
  min-width:360px !important;
  max-width:none !important;
}

.nation-list-syb-col .nation-list-flag-field {
  grid-template-columns:24px minmax(290px,1fr) !important;
}

.nation-list-syb-col .nation-list-flag-input {
  min-width:290px !important;
}

.nation-list-syb-preview {
  border:0 !important;
  background:transparent !important;
  filter:none !important;
}

.nation-list-syb-field.has-preview .nation-list-syb-thumb {
  display:flex !important;
}

.nation-list-flag-picker[data-file-kind="syb"] .nation-list-flag-option img {
  border:0 !important;
  background:transparent !important;
  filter:none !important;
}

/* 20260710: unified symbol columns
   The old flag field is now the first symbol slot. All symbol slots use the same picker and accept both Flag-* and Syb-* files. */
.nation-list-symbol-extra-col {
  width:360px !important;
  min-width:360px !important;
  max-width:none !important;
}

.nation-list-symbol-extra-col .nation-list-flag-field {
  grid-template-columns:24px minmax(290px,1fr) !important;
}

.nation-list-symbol-extra-col .nation-list-flag-input {
  min-width:290px !important;
}

.nation-list-symbol-field.is-syb .nation-list-flag-preview,
.nation-list-symbol-preview.is-syb,
.nation-list-flag-picker .nation-list-flag-option img[data-flag-file^="Syb-"],
.nation-list-flag-picker .nation-list-flag-option img[data-flag-file^="Syb_"] {
  border:0 !important;
  background:transparent !important;
  filter:none !important;
}

/* 20260710: symbol slots folded into one expandable list.
   The table keeps one compact symbol column; the three editable symbol slots open inside it instead of adding horizontal scroll columns. */
.nation-list-symbols-col {
  width:360px !important;
  min-width:360px !important;
  max-width:360px !important;
  white-space:normal !important;
}

.nation-list-symbol-details {
  display:block;
  width:100%;
}

.nation-list-symbol-summary {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:6px;
  height:24px;
  box-sizing:border-box;
  padding:0 6px;
  cursor:pointer;
  list-style:none;
  background:#101010;
  border:1px solid #050505;
  color:#e2e2e2;
  user-select:none;
}

.nation-list-symbol-summary::-webkit-details-marker {
  display:none;
}

.nation-list-symbol-summary::after {
  content:"▾";
  color:#626262;
  font-size:10px;
  line-height:20px;
}

.nation-list-symbol-details[open] .nation-list-symbol-summary::after {
  content:"▴";
}

.nation-list-symbol-summary-preview {
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  overflow:hidden;
}

.nation-list-symbol-summary-img,
.nation-list-symbol-summary-missing {
  display:block;
  width:auto;
  height:auto;
  max-width:18px;
  max-height:16px;
  flex:0 0 auto;
  object-fit:contain;
  background:#080808;
  border:1px solid #050505;
  box-sizing:content-box;
}

.nation-list-symbol-summary-img.is-syb,
.nation-list-symbol-summary-img[data-flag-file^="Syb-"],
.nation-list-symbol-summary-img[data-flag-file^="Syb_"] {
  border:0 !important;
  background:transparent !important;
}

.nation-list-symbol-summary-missing {
  width:16px;
  height:10px;
  border-color:#4a1b1b;
  background:#1a0707;
}

.nation-list-symbol-summary-empty,
.nation-list-symbol-summary-text {
  color:#8a8a8a;
  font-size:11px;
  line-height:20px;
  white-space:nowrap;
}

.nation-list-symbol-list {
  display:grid;
  grid-template-columns:1fr;
  gap:3px;
  margin-top:3px;
  padding:3px;
  background:#080808;
  box-shadow:inset 0 1px 0 #101010, inset 0 -1px 0 #555555;
}

.nation-list-symbol-row {
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) 72px 58px 86px;
  align-items:center;
  gap:4px;
  min-width:0;
  padding:2px;
  background:#101010;
  border:1px solid #050505;
  box-sizing:border-box;
}

.nation-list-symbol-row-head,
.nation-list-symbol-size,
.nation-list-symbol-border,
.nation-list-symbol-offset {
  color:#8a8a8a;
  font-size:11px;
  line-height:20px;
  white-space:nowrap;
}

.nation-list-symbol-row-main {
  min-width:0;
}

.nation-list-symbol-row .nation-list-flag-field {
  grid-template-columns:24px minmax(0, 1fr) !important;
}

.nation-list-symbol-row .nation-list-flag-input {
  min-width:0 !important;
}

.nation-list-symbol-row input[type="text"],
.nation-list-symbol-row select {
  width:100% !important;
  min-width:0 !important;
}