<style>
.rb-widget-section {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 313;
	align-items: center;
}

.rb-widget-top {
	margin-bottom: 20px;
	text-align: center;
	padding-left: 24px;
  padding-right: 24px;
}

.mobile-only-note { display: none; }
@media (max-width: 600px) {
  .mobile-only-note {
    display: block;
    font-size: 0.95rem;
    line-height: 1.35;
    margin: 8px 24px 12px;
    color: #ffd9a1;
    background: rgba(255, 193, 7, 0.08);
    border-left: 3px solid #ffc107;
    padding: 10px 12px;
    border-radius: 8px;
  }
}

/* ===================== Base Shell ======================= */
#rebalance-widget {
  background-color: #111;
  border: 1rem solid #111;
  color: #f9f5e1;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
	
/* zero‑out border‑radius everywhere */
#rebalance-widget,
#rebalance-widget * {
  border-radius: 0 !important;
}

/* .rb-widget-section{
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.55)), url("https://eu-wotp.wgcdn.co/dcont/fb/image/onslaught-cards-background-test-1_2560x1440.jpg") center / cover no-repeat;
}
*/
/* ===================== Toolbar ========================== */
#rebalance-widget .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0; /* was 0.5rem – rely on element-specific spacing now */
  margin-bottom: 0.5rem;
  align-items: center; /* keeps search vertically centred */
}

/* --- Filter cell sizing --- */
#rebalance-widget .dropdown {
  position: relative;
  flex: 0 0 190px; /* was 1 1 25% / 160px etc. – unified */
  min-width: 120px;
  margin-right: 0; /* rely on separators / gaps instead */
  border-right: 1px solid #111; /* tiny 1px separator look */
}

#rebalance-widget .dropdown:not(:last-of-type) {
  border-right: 1px solid #111;
}

/* match pop‑up width to trigger */
#rebalance-widget .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;        /* stretch edge‑to‑edge of button */
  background-color: #1c1c1c;
  border: 1px solid #444;
  width: auto;              /* width driven by L/R pair above */
  min-width: 100%;          /* never smaller than trigger */
  box-sizing: border-box;   /* include border in width calc */
  z-index: 1;
}

#rebalance-widget .dropdown:not(:first-child) .dropdown-content {
  margin-left: -2px; /* eliminate the sliver-gap between panels */
}

/* === Nation icon in dropdown === */
#rebalance-widget .dropdown-content .icon.nation {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#rebalance-widget .dropdown.open .dropdown-content { display: block; }

#rebalance-widget .dropdown-content div {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#rebalance-widget .dropdown-content div.active {
  background-color: #5a9445;
  color: #f9f5e1;
  font-weight: bold;
}
#rebalance-widget .dropdown-content div.active::after {
  content: "\2713";          /* ✓ tick mark */
  margin-left: auto;
}
/* (optional) snappier tap feedback */
#rebalance-widget .dropdown-content div:active { background: #333; }

/* dropdown triggers */
#rebalance-widget .dropdown-button {
  padding: 0.4rem 0;         /* was 0.4rem 0.75rem – remove side padding */
  background: #5a9445;
  color: #f9f5e1;
  border: 1px solid #333;
  cursor: pointer;
  min-width: 140px;          /* ensures full label */
  width: 100%;               /* fill its flex cell */
  text-align: left;
  display: flex;
  align-items: flex-start;    /* let multi‑line text sit nicely */
  justify-content: space-between;
  gap: 0.35rem;               /* tighter spacing for icons */
  font-weight: bold;
  white-space: normal;        /* allow wrap when needed */
  margin-left: -2px;          /* overlaps borders for flush look */
  text-indent: 6px;           /* inset text without affecting width */
}

/* icons inside triggers */
#rebalance-widget .dropdown-button .icon { height: 0.9em; width: auto; }
#rebalance-widget .dropdown-button .icon.nation {
  border: 1px solid #f9f5e1;
  margin: 0 !important;
}

/* Nation filter: keep trigger text on one line */
#rebalance-widget .dropdown[data-filter="nation"] .dropdown-button { white-space: nowrap; }
#rebalance-widget .dropdown[data-filter="nation"] .dropdown-content div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Search box + clear */
#rebalance-widget .search-area {
  flex: 1 1 220px;           /* was 1 1 auto / 250px – trimmed */
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-left: 8px;         /* gap between Tier ▸ search */
}

#rebalance-widget .input {
  flex: 1 1 auto;
  padding: 0.4rem 0.75rem;   /* matches button’s vertical padding */
  height: auto;
  max-width: none;           /* stretch */
  margin: 0;
  border: 1px solid #333;    /* visual parity with buttons */
  box-sizing: border-box;
}

#rebalance-widget .clear-button {
  flex: 0 0 auto;
  padding: 0.4rem 0.75rem;   /* same vertical rhythm */
  background-color: #444;
  color: #f9f5e1;
  border: none;
  cursor: pointer;
  margin: 0;
}
#rebalance-widget .clear-button:hover { background-color: #800; }

#rebalance-widget .dropdown-content .ico-vehicle-type__at-spg	{ margin-left: -2px; }
	
/* ===================== Cards ============================ */
#rebalance-widget .card {
  background: #222;
  margin: 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 0.25rem;
  border-radius: 0 !important; /* TODO: HOW DO I OVERRULE THE WEBSITE CSS???? */
}
#rebalance-widget .card.open { background-color: #1a1a1a; }

#rebalance-widget .card-header { display: flex; justify-content: space-between; cursor: pointer; }
#rebalance-widget .card-title { font-size: 1.1rem; font-weight: bold; }
#rebalance-widget .card-subtitle { font-size: 0.875rem; color: #aaa; }
#rebalance-widget .card-subtitle .icon { vertical-align: middle; }

#rebalance-widget .nested-title {
  padding-left: 0;
  margin-top: 0.75rem;
  font-weight: 600;
  color: #fff;
}

#rebalance-widget .change-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* pushes value/Δ all the way right */
  gap: 0.4rem;                      /* gap between icon ▸ label */
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted #555;
}
#rebalance-widget .change-entry:last-child { border-bottom: none; }

#rebalance-widget .card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
#rebalance-widget .cell {
  flex: 1 1 20%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: #ccc;
}
#rebalance-widget .cell.name {
  flex: 2 1 40%;
  font-weight: bold;
  font-size: 1rem;
  color: #f9f5e1;
}

#rebalance-widget .card-thumb {
  width: 110px;
  height: 65px;
  object-fit: contain;
  align-self: start;      /* stays top-aligned when card expands */
  pointer-events: none;   /* purely decorative */
}
#rebalance-widget .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Ensure card radius kill, in case injected elsewhere */
#rebalance-widget .card, 
#rebalance-widget .card::after, 
#rebalance-widget .card_body {
  border-radius: 0 !important;
}

@media (max-width:900px){
  #rebalance-widget .card-thumb{
      display:none;  
  }

  #rebalance-widget .card{
      grid-template-columns:1fr;
  }
}	
	
/* ===================== Sorting ========================== */
#rebalance-widget .sort-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}
@media (max-width: 600px) {
  #rebalance-widget .sort-toolbar { display: none; }
}

#rebalance-widget .sort-button {
  flex: 1 1 20%;
  padding: 0.4rem 0.75rem;
  background-color: #444;
  color: #f9f5e1;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: bold;
  border-radius: 0.25rem;
}
#rebalance-widget .sort-button img  { filter: brightness(0) invert(1); height: 1em; width: auto; }
#rebalance-widget .sort-button.active {
  background: #5a9445;
  color: #f9f5e1;
}
#rebalance-widget .sort-button.active::after {
  content: attr(data-arrow);
  margin-left: 0.25rem;
  font-size: 0.9em;
}

/* ===================== Pagination ======================= */
#rebalance-widget .pagination-button {
  padding: 0.4rem 0.75rem;
  background-color: #444;
  color: #f9f5e1;
  border: none;
  cursor: pointer;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
}
#rebalance-widget .pagination-button:hover    { background-color: #800; }
#rebalance-widget .pagination-button:disabled {
  background-color: #222;
  color: #777;
  cursor: default;
}

/* ===================== Icons ============================ */
/* TODO: Fix so CZ flag isn't squished */
#rebalance-widget .icon       { height: 1em; width: auto; object-fit: contain; vertical-align: middle; }
/* TODO: Fix so all icons are the same size */
#rebalance-widget .icon.type  { height: 1em; width: 1em; object-fit: contain; }

/* ===================== Burger Animation ================= */
#rebalance-widget .card-toggle { width: 20px; height: 16px; position: relative; }
#rebalance-widget .card-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background-color: #f9f5e1;
  transition: top 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
#rebalance-widget .card-toggle span:nth-child(1) { top: 0;   }
#rebalance-widget .card-toggle span:nth-child(2) { top: 7px; }
#rebalance-widget .card-toggle span:nth-child(3) { top: 14px;}
#rebalance-widget .card-toggle.open span:nth-child(1) { top: 7px; transform: rotate(45deg); }
#rebalance-widget .card-toggle.open span:nth-child(2) { opacity: 0; }
#rebalance-widget .card-toggle.open span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ===================== Tankopedia opt‑out =============== */
.tank-no-link-name .content-tank_name { display: none !important; } /* Hide the tank name */
.tank-no-link-name .content-tank      { pointer-events: none; cursor: default; text-decoration: none; }

/* ===================== Utility ========================== */
.stat-value { color: #f9f5e1; }
.stat-diff  { color: #599444; }

#rebalance-widget #vehicle-container { min-height: 750px; } /* ensures 10 cards – comment out to auto‑collapse */
#rebalance-widget #tank-count {
  font-size: 0.85rem;
  color: #a0a0a0;
  font-style: italic;
}

/* ===================== Responsive ======================= */
@media (min-width: 601px) {
  /* Nation & Type wider, Tier narrower */
  #rebalance-widget .dropdown[data-filter="nation"] { flex: 0 0 220px; }
  #rebalance-widget .dropdown[data-filter="type"]   { flex: 0 0 220px; }
  #rebalance-widget .dropdown[data-filter="tier"]   { flex: 0 0 160px; }
  #rebalance-widget .dropdown { max-width: 200px; }
}

@media (min-width: 1024px) {
  #rebalance-widget .dropdown-content { height: 420px; }
}

@media (max-width: 600px) {
#rebalance-widget {
    width: auto;
  }

  /* dropdowns stack, equal 12‑px gutters */
  #rebalance-widget .dropdown {
    flex: 1 1 100%;
    max-width: none !important; /* clears the desktop cap */
    margin: 0;
    border-right: none;
  }
  #rebalance-widget .dropdown-button {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 0;
  }
  #rebalance-widget .dropdown-content { position: static; }

  #rebalance-widget .toolbar {
    box-sizing: border-box;
    gap: 0.5rem;
  }

  #rebalance-widget .search-area {
    flex: 1 1 100%;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  #rebalance-widget .card { padding: 0.75rem; }
}

/* ===================== Test ========================== */

</style>