/**
 * Icon-to-text spacing — loaded after game-art CSS so it always wins.
 * Uniform 4px left + 4px right on UI icons (menus, topbalk, nav, table rows, info/form labels).
 */

:root {
    --icon-text-gap: 4px;
}

/* ---------- Side menu (li / navigation) ----------
   Link is inline-flex: left inset = icon margin-left 4px; icon↔text = gap 4px (no margin-right / no HTML space). */
body .navigation__list .navigation__link,
body #sidemenuleft .navigation__link,
body #sidemenuright .navigation__link {
    gap: 4px !important;
}

body .navigation__list .navigation__link .icon,
body .navigation__list .navigation__item .icon,
body #sidemenuleft .navigation__link .icon,
body #sidemenuright .navigation__link .icon,
body #sidemenuleft .navigation__item .icon,
body #sidemenuright .navigation__item .icon {
    --icon-padding: 0 !important;
    --icon-size: 18px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 4px !important;
    margin-right: 0 !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    box-sizing: content-box !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

body .navigation__list .navigation__link .icon::before,
body .navigation__list .navigation__item .icon::before,
body #sidemenuleft .navigation__link .icon::before,
body #sidemenuright .navigation__link .icon::before,
body #sidemenuleft .navigation__item .icon::before,
body #sidemenuright .navigation__item .icon::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Topbalk ---------- */
body .topbalk__item,
body .topbalk__link {
    gap: 0 !important;
}

body .topbalk .icon,
body .topbalk__item > .icon,
body .topbalk__link .icon {
    --icon-padding: 0 !important;
    --icon-size: 18px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    box-sizing: content-box !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

body .topbalk .icon::before,
body .topbalk__item > .icon::before,
body .topbalk__link .icon::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Notification icon still uses 4px sides; badge sits flush after the right gap */
body .topbalk__link .icon--notification {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

body .topbalk__link:has(.icon--notification) .messages__count,
body .topbalk__link:has(.icon--notification) .badge--notification {
    margin-left: 0 !important;
}

/* ---------- Page nav (inbox / index tabs) ---------- */
body .nav-link .icon,
body :is(.inbox, .index-center, .index-content) .nav-link .icon {
    --icon-padding: 0 !important;
    --icon-size: 18px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    box-sizing: content-box !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

body .nav-link .icon::before,
body :is(.inbox, .index-center, .index-content) .nav-link .icon::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Table row icons (inbox / forum topics) ----------
   Do NOT set display:flex on td (breaks table column width / borders).
   Cell left inset 4px; icon↔text = margin-right 4px (PHP has no space after icon). */
body .inbox .table__cell:has(> .message-icon),
body .forumtopics .table__cell:has(> .icon),
body .clanforum .table__cell:has(> .icon) {
    padding-left: 4px !important;
}

body .inbox .table__cell .message-icon,
body .forumtopics .table__cell .icon,
body .clanforum .table__cell .icon {
    --icon-padding: 0 !important;
    --icon-size: 18px !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 4px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    box-sizing: content-box !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body .inbox .table__cell .message-icon::before,
body .forumtopics .table__cell .icon::before,
body .clanforum .table__cell .icon::before {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Info row country flags ----------
   Absolute at right edge (4px inset). Do not reserve padding-right — that widened labels. */
body .info-list__label:has(.flag) {
    position: relative !important;
}

body .info-list__label .flag {
    float: none !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

body .headquarters .info-list__item:has(.icon--lands) .info-list__label,
body .profile .info-list__item:has(.icon--globe) .info-list__label {
    padding-right: 0 !important;
}

/* ---------- Info row player/clan tags: 4px from label right edge ---------- */
body .info-list__label .badge--playertag,
body .info-list__label .badge--clantag {
    right: 4px !important;
    margin-right: 0 !important;
}

body .clanprofile .info-list__item:has(.icon--clan) .info-list__label .badge--clantag,
body .clanprofile .info-list__item:has(.icon--king) .info-list__label .badge--playertag {
    margin-right: 4px !important;
}

/* ---------- Info row + form labels with icons ----------
   Left inset comes from the container (section / info-list padding), not a second
   margin on ::before — that stacked to ~12px and looked wider than menu/table icons. */
body .info-list__label.icon,
body .form__label.icon {
    --icon-padding: 0 !important;
    --icon-size: 18px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

body .info-list__label.icon::before,
body .form__label.icon::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

/* Form labels sit in section body — kill extra label pad; body pad reduced below for forms */
body .form__label.icon {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Form sections: 4px horizontal inset (was spacing-md 8px) so icons match menu/table.
   Do not pad flush bodies — casino betting tables stay edge-to-edge like roulette. */
body .section__body:has(.form):not(.section__body--flush),
body .section__body:has(form.form):not(.section__body--flush) {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Close / discard controls stay tight (no L/R gap) */
body .killed-overlay__close .icon,
body .tutorial-overlay__discard .icon {
    --icon-padding: 0 !important;
    --icon-size: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

body .killed-overlay__close .icon::before,
body .tutorial-overlay__discard .icon::before {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Table object icons + country flags ----------
   Match forum/inbox row icons: 4px cell inset, 4px icon↔text (PHP has no space after icon/flag). */
body .table__cell:has(> .object-icon),
body .table__cell:has(> img.object-icon),
body .table__cell:has(> .flag) {
    padding-left: 4px !important;
}

body .table__cell .object-icon,
body .object-icon {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

body .table__cell > .flag,
body .table .flag {
    margin-left: 0 !important;
    margin-right: 4px !important;
    vertical-align: middle;
}

/* ---------- Section header country flags (airport / casino / objects / etc.) ----------
   4px from section edge; 4px flag↔name via gap (HTML space after flag removed). */
body .section__header-left {
    left: 4px !important;
    gap: 4px !important;
}

body .section__header-left .flag,
body .section__header-right .flag {
    margin: 0 !important;
}

/* Inline flags before country names outside tables (e.g. airport heading) */
body h1 > .flag,
body .text-bold > .flag {
    margin-left: 4px !important;
    margin-right: 4px !important;
    vertical-align: middle;
}

/* ---------- Tag · username · icon / tag · clan name: uniform 4px gaps ---------- */
body .user-identity,
body .clan-identity,
body .companyprofile-owner,
body .marriage-partner-identity {
    gap: 4px !important;
}

body .user-identity .badge--playertag,
body .user-identity .badge--clantag,
body .clan-identity .badge--clantag,
body .companyprofile-owner .badge--playertag,
body .companyprofile-owner .badge--clantag {
    margin-right: 0 !important;
}

body .user-identity .username-icon,
body .user-identity .profile-username-icon,
body .user-identity .headquarters-username-icon,
body .companyprofile-owner__icon,
body .marriage-partner-identity .username-icon {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Standalone username icons (not inside identity flex): same 4px */
body .username-icon {
    margin-left: 4px;
}