/* General page styles */
* {
  box-sizing: border-box;
}

/* === Pawn shop row alignment overrides ===
   These styles ensure that all rows across the pawn shop's three
   columns align perfectly.  By standardising the top and bottom padding,
   margins and border widths, every pawn-row occupies the same amount
   of vertical space in each column.  The minimum height enforces a
   consistent row height even when the content differs (e.g., control
   buttons vs. text).  Similarly, pawn-category-header rows mirror
   these metrics so category separators line up across columns. */
.pawn-row {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  /* Fix the height of pawn rows to ensure consistent alignment across all columns.
     The default 1.8rem height has been replaced with an explicit pixel value as
     requested.  Both height and min-height are set so the row will not shrink
     when content is short. */
  height: 37px;
  min-height: 37px;
}

/* Enlarge the help and settings buttons on the start screen.  Doubling
   their size makes them more prominent without affecting other buttons. */
#start-extra-buttons button {
  font-size: 1.2rem;
  padding: 0.8rem 1.2rem;
}

/* Centre align the loan description text on the bank page.  This applies to
   the paragraph inside the loan info container. */
.loan-info-container p {
  text-align: center;
}

/* Styles for chemist staff cards that include a flip animation for drug
   mastery.  The front section contains the working assignment and speed
   information, while the mastery section lists the chemist's star ratings
   for each discovered drug.  The flip button toggles the show-back class
   on the card. */
.chemist-front-section {
  /* No additional styling beyond separation. */
}
.chemist-mastery-section {
  display: none;
  margin-top: 0.6rem;
}
.chemist-flip-btn {
  margin-top: 0.6rem;
  background-color: transparent;
  color: #e0eae3;
  border: 1px solid #e0eae3;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.chemist-flip-btn:hover {
  background-color: rgba(255,255,255,0.1);
}
/* When the card is flipped show the mastery section and hide the front section */
.chemist-staff-card.show-back .chemist-front-section {
  display: none;
}
.chemist-staff-card.show-back .chemist-mastery-section {
  display: block;
}

.pawn-category-header {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  /* Fix the height of pawn-category headers to 32px.  Both height and
     min-height ensure the header does not compress when the content is
     short. */
  height: 32px;
  min-height: 32px;
}

/*
 * Start screen logo
 * Replace the default welcome text with a large logo graphic.
 * The dimensions match 776×250 pixels and centre the image.
 */
#start-screen #start-logo {
  width: 776px;
  height: 250px;
  margin: 0 auto 1rem auto;
  background-image: url('img/logo_final_shipment.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #e0eae3;
  background-color: #0d2b1f;
  overflow-y: scroll;
}

/* Hide page-level scrollbar when leaderboards is active; tables remain scrollable */
body.leaderboards-active {
  overflow-y: hidden;
}

h1, h2, h3 {
  margin: 0.5rem 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Game container and header */
#game-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  padding: 1rem 2rem;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Keep the header (including title and top bar) visible when scrolling. The
     header becomes sticky so both the game title and player info bar remain
     visible.  Removing sticky behaviour from the inner #top-bar avoids
     layering conflicts. */
  position: sticky;
  top: 0;
  z-index: 30;
}

#top-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  align-items: center;
  /* Do not set position: sticky on the inner top bar itself.  The entire
     header is already sticky, so the bar will remain visible automatically. */
  position: static;
  top: auto;
  z-index: auto;
}

/* Hide the top info bar while the start screen is active */
body.start-screen-active #top-bar {
  display: none;
}

#top-bar span {
  padding: 0.2rem 0.6rem;
  background-color: rgba(255,255,255,0.1);
  border-radius: 4px;
  /* Remove the additional top margin on the player info chips so they align
     more closely with the game logo.  Previously these spans were pushed
     down by a 0.4rem margin. */
  margin-top: 0;
  /* Offset the player info chips by a fixed pixel amount to fine-tune their
     vertical alignment.  A relative position allows us to nudge the spans
     without affecting their normal flow or the flex layout of the top bar. */
  position: relative;
  /* Use a small pixel offset rather than a rem value to achieve a consistent
     spacing across different font sizes.  Four pixels moves the spans
     slightly downward from the baseline of the logo. */
  top: 4px;
}

/* Navigation menu */
nav#main-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Remove the default padding so the menu hugs the header closely.  The game
     specification requests that the main menu sit flush against the header
     without extra spacing. */
  padding: 0;
  /* Remove the background from the navigation bar so it inherits
     whatever is behind it.  By making the menu transparent we avoid
     any coloured block behind the buttons and allow the page
     background to show through. */
  background-color: transparent;
  /* Ensure no blur effect is applied to the navigation itself. */
  backdrop-filter: none;
  /* Because the navigation bar now resides inside the sticky header it no
     longer needs its own sticky positioning.  Allow it to flow normally
     within the header. */
  position: static;
  top: auto;
  z-index: auto;
}

nav#main-menu button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
}

nav#main-menu button:hover {
  background-color: #2a6a4b;
}

/* === Navigation visibility ===
   Hide the main navigation menu on the start screen by default.  The nav
   becomes visible only when the body has the .game-started class.  This
   approach ensures that the navigation cannot be accessed before a game
   begins, addressing the requirement that the main-menu bar be hidden
   on the start-screen. */
nav#main-menu {
  display: none;
}
body.game-started nav#main-menu {
  display: flex;
}
body.game-started nav#main-menu.hidden {
  display: none;
}

/* Small icon before the button text */
nav#main-menu button .icon {
  margin-right: 0.35rem;
  font-size: 1rem;
  line-height: 1;
}

/* Ensure inline images used as icons align and size consistently */
nav#main-menu button .icon img,
#start-extra-buttons .icon img {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  filter: none;
}

/* Make the pause/resume icon blue for visibility */
nav#main-menu #pause-game .icon {
  color: #3da5ff;
}

nav#main-menu.hidden {
  display: none;
}

/*
 * Hamburger menu button
 *
 * On very narrow screens the main menu is hidden and replaced by a
 * hamburger button.  The button uses the same green palette as the
 * rest of the interface and remains invisible on larger viewports.
 */
#hamburger-menu {
  display: none;
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

/* Show the hamburger button below 760px wide.  The navigation menu
 * remains hidden by default on small screens; its visibility is
 * controlled via JavaScript toggling the .hidden class.
 */
/* Show the hamburger icon and stack navigation on screens 800px wide or narrower. */
@media (max-width: 800px) {
  #hamburger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Pages */
.page {
  display: none;
  padding: 2rem;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page.active {
  display: block;
}

#start-screen {
  text-align: center;
  background-image: url('img/bg_main.png');
  position: relative;
}

#dashboard {
  background-image: url('img/bg_main.png');
}

#shop {
  background-image: url('img/bg_shop.png');
}

#staff {
  background-image: url('img/bg_staff.png');
}

#production {
  background-image: url('img/bg_production.png');
}

#territories {
  background-image: url('img/bg_territories.png');
}

#help {
  background-image: url('img/bg_main.png');
}

#bank {
  color: #e0eae3;
  background-image: url('img/bg_bank.png');
}

#bank input,
#bank button {
  margin-top: 0.5rem;
  margin-right: 0.5rem;
}

#leaderboards {
  background-image: url('img/bg_leaderboard.png');
}

/* Prevent page-level scroll on leaderboards screen; inner tables handle scroll */
#leaderboards.page {
  overflow-y: hidden;
}

/* Dashboard */
.dashboard-grid {
  display: grid;
  gap: 1rem;
  /* Use a responsive grid that keeps each dashboard panel at a minimum
     width of 750px.  When the viewport is wide enough all four panels
     will display on a single row.  As the available width shrinks the
     grid will automatically wrap the cards into a 2×2 or 1×4 layout.
     The auto-fit keyword ensures that empty columns are collapsed when
     there is not enough space for another 750px column. */
  grid-template-columns: repeat(auto-fit, minmax(750px, 1fr));
}

/* Ensure each dashboard card never shrinks below 750px.  This rule
   complements the grid definition above so that the dashboard panels
   remain readable and consistently spaced even on larger displays. */
.dashboard-grid > .card {
  min-width: 750px;
  /* Fix the dashboard panels to a consistent height as requested.  Each card
     on the dashboard (inventory, staff, territories and latest news) should
     be exactly 1057px tall to eliminate unexpected resizing or overflow. */
  height: 1057px;
}

/* Allow the dashboard panels (inventory, staff, territories and latest news)
   to grow with the viewport instead of being capped at a fixed height.  By
   removing the fixed max-height the cards will expand to fill the available
   vertical space within the dashboard grid.  A flex grow allows the
   containers to occupy remaining space, while overflow behaviour ensures
   long lists remain scrollable without overflowing the page. */
/* Allow the dashboard panels to grow with the viewport instead of being capped
   at a fixed height.  Latest news is handled separately to cap its height. */
/* Separate inventory list from other summary panels so it can have its own
   maximum height.  The inventory list can grow large as more items are
   acquired, so cap its height and allow scrolling when necessary. */
#staff-summary,
#territory-summary {
  flex-grow: 1;
  overflow-y: auto;
}

#staff-summary {
  max-height: 1000px;
}

#territory-summary {
  max-height: none;
}

/* Limit the inventory list to a maximum height of 1000px.  When the list
   exceeds this height a vertical scrollbar appears, preventing the
   dashboard layout from being pushed off screen by long inventories. */
#inventory-list {
  flex-grow: 1;
  max-height: 1000px;
  overflow-y: auto;
}

/* Restrict the latest news panel to a maximum height of 1057px.  When
   there are more entries than fit within this space, a vertical scrollbar
   will appear. */
#latest-news {
  /* Allow the latest news panel to grow but cap its height to avoid
     excessive scrolling.  The max-height is reduced to 1000px as
     requested so the news feed does not stretch indefinitely. */
  flex-grow: 1;
  max-height: 1000px;
  overflow-y: auto;
}

/* Territory event indicator styling.  When a territory has an active
   event, this element appears beneath the territory name in the header.
   A smaller font and subtle highlight distinguish it from the main name. */
.territory-event-info {
  font-size: 0.85rem;
  /* Display on its own line and center for all territories */
  display: block;
  margin-top: 0.1rem;
  margin-left: 0;
  color: #ffd966; /* warm gold tone to draw attention to special events */
  text-align: center;
}

/* Dashboard override: keep event text inline with territory name */
#dashboard .territory-summary-info .territory-event-info {
  display: inline;
  margin-top: 0;
  margin-left: 0.5rem;
  text-align: left;
}

/* Retained for compatibility; no special override needed now */
.territory-event-info.party-center { }

.card {
  background-color: rgba(0,0,0,0.5);
  border-radius: 6px;
  padding: 1rem;
  /* Remove subtle lift and shadow from dashboard cards for a flatter appearance */
  box-shadow: none;
}

.card h3 {
  margin-bottom: 0.5rem;
}

/* Make dashboard card headers use flexbox so that additional controls (such as
   the reorder button) can be aligned to the far right.  This allows the
   title to stay on the left while any helper buttons sit on the right. */
#dashboard .dashboard-grid .card h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Ensure the dashboard reorder button sits on the far right of its header.  By
   giving it an auto left margin within the flex container, it will push
   itself away from the title. */
.dashboard-reorder-btn {
  margin-left: auto;
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  /* Hide inline text to avoid mojibake; icon provided via ::after */
  font-size: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dashboard-reorder-btn:hover {
  background-color: #3a8f67;
}

/* Render dropdown chevron via pseudo-element for reliable glyph */
.dashboard-reorder-btn::after {
  content: '\25BE'; /* ▾ small down-pointing triangle */
  font-size: 0.9rem;
  line-height: 1;
}

/* Pawn shop collapse indicator: fixed 12x14 box with a down arrow */
.pawn-category-header .collapse-indicator {
  display: inline-block;
  width: 12px;
  height: 14px;
  line-height: 14px;
  font-size: 12px;
  text-align: center;
  margin-right: 0.35rem;
  vertical-align: middle;
  pointer-events: none;
}
.pawn-category-header .collapse-indicator::before {
  content: '\25BE'; /* ▾ */
}

/* Dropdown menu used to choose which dashboard panel to swap with.  The menu
   appears absolutely positioned relative to the header and aligns to the
   right. */
.dashboard-reorder-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #1f5138;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 0.2rem 0;
  min-width: 8rem;
  z-index: 50;
}
.dashboard-reorder-option {
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.dashboard-reorder-option:hover {
  background-color: #3a8f67;
}

.error {
  color: #ff6b6b;
  margin-top: 0.5rem;
}

.msg {
  margin-top: 0.5rem;
  color: #98e79a;
}

/* Shop */
.shop-menu {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.shop-menu button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.shop-menu button.active {
  background-color: #2a6a4b;
}

#shop-content {
  display: grid;
  /* Increase the minimum column width to 250px so that each item card
     maintains a consistent width.  The auto-fill keyword allows the
     grid to wrap items appropriately on smaller screens. */
  /* Each shop item card should be 250px wide.  Using auto-fit causes the
     grid to automatically create as many 250px columns as will fit in
     the container.  Any extra horizontal space remains empty, keeping
     card widths consistent. */
  grid-template-columns: repeat(auto-fit, 250px);
  gap: 1rem;
}

/* When the shop content container is in pawn shop layout mode, override
   the default grid and use a vertical flex layout so the header sits
   above the columns.  This class is toggled in updateShop() when
   entering or leaving the pawn shop. */
#shop-content.pawn-layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Gear shop cards */
.shop-gear-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0.5rem;
  /* rarity- classes add the inner border colour */
  background-color: rgba(0,0,0,0.35);
}
.shop-gear-card h4 {
  width: 100%;
  text-align: center;
}
.shop-gear-image {
  width: 220px;
  height: 85px;
  object-fit: contain;
  border-radius: 4px;
}
/* Glow around picture using rarity colours */
.shop-gear-image.rarity-common { box-shadow: 0 0 12px rgba(255,255,255,0.6); }
.shop-gear-image.rarity-uncommon { box-shadow: 0 0 12px rgba(50,205,50,0.6); }
.shop-gear-image.rarity-rare { box-shadow: 0 0 12px rgba(30,144,255,0.6); }
.shop-gear-image.rarity-epic { box-shadow: 0 0 12px rgba(128,0,128,0.6); }
.shop-gear-image.rarity-legendary { box-shadow: 0 0 12px rgba(255,215,0,0.7); }

.sold-out-badge {
  display: inline-block;
  background-color: #555;
  color: #eee;
  border-radius: 12px;
  padding: 0.25rem 0.6rem;
  font-weight: 600;
}

.shop-item {
  background-color: rgba(0,0,0,0.4);
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  /* Set a fixed width on each shop item card.  This size matches the
     grid column width defined on the container above. */
  width: 250px;
}

.shop-item h4 {
  font-size: 1rem;
  margin: 0;
  /* Match the item header colour scheme to the dashboard ingredient headers. */
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
}

.shop-item p {
  font-size: 0.8rem;
  margin: 0.3rem 0;
  flex-grow: 1;
}

.shop-item button {
  align-self: end;
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.shop-item button:hover {
  background-color: #3a8f67;
}

.category-header {
  grid-column: 1 / -1;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #d5f5e3;
  text-decoration: underline; /* underline category names to reduce redundancy */
}

/*
 * Toggle button for supply runner auto-buying.  The base class defines
 * common styling, while `.on` and `.off` modify the background colour to
 * communicate state.  Colours match the existing button palette used in
 * the game: green-ish for enabled and red-ish for disabled.
 */
.supply-toggle {
  margin-left: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #e0eae3;
}
.supply-toggle.on {
  background-color: #2a6a4b;
}
.supply-toggle.off {
  background-color: #602426;
}

/* Style disabled header options inside supply runner dropdowns */
.dropdown-header {
  /* Bold and underline headers in supply runner dropdowns and center align */
  font-style: normal;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  color: #8ab8a0;
}

/* Financial record day separators */
#financial-record .financial-day {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Limit the height of the financial record container so that only two days of
   profit/loss entries are visible at once.  Additional entries can be
   scrolled into view.  Without this constraint the profit panel could grow
   indefinitely as history accumulates. */
#profit-card {
  height: 300px;
  display: flex;
  flex-direction: column;
}
#profit-card #financial-record {
  max-height: calc(300px - 2.2rem);
  overflow-y: auto;
}

/* Produce row and manual progress bar styling on production page */
/* Layout for manual production row.  Align the produce, auto and progress elements on one line. */
.produce-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
/* The manual progress container acts as a flex container so the spinner and bar align horizontally. */
.produce-row .manual-progress {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.produce-row .manual-progress .progress-bar {
  height: 6px;
  background-color: #1f5138;
  border-radius: 3px;
  overflow: hidden;
  flex-grow: 1;
}
.produce-row .manual-progress .progress-bar span {
  display: block;
  height: 100%;
  transition: width 0.2s linear;
}

.item-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 0.3rem;
  align-self: center;
  object-fit: contain;
  filter: brightness(0.9);
}

.shop-action {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Container for quantity controls in the shop.  This holds the minus button,
   quantity input and plus button side-by-side.  Separating these controls
   from the buy button makes it easier to position the new cart icon and
   full-width buy button underneath. */
.qty-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Small shopping cart icon used on shop item cards.  The icon is centred
   above the buy button.  A fixed size ensures consistency across cards. */
.cart-icon-small {
  width: 24px;
  height: 24px;
  align-self: center;
  margin-top: 0.4rem;
  /* Invert colours to ensure the white cart remains visible on dark
     backgrounds.  The source image has a transparent background and
     white icon; no further filtering is required. */
  filter: brightness(1) saturate(0);
}

/* When the cart icon appears within the quantity controls row, remove
   the top margin and add a small left margin so it aligns neatly with
   the minus, input and plus buttons. */
.qty-controls .cart-icon-small {
  margin-top: 0;
  margin-left: 0.5rem;
}

/* Full-width buy button on shop item cards.  This button displays the
   total cost of the currently selected quantity.  Its styling mirrors
   the existing buy button but spans the card’s width for emphasis. */
.shop-buy-btn {
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-top: 0.3rem;
  text-align: center;
}
.shop-buy-btn:hover {
  background-color: #3a8f67;
}

/* Territory assignment sections on the Territories page.  These styles support
   the new three-slot drug assignment UI. */
.territory-assign-section {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.territory-assign-slot {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Dropdown used for selecting a drug to assign.  Styled similarly to the supply
   runner dropdowns and spans the full width of the territory card. */
/*
  Dropdown used for selecting a drug to assign.  Styled similarly to the
  supply runner dropdowns with a dark green background and light text.
  This palette ensures the select blends seamlessly with the overall
  interface theme.  The select spans the full width of its container.
*/
.territory-drug-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  border: none;
  background-color: #1f5138;
  color: #e0eae3;
}

/* Container for the controls (Assign Qty, Assign All, -, qty input, +) */
.territory-assign-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Quantity input for territory assignments */
.territory-qty-input {
  width: 60px;
  padding: 0.3rem;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
}

/* Buttons inside the territory assign controls.  Reuse colours from other
   control buttons to maintain consistency. */
.territory-assign-controls button {
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}

.territory-assign-controls button:hover {
  background-color: #3a8f67;
}

.assign-stock-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.assign-stock-list .assign-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.assign-stock-list .assign-row input.assign-qty-input {
  width: 60px;
  padding: 0.3rem;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
}
.assign-stock-list .assign-row button {
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
.assign-stock-list .assign-row button:hover {
  background-color: #3a8f67;
}

.dealer-label {
  font-weight: bold;
  margin-top: 0.3rem;
  /* Remove bottom margin to tighten spacing between dealer label and following elements */
  margin-bottom: 0;
}

.empty-inventory {
  color: #ff6b6b;
}

.inventory-section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.inventory-section h4 {
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  /* Align all sub-headers to the same top position by removing any top margin */
  margin-top: 0;
}

#staff-summary > div:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
#staff-summary h4 {
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
  margin-top: 0;
}

#staff-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#staff-summary ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 0;
}
.staff-name {
  margin-right: auto;
}
.staff-wage {
  margin-left: auto;
  white-space: nowrap;
  font-weight: bold;
  /* Add some padding on the left so the wage doesn’t butt up directly
     against the staff type name when space is limited. */
  padding-left: 0.5rem;
}

#latest-news ul {
  list-style-type: disc;
  padding-left: 1.2rem;
  margin: 0;
}
#latest-news li {
  margin: 0.2rem 0;
}

.drug-button-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.shop-qty-input {
  /* Increase the width of the shop quantity input so players can read and
     enter multi-digit numbers more comfortably.  The new width of
     75px matches the design mock-up requested by the user. */
  width: 75px;
  padding: 0.3rem;
  margin-bottom: 0;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
  height: 1.8rem;
}

/* Staff dashboard header styling */
/*
 * Staff header styling
 *
 * Each staff section on the dashboard and in the staff summary uses a
 * <h4> element with the class .staff-header.  Inside this header we
 * insert two spans: one for the staff type name (.staff-header-name) and
 * one for the total wage (.staff-wage).  The flexbox layout below ensures
 * that the name occupies all available horizontal space while the wage
 * hugs the far right edge of the header.  When the layout is narrow
 * (mobile or small window) the wage will continue to align right rather
 * than crowding against the name.
 */
.staff-header {
  display: flex;
  align-items: center;
  /* Space out the name and wage so they anchor to the left and right edges,
     respectively.  Without justify-content: space-between the flex-grow on
     the name span may not fully push the wage to the far right, leaving
     it lingering near the name. */
  justify-content: space-between;
  width: 100%;
}

/* Ensure the staff type name does not shrink when space is limited */
/* The name span should occupy all available horizontal space so that
   the wage span gets pushed to the far right.  We also prevent the
   name from wrapping to multiple lines to maintain a clean layout. */
.staff-header-name {
  flex-grow: 1;
  flex-shrink: 1;
  white-space: nowrap;
}

/* (removed) legacy generic collapse-indicator; now scoped to pawn shop only */

/* Staff page */
#staff-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#staff-menu button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

#staff-menu button.active {
  background-color: #2a6a4b;
}

/* Dropdown placed in the staff menu (e.g., Chemists filter) */
.staff-menu-select {
  /* Match staff card background so the control visually integrates */
  background-color: #111;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  color: #e0eae3;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  outline: none;
  height: 2.1rem;
}
.staff-menu-select:focus {
  background-color: #111;
  color: #e0eae3;
}
.chemists-filter-select option {
  color: #e0eae3;
  background-color: #1f5138;
}

#staff-content {
  display: grid;
  /* Widen the staff cards and hire panels by increasing the minimum column width. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.staff-card {
  /* Match the gear back style for consistency */
  background-color: #111;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  /* Align items to the start so labels and values line up on the left. */
  align-items: flex-start;
  text-align: left;
  /* Ensure cards are a bit wider. The width is primarily controlled by
     the grid column minmax, but adding a minimum width here prevents cards
     from shrinking below our intended width on narrow screens. */
  min-width: 280px;
}

#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 9999;
  /* Allow clicks to pass through the toast container to underlying elements.
     This prevents reflow or focus issues when toasts are shown on top of
     interactive pages and reduces interference with progress bar updates. */
  pointer-events: none;
}

.toast {
  background-color: rgba(0, 0, 0, 0.8);
  color: #e0eae3;
  padding: 0.8rem 1.2rem;
  border-radius: 4px;
  min-width: 280px;
  max-width: 400px;
  font-size: 1rem;
  animation: fadeOut 5s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.staff-card h4 {
  margin: 0;
  font-size: 1.1rem;
}

.staff-card p {
  flex-grow: 1;
  font-size: 0.8rem;
}

.staff-card button {
  margin-top: 0.5rem;
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.3rem;
}

/* ==== Custom Staff Card Styles ====
 * Staff cards adopt a playing card aesthetic based on their role.  Each role
 * uses a tinted matte background and an inner border (inset box shadow) to
 * distinguish between chemists, dealers, supply runners, assistants and
 * henchmen.  Colours are chosen to harmonise with the existing palette while
 * clearly differentiating roles.  The border radius is slightly increased
 * for a softer card feel.
 */
.chemist-staff-card {
  background-color: #111; /* match hire card dark background */
  box-shadow: inset 0 0 0 3px #5bc0de;
  border-radius: 6px;
}
.dealer-staff-card {
  background-color: #111; /* match hire card dark background */
  box-shadow: inset 0 0 0 3px #e67e22;
  border-radius: 6px;
}
.supply-runner-staff-card {
  background-color: #111; /* match hire card dark background */
  box-shadow: inset 0 0 0 3px #f1c40f;
  border-radius: 6px;
}
.assistant-staff-card {
  background-color: #111; /* match hire card dark background */
  box-shadow: inset 0 0 0 3px #ff99cc;
  border-radius: 6px;
}
.henchman-staff-card {
  background-color: #111; /* match hire card dark background */
  box-shadow: inset 0 0 0 3px #e74c3c;
  border-radius: 6px;

  /* Expand the minimum width of henchman cards to accommodate larger gear
     slots.  The default staff card min-width (280px) can be too narrow
     when showing 220×85px images stacked vertically.  Increase the
     minimum width slightly so the card content fits comfortably. */
  min-width: 300px;
}

/* Drag handle styles for staff card headers.  The handle (the staff member's
 * name) indicates that the card can be dragged.  On hover the handle rises
 * slightly and casts a soft glow, and the cursor changes to reflect that the
 * element is draggable.  The staff-name-header class increases the font
 * size and weight to emphasise the name.
 */
.drag-handle {
  cursor: grab;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.drag-handle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.staff-name-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

/* Purchase advice styling for shop items */
.purchase-advice {
  font-size: 0.8rem;
  margin: 0.2rem 0;
}
.advice-orange {
  color: #e67e22;
}
.advice-red {
  color: #e74c3c;
}
.advice-yellow {
  color: #f1c40f;
}
.advice-green {
  color: #2ecc71;
}

/* Visually separate sections within staff cards with subtle horizontal rules. */
.staff-card hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin: 0.4rem 0;
}

/* === Henchmen panel styling === */
/* When viewing henchmen, use the same responsive grid as other staff.  This keeps the
   henchmen hire panel at a similar width to other staff cards instead of
   forcing it to 650px wide. */
#staff-content.henchmen-view {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Henchmen cards adopt the same minimum width as other staff cards to align
   consistently across the staff page. */
.henchmen-card {
  min-width: 280px;
}
/* Layout for the assignments list displayed in the henchmen hire panel.
   Display territories in two equal columns for easier scanning.  A simple
   two-column grid is used instead of auto-filling so that the list
   consistently splits into two columns regardless of screen width.  The
   gap is increased slightly to avoid crowding long territory names. */
.henchmen-assignments-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

/* Underline territory names in the henchmen assignment list and place the
   assigned henchman or "Not assigned" text on the line below.  These
   classes are applied dynamically by the script when constructing the
   assignment grid. */
.territory-name {
  text-decoration: underline;
}
.assignment-name {
  display: block;
}
/* Style quotes from henchmen on their staff cards */
.henchman-quote {
  font-style: italic;
  opacity: 0.8;
  margin-top: 0.3rem;
}

/* Supply runner rows for configuring automatic supplies */
.supply-row {
  display: flex;
  align-items: center;
  /* Allow the contents of a supply row to wrap onto multiple lines on narrow screens.
     Without wrapping, the select, quantity input and buttons can overflow the
     card when the available width is limited. */
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
/*
  Styling for supply runner dropdowns.  These selects adopt the same dark
  green palette as other interactive elements (e.g. territory unlock
  buttons) with light text for high contrast.  When the list is open or
  the select is focused, the colours remain consistent.  Options within
  the select inherit the same background and text colour so there is no
  unexpected mint-green highlight on hover or selection.
*/
.supply-row select {
  flex: 1;
  background-color: #1f5138;
  color: #e0eae3;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  outline: none;
}

/* Maintain the dark green palette when the supply runner select gains focus */
.supply-row select:focus {
  background-color: #2a6a4b;
  color: #e0eae3;
}

/* ================= Bank panel layout adjustments ================= */
/* Centre the descriptive text and controls in the deposit and savings panels.
   Without these rules the elements align to the left by default.  A column
   flex layout centres child elements horizontally and vertically and
   ensures consistent spacing. */
#bank .deposit-info,
#bank .savings-info-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Stack the contents of the savings panel beneath its heading.  By
   applying a column flex layout to the entire panel, the image and the
   information container naturally follow the heading instead of sitting
   beside it.  Center alignment matches the deposit and loan panels. */
.bank-savings {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bank-savings h3 {
  width: 100%;
  text-align: center;
}

/* Centre the deposit and savings control rows and provide equal spacing
   between inputs and buttons.  Using justify-content ensures the elements
   remain centred when the available width changes. */
#bank .deposit-controls,
#bank .savings-controls {
  /* Layout both deposit and savings controls using a three-column grid.
     The amount input occupies the first column and stretches to fill
     available space, while the action buttons in the second and third
     columns size to fit their content.  This ensures all controls
     remain on a single row without wrapping, matching the mock-up. */
  display: grid;
  /* Use a default three-column layout for the deposit controls.  The
     savings controls will override this to allow for an extra button. */
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* Increase the number of columns for the savings controls to accommodate
   the additional "Withdraw All" button.  Without this override the
   buttons wrap onto a new line, which is not desired. */
#bank .savings-controls {
  grid-template-columns: 1fr auto auto auto;
}

/* Layout for the restructured loan form.  The inputs stack vertically on
   smaller screens and sit side by side with the loan information on larger
   screens.  The form takes up the full width of the panel. */
#bank .loan-form {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

/* Stack the amount and duration inputs vertically and allow them to scale
   to fill half the available width. */
#bank .loan-form .loan-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 50%;
}

/* Ensure loan inputs span the full width of their column. */
#bank .loan-form .loan-inputs input,
#bank .loan-form .loan-inputs select {
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

/* Allocate the right-hand column to the loan info display. */
#bank .loan-form #loan-info {
  flex: 1 1 50%;
}

/* Reserve styling for the take loan button in the loan panel.  The
   grid-area and width assignments are now defined later in the file.  No
   default margin should be applied so the button aligns flush with
   adjacent elements. */
#take-loan-button {
  margin-top: 0;
  width: 100%;
}

/* Make the Savings panel content stack below the heading.  By setting
   the bank-image to display as a block, the alt text (displayed when
   images are missing) appears on its own line beneath the header rather
   than inline with it.  Centre the image horizontally for symmetry with
   the other bank panels. */
.bank-savings .bank-image {
  display: block;
  margin: 0.5rem auto;
}

/* When browsing supply runners enlarge the staff grid
   column width so the wider supply runner cards fit without overlapping. */
#staff-content.supply-runners-view {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* When browsing recruitment agents enlarge the staff grid similarly to
   supply runners.  Their cards contain multiple input sections and
   therefore require extra horizontal space. */
#staff-content.recruitment-agents-view {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* Styles to reduce the vertical footprint of hired henchmen cards.  These
   classes are applied dynamically when generating the staff cards. */
.henchman-hired-card {
  padding: 0.5rem;
  /* Lay out hired henchman cards using a vertical flexbox so the name,
     status, quote and buttons sit closer together.  Using space-between
     compresses gaps while still maintaining separation between sections. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Reduce line height to minimise vertical spacing and allow multiple
     henchman cards to be displayed on the same row without excessive
     whitespace. */
  line-height: 1.2;
  /* Constrain the maximum height so two rows of henchman cards can fit
     within the staff area on typical viewport sizes.  If content exceeds
     this height a scrollbar will appear inside the card rather than
     expanding the entire page. */
  /* Limit the maximum height so that two rows of henchmen fit comfortably
     on most screens without scrolling.  The user requested a taller card
     ceiling of 350px to allow more content before scrollbars appear. */
  /* Expand the maximum height of hired henchman cards.  The previous cap of
     350px often caused content (especially quotes and gear lists) to be
     truncated or scroll within the card.  Increasing this limit allows
     all information to display cleanly without internal scrollbars on
     typical viewports. */
  /* Increase maximum height of hired henchman cards to accommodate gear slots */
  /* Increase maximum height to ensure new gear slots and additional
     content are visible without clipping. */
  max-height: 700px;
  overflow-y: auto;
}
.henchman-hired-card h4 {
  font-size: 1rem;
  margin: 0.2rem 0;
}
.henchman-hired-card p {
  font-size: 0.75rem;
  margin: 0.15rem 0;
  line-height: 1.2;
}
/* Reduce spacing for horizontal rules inside hired henchman cards */
.henchman-hired-card hr {
  margin: 0.3rem 0;
}
/* Trim vertical space for select and button elements inside hired henchman cards */
.henchman-hired-card select,
.henchman-hired-card button {
  margin: 0.15rem 0;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
}

/* Prevent the equip-select from changing the card width.
   Keep the select fixed to the slot width and allow the
   native dropdown list to extend beyond the card if needed. */
.henchman-gear-slot .equip-select {
  width: 100%;
  max-width: 100%;
}

/* When a select is open, allow overflow so the dropdown is visible. */
.henchman-hired-card.overflow-open {
  overflow: visible;
}

/* Reduce padding and typography on lab assistant cards to better match
   their limited content. */
.lab-assistant-card {
  padding: 0.5rem;
  /* Use a vertical flex layout to compress the space between sections on
     lab assistant cards.  A small gap reduces visual clutter without
     running content together. */
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1.2;
  /* Constrain lab assistant cards to a maximum height so that long bonus
     descriptions or research summaries do not stretch the card excessively.
     A vertical scrollbar will appear if content exceeds this height. */
  max-height: 350px;
  overflow-y: auto;
}

/* Integrated top bar: place game title on the left and player info on the right */
#top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* The logo sits in the top bar in place of the textual game title.  Set
   a reasonable height so it aligns with the player info chips and allow
   the width to scale based on the intrinsic image dimensions.  A small
   right margin gives breathing space between the logo and the stats. */
#game-logo {
  height: 40px;
  /* Reduce the width of the game logo to better balance the top bar. */
  width: 124px;
  margin-right: 0.5rem;
  background-image: url('img/logo_final_shipment.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

/* Ensure spans follow the title naturally */
#top-bar span {
  margin-left: 0;
}

/* Restructure savings panel to align image and information side by side */
#bank .bank-savings {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "image info";
  align-items: flex-start;
}

#bank .bank-savings h3 {
  grid-area: header;
  text-align: left;
  margin: 0 0 0.5rem 0;
}

#bank .bank-savings .bank-image {
  grid-area: image;
  margin: 0;
  justify-self: start;
}

#bank .bank-savings .savings-info-container {
  grid-area: info;
}
.lab-assistant-card h4 {
  font-size: 1rem;
  margin: 0.2rem 0;
}
.lab-assistant-card p {
  font-size: 0.75rem;
  /* Compress paragraphs within lab assistant cards to remove excess vertical
     space between the last unlock and bonuses sections. */
  margin: 0.15rem 0;
  line-height: 1.2;
  /* Prevent paragraphs from stretching to fill the height of the card.  The
     default .staff-card style gives paragraphs flex-grow of 1, which causes
     large empty regions on lab assistant cards.  Override this so the card
     shrinks to the natural height of its contents. */
  flex-grow: 0;
}
/* Reduce spacing for horizontal rules inside lab assistant cards */
.lab-assistant-card hr {
  margin: 0.3rem 0;
}


/* Constrain the territories list height so the page&rsquo;s bottom is respected.
   A vertical scrollbar appears when there are many territories. */
#territories-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Options inside the supply runner dropdown use the same dark background and light text */
/*
  Supply runner drop-down options adopt a dark green background to match the
  rest of the interface.  Do not hard-code the text colour here so that
  individual options can specify their own tint via inline styles.  The
  background uses !important to override browser defaults while the text
  colour inherits from the element (allowing inline colours to show).
*/
.supply-row select option {
  background-color: #1f5138 !important;
  color: inherit;
}

/* When hovering or selecting an option, use a slightly lighter green
   background.  Preserve the option's text colour by inheriting it
   instead of forcing a white colour. */
.supply-row select option:hover,
.supply-row select option:checked {
  background-color: #2a6a4b !important;
  color: inherit !important;
}
.supply-row input[type="number"] {
  width: 4rem;
  background-color: rgba(255,255,255,0.1);
  color: #e0eae3;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}

/* Supply runner quantity input styling */
.supply-qty-input {
  width: 4rem;
  background-color: rgba(255,255,255,0.1);
  color: #e0eae3;
  border: none;
  height: 28.4px;
  margin-top: 4px;
  padding: 0 0.5rem;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Provide extra width for supply runner cards so that the select, quantity input
   and buttons fit comfortably on one line.  Align items to the start rather
   than centering so the layout reads left to right. */
.supply-runner-card {
  /* Reduce the minimum width of supply runner cards to match other staff cards.
     A very wide minimum width caused the controls to spill outside the grid on
     narrow screens.  Setting width: 100% allows the card to scale within its
     grid cell, while a lower min-width prevents overflow on small viewports. */
  min-width: 280px;
  width: 100%;
  align-items: flex-start;
  text-align: left;
}

/* === Supply runner item restructuring === */
/* Container for each supply item; stacks the select row above the controls row. */
.supply-item-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Separation line between supply items within a runner card */
.supply-runner-card hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  width: 100%;
  margin: 0.4rem 0;
}

/* Controls row for supply items.  Centre the controls horizontally. */
.supply-controls-row {
  justify-content: center;
}

/* Label preceding the quantity controls */
.supply-controls-row span:first-child {
  margin-right: 0.4rem;
  white-space: nowrap;
}

/* Production page */
#drug-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.drug-card {
  background-color: rgba(0,0,0,0.4);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.drug-card h4 {
  margin: 0;
  font-size: 1.1rem;
}

.drug-card p {
  font-size: 0.8rem;
  margin: 0.3rem 0;
}

/*
  Description text displayed beneath each drug name on the production page.
  The quote is shown in italics to distinguish it from other data and uses
  a slightly smaller font size.  A muted colour is applied so that it
  doesn&rsquo;t compete with the headline but remains readable.
*/
.drug-description {
  font-style: italic;
  font-size: 0.75rem;
  color: #bfc9c3;
  margin-top: 0.2rem;
}

.drug-card button {
  align-self: flex-start;
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.progress-bar {
  height: 6px;
  background-color: #1f5138;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}

.progress-bar span {
  display: block;
  height: 100%;
  background-color: #3a8f67;
  width: 0;
  /* Remove the width transition on progress bars.  Animating width each
     time a toast appears causes the bars to jitter.  Instead, update
     the width immediately and hint to the browser that the width will
     change for smoother updates. */
  transition: none;
  will-change: width;
}

.trophy-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  vertical-align: middle;
}

/*
 * Bright and vivid colours for the different drug types.
 *
 * Previously the pill, powder and liquid bars used darker, muted hues
 * (#4caf50, #ff9800 and #2196f3 respectively). To make the progress
 * indicators more eye-catching we switch to neon-inspired colours.
 * These values (green, orange and blue) were chosen for high
 * saturation and brightness while still fitting the palette. Feel free
 * to tweak the values further if you find them too intense.
 */
/*
 * Deprecated drug type colours
 *
 * Progress bar colours are now assigned dynamically in script.js based on
 * individual drug names using the `drugColors` map.  The legacy pill,
 * powder and liquid classes are no longer applied to progress bars and
 * thus the associated colour declarations have been removed.  The default
 * .progress-bar span colour is defined above and will be overridden by
 * inline styles when appropriate.
 */

/* Territories page */
#territories-list {
  display: grid;
  /* Increase the minimum column width to make territory cards slightly wider */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.territory-card {
  background-color: rgba(0,0,0,0.4);
  padding: 1rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Ensure that textual information on the territory card (such as Active
   customers) sits above the portrait and its shimmer overlay.  By
   positioning these paragraphs relative with a positive z-index, we
   prevent the shimmer pseudo-element from obscuring the text. */
.territory-card > p {
  position: relative;
  z-index: 1;
}

.territory-card button {
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

/* Styling for the dealer inventory list on the territories page.  Each
   drug appears on its own line with a small return button to the right.
   Align items horizontally and add a slight gap between the name and the
   button. */
.dealer-inventory-container {
  margin-bottom: 0.5rem;
}
.dealer-inventory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.1rem 0;
}
.dealer-inventory-row button {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  border-radius: 3px;
  cursor: pointer;
}
.dealer-inventory-row button:hover {
  background-color: #367a59;
}

/* Star drug line styling */
.territory-star-drug {
  font-size: 0.85rem;
  margin: -0.3rem 0 0.3rem 0;
  color: #b5d6c8;
}

.territory-icon {
  width: 100%;
  /* Force the portrait image to fill the entire front face.  A fixed
     height combined with object-fit: cover ensures the aspect ratio is
     maintained and the image fills the container without leaving gaps. */
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  /* Remove the bottom margin so the image does not extend beyond the
     portrait area, ensuring the front and back faces align perfectly. */
  margin-bottom: 0;
}

/* Territory portrait flipping styles
 * Each territory card contains a flip container with a front and back face.
 * Clicking on the container rotates it around the Y axis to reveal the
 * description on the reverse side.  The container also provides a
 * shimmering hover effect and a tooltip prompt.
 */
.territory-icon-container {
  /*
     Ensure the portrait area on the territories page has a defined height.  Without
     a vertical dimension the absolute-positioned front/back faces of the flip
     animation collapse the container to zero height, causing the entire card
     to shrink.  Use a padding-top trick to maintain a consistent aspect ratio
     relative to the card&rsquo;s width (here ~75%).  The inner content is positioned
     absolutely and fills the available space.  Retain perspective and cursor
     settings from the original definition.  These rules override the earlier
     definition via CSS specificity and placement at the end of the file.
   */
  /* Fix the size of the territory portrait to a square.  The front and back
     faces of the flip animation now occupy a 313.5 × 313.5 px area so that
     territory icons align perfectly with the square territory graphics used
     elsewhere in the UI.  Remove the padding-top trick that previously
     established the aspect ratio and instead set an explicit height. */
  /* Make the territory portrait container responsive and square.
     Instead of using a fixed pixel size, set the width to 100% of its parent
     and use the padding-top technique to maintain a perfect square aspect ratio.
     The absolute-positioned inner faces fill this area.  This fixes the issue
     where territory portraits overflow their cards on small screens. */
  position: relative;
  width: 100%;
  /* Use padding-top equal to width to create a responsive square.  Height will
     be determined by this padding and should not be set explicitly. */
  padding-top: 100%;
  /* Remove bottom margin so the portrait sits flush with the next element */
  margin-bottom: 0;
  perspective: 1000px;
  cursor: pointer;
  /* Constrain any overflow from the flip faces. */
  overflow: hidden;
}

.territory-icon-container .territory-card-inner {
  /* Position the inner wrapper absolutely so that it overlays the padded
     container.  Setting height:100% ensures both the front and back faces
     occupy the full portrait area.  Transition and preserve-3d properties
     are retained from the original definition. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.territory-icon-container.flip .territory-card-inner {
  transform: rotateY(180deg);
}

.territory-card-front,
/* Ensure both the front and back faces of the territory card always fill
   the available portrait area.  Without an explicit height the front
   relies on its child image's intrinsic dimensions, which can cause
   discrepancies between the front and back sizes (resulting in the back
   appearing slightly taller).  Specifying height:100% ensures the
   absolute-positioned faces match the height defined by their
   container's padding-top aspect ratio. */
.territory-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 4px;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Front face inherits most properties from the shared definition above but
   explicitly declares its height so that it mirrors the back. */
.territory-card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 4px;
  top: 0;
  left: 0;
  overflow: hidden;
  /* The front shows the image; no additional styling needed beyond
     filling its container. */
}

/* Remove the redundant empty definition for the front face.  Styling is
   defined above where height and positioning are set to match the back
   face. */

.territory-card-back {
  /* Rotate the back so it appears correctly after the flip */
  transform: rotateY(180deg);
  /* Apply a stylised wood effect.  We combine a warm brown base colour
     with subtle repeating gradients to simulate wood grain.  These
     gradients are lightweight and tile seamlessly, giving a cartoon
     appearance without requiring an external image. */
  background-color: #a87c4f;
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0px,
      rgba(255, 255, 255, 0.08) 2px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 4px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 3px,
      rgba(0, 0, 0, 0) 3px,
      rgba(0, 0, 0, 0) 6px
    );
  background-size: 6px 6px;
  padding: 0.5rem;
  box-sizing: border-box;
  /* Extend the back to fill the entire portrait height so the
     description matches the size of the image. */
  height: 100%;
  overflow-y: auto;
  /* Give the text an engraved effect by using a dark base colour and
     subtle opposing shadows.  The light shadow on the top left and the
     dark shadow on the bottom right create a carved appearance. */
  /* Use black text on the description side for better readability.  The
     previous engraved effect used dark brown text with shadows, which
     could make the letters hard to read. */
  color: #000;
  text-shadow: none;
}

/* Scroll wrapper for the description inside the back of the card.  Allows
   the description to scroll independently when it exceeds the available
   height. */
.territory-desc-scroll {
  max-height: 100%;
  overflow-y: auto;
}

/* Hover shimmer effect: create a shimmering overlay on the front face
   when the container is hovered.  The overlay uses a moving linear
   gradient. */
.territory-icon-container .territory-card-front::after {
  /* Remove the shimmering overlay on the portrait.  The pseudo-element is
     still defined but hidden to disable the shimmer effect entirely. */
  content: '';
  display: none;
}

.territory-icon-container:hover .territory-card-front::after {
  /* Disable the shimmer animation on hover. */
  animation: none;
}

@keyframes territory-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Tooltip styling for the flip prompt.  Display the tooltip above the
   container on hover using the data-tooltip attribute. */
.territory-icon-container[data-tooltip] {
  position: relative;
}
.territory-icon-container[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: #e0eae3;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.8rem;
  opacity: 0.9;
  pointer-events: none;
  z-index: 10;
}


.territory-header {
  background-color: #1f5138;
  color: #e0eae3;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.territory-header h3 {
  margin: 0;
  font-size: 1.1rem;
  text-align: center;
  width: 100%;
}

.assign-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.assign-row .assign-label {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.assign-row input.assign-qty-input {
  width: 3rem;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  border: none;
  height: 1.8rem;
}

.assign-row button {
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  border: none;
  background-color: #2a6a4b;
  color: #e0eae3;
  cursor: pointer;
  font-size: 0.75rem;
}

.assign-row button:hover {
  background-color: #367a59;
}

/* Push save/pause/end/etc buttons to the right */
#save-game {
  margin-left: auto;
}

/* Bank page */
#bank input {
  padding: 0.5rem;
  border-radius: 4px;
  border: none;
  margin-right: 0.5rem;
  width: 150px;
}

#bank button {
  background-color: #2a6a4b;
  border: none;
  color: #e0eae3;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

/* Bank page layout enhancements */
#bank .bank-top {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0;
  /* The top bank container simply arranges two card panels side by side.
     Individual panels are now their own cards so we remove additional
     padding here. */
}

/* Ensure headings inside the deposit and loan panels span the full width of
   their container so they appear above the images and controls instead of
   alongside them.  Match the font size and weight used on the savings panel
   to maintain consistent header styling across all three panels.  Also
   provide a consistent green background bar behind each of the bank card
   headers (deposit, savings and loan) so they visually match the sales
   reports and other panel headers throughout the UI.  Negative margins
   ensure the coloured bar spans the entire card width, aligning flush with
   the card edges. */
#bank .bank-deposit > h3,
#bank .bank-savings > h3,
#bank .bank-loan > h3 {
  width: 100%;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e0eae3;
  /* Apply the green header styling consistent with the dashboard and sales
     report cards.  Padding creates breathing room and border-radius
     softens the edges of the header bar. */
  background-color: #2a6a4b;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  /* Pull the header bar outwards so it spans edge-to-edge within the card */
  margin-left: -1rem;
  margin-right: -1rem;
}

/* Position the deposit panel elements into the defined grid areas. */
#bank .bank-deposit h3 {
  grid-area: header;
}
#bank .bank-deposit .bank-image {
  grid-area: image;
  /* Reset margin to align properly in the grid */
  margin: 0;
}
#bank .bank-deposit .deposit-info {
  grid-area: info;
}

/* Position the loan panel&rsquo;s structural elements into the defined grid areas. */
#bank .bank-loan h3 {
  /* Occupy the header area and stretch across both columns */
  grid-area: header;
  width: 100%;
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #e0eae3;
}
#bank .bank-loan .bank-image {
  grid-area: image;
  /* Reset any default margin on images so they align cleanly */
  margin: 0;
  justify-self: start;
}
#bank .loan-info-container {
  grid-area: info;
}
/* Make the take loan button span the width of the loan panel and occupy
   its own row defined by the action area.  Remove any top margin so the
   button sits flush beneath the loan form. */
#take-loan-button {
  grid-area: action;
  width: 100%;
  margin-top: 0;
}

/* Deposit panel occupies one third of the top bank area. */
#bank .bank-deposit {
  /* Use flex-basis of roughly one third so the deposit panel sits alongside
     the savings and loan panels when all three are present. */
  /* Make all top bank panels share equal width.  Each panel uses flex-grow
     and flex-basis values that give them identical widths within the
     container. */
  flex: 1 1 0;
  /* Display the savings panel using a grid layout so the image and information
     sit side-by-side.  The header occupies the full width on the first row. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "image info";
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  /* Fix the height of the bank panels so they remain uniform.  The height
     excludes padding, which is 16px all around (1rem). */
  height: 280px;
  /* Allow the card to shrink below its content&rsquo;s intrinsic size.  Without
     this the longer description in the deposit card would force the
     container to grow wider than its siblings, breaking the equal widths. */
  min-width: 0;
}

/* Remove gaps inside the savings panel.
 *
 * While the base .bank-savings selector defines a 1rem gap between
 * grid areas to space out its contents, the design calls for a more
 * compact layout that mirrors the deposit and loan panels.  Setting
 * gap to 0 here overrides the earlier declaration and pulls the image
 * and info container snugly together.
 */
#bank .bank-savings {
  gap: 0;
}

/* Savings panel styling mirrors the deposit panel.  Use a smaller flex
   allocation so the savings card occupies roughly a quarter of the bank-top
   row.  Switch to a grid layout to align the heading, image and content
   consistently: the header spans both columns on the first row, the piggy
   image sits in the left column and the description/controls fill the
   right. */
#bank .bank-savings {
  /* Make all top bank panels share equal width */
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "image info";
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  height: 280px;
  min-width: 0;
}

/* Loan panel occupies roughly one quarter of the top bank area.  Use a grid
   layout similar to the deposit and savings panels so the header spans the
   full width, the image anchors the left column, and the information and
   form fill the right column.  The action button occupies its own row at
   the bottom of the card to mirror the mock-up. */
#bank .bank-loan {
  /* Make all top bank panels share equal width */
  flex: 1 1 0;
  display: grid;
  grid-template-columns: auto 1fr;
  /* Three rows: header, body and action.  The body row grows to fill any
     remaining space while the action row hugs its content. */
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "image info"
    "action action";
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  height: 280px;
  min-width: 0;
}

/* Loan controls align inputs and button horizontally */
/*
  Layout for the loan controls on the bank page.  The controls are arranged
  vertically so that the amount and duration fields sit on one row and the
  action button appears beneath them, spanning the combined width of the
  inputs.  Align the controls centrally within their container and allow
  sufficient spacing between rows.
*/
#bank .loan-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
  width: 100%;
}

/* Row that houses the loan amount input and the days select.  It expands
   to fill the available width of the controls container. */
#bank .loan-inputs {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

/* Display the loan amount and days select at roughly half the width of the parent.
   Using a fixed flex-basis prevents them from stretching to fill the entire
   row and keeps them aligned.  A shared height ensures both controls sit
   evenly on the baseline. */
#bank .loan-inputs input,
#bank .loan-inputs select {
  flex: 0 0 48%;
  max-width: 48%;
  min-width: 0;
  height: 2.2rem;
  line-height: 2.2rem;
  /* Add horizontal and vertical padding to align with the loan amount input */
  padding: 0.2rem 0.4rem;
}

#bank .loan-inputs input {
  flex: 0 0 48%;
  max-width: 48%;
  min-width: 0;
  height: 2.2rem;
  line-height: 2.2rem;
  /* Apply horizontal and vertical padding similar to the bank deposit and savings inputs */
  padding: 0.2rem 0.4rem;
}

/* Style the days select in the loan panel to match supply runner dropdowns. */
#loan-days-select {
  background-color: rgba(255,255,255,0.1);
  color: #e0eae3;
  border: none;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  outline: none;
  /* Make the height of the loan repayment dropdown consistent with the loan amount input */
  height: 2rem;
}
/* Maintain consistent appearance when focused */
#loan-days-select:focus {
  background-color: rgba(255,255,255,0.1);
  color: #e0eae3;
}
/* Options inside the select should have dark text for readability */
#loan-days-select option {
  color: #0d2b1f;
}

/* Match the deposit and loan amount input boxes to the loan days select theme.
   These inputs use the same translucent background and light text as the
   select so that all controls in the bank panel have a consistent look. */
#bank-amount,
#loan-amount,
#savings-amount {
  /* Use a consistent translucent background and light text for all money inputs
     (bank deposit, loan amount and savings amount).  Apply padding on all
     sides so the text doesn&rsquo;t sit flush against the border. */
  background-color: rgba(255,255,255,0.1);
  color: #e0eae3;
  border: none;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  outline: none;
}

/* Maintain the same appearance when the territory drug select receives focus.
   Without this rule, browsers may invert the colours on focus, making the
   dropdown difficult to read against the dark theme. */
/* Keep the dark palette when the territory drug select gains focus */
.territory-drug-select:focus {
  background-color: #2a6a4b;
  color: #e0eae3;
}

/*
  When players open the drug selection dropdown on the Territories page the
  browser&rsquo;s default styling can make the options list appear with a bright
  white background.  To maintain the dark theme even when the dropdown is
  expanded, apply a dark background and light text to all options within
  the territory drug select.  This rule mirrors the styling of the closed
  select box so that the dropdown integrates seamlessly with the rest of
  the interface.
*/
/* Options inside the territory drug dropdown use the same dark background and light text */
.territory-drug-select option {
  /* Force dark background and light text for all options inside territory drug dropdowns. */
  background-color: #1f5138 !important;
  color: #e0eae3 !important;
}

/*
  Use a dark green background for options in supply runner dropdowns to
  match the rest of the game&rsquo;s theme.  White text provides strong
  contrast.
*/
/*
  For supply runner drop-downs later in the stylesheet, ensure options
  retain a dark background while allowing their text colour to be set
  dynamically via inline styles.  The text colour inherits from the option
  element so colours assigned in JavaScript are visible to the player.
*/
.supply-row select option {
  background-color: #1f5138;
  color: inherit;
}

/*
  When the user focuses a territory drug selector or a supply runner dropdown the
  control should adopt the green and white colour scheme used for territory
  unlock buttons.  Focused selects turn light with dark green text.  Inside
  these dropdowns, hovered and selected options invert the palette so the
  active choice stands out.
*/
/*
  When a territory drug selector or a supply runner dropdown gains focus,
  apply a slightly lighter green background while maintaining the light
  text.  This ensures the control stands out without resorting to the
  browser&rsquo;s default bright highlight.
*/
.territory-drug-select:focus,
.supply-row select:focus {
  background-color: #2a6a4b;
  color: #e0eae3;
}

.territory-drug-select option:hover,
.territory-drug-select option:checked,
.supply-row select option:hover,
.supply-row select option:checked {
  background-color: #2a6a4b !important;
  /* Inherit the option's existing colour so drug tints remain visible */
  color: inherit !important;
}

/* The loan button spans the width of the panel and occupies the dedicated
   action row in the loan grid.  Remove any top margin so it sits flush
   beneath the form. */
#take-loan-button {
  grid-area: action;
  width: 100%;
  margin-top: 0;
}

/* Loan image uses the same sizing as the bank image */
.loan-image {
  width: 175px;
  height: 175px;
  object-fit: cover;
  border-radius: 4px;
}

/* Loan info container grows to fill remaining space */
#bank .loan-info-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Savings info container shares the same layout as the loan info panel. */
#bank .savings-info-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Deposit image */
#bank .bank-image {
  width: 175px;
  height: 175px;
  object-fit: cover;
  border-radius: 4px;
  /* Provide some breathing room between the image and the card edge */
  margin-left: 0.5rem;
}

/* Container for deposit text and controls */
#bank .deposit-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Deposit controls arranged horizontally with wrapping */
#bank .deposit-controls {
  /* Use the same grid layout defined in the combined rule above. */
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* Savings controls mirror the deposit controls layout but have an
   additional "Withdraw All" button.  Use four columns so the
   input field and the three buttons (Deposit, Withdraw, Withdraw All)
   remain on a single row. */
#bank .savings-controls {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* Grid for sales reports and profit/loss containers */
#bank .bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  /* Stretch grid items to equal heights and fill available vertical space */
  align-items: stretch;
}

/*
  The content areas within the sales report and daily profit/loss cards can
  accumulate many entries over a long play session.  Constrain their height
  and enable vertical scrolling so players can review historical data
  without the card growing indefinitely.  The muted green scrollbar theme
  defined globally will be applied automatically.
*/
#sales-report-content {
  /* Let the sales report content grow and scroll within its card */
  flex-grow: 1;
  overflow-y: auto;
  /* Constrain the report height so that it does not push the page beyond
     the viewport.  When the content exceeds this height a scrollbar
     appears inside the panel. */
  /* Increase the maximum height so that more reports are visible.  The sales report
     content will now grow up to 1050px before scrolling, matching the user&rsquo;s
     request for a taller panel. */
  max-height: 1050px;
}

#financial-record {
  /* Let the financial record grow and scroll within its card */
  flex-grow: 1;
  overflow-y: auto;
  /* Limit the height similarly to the sales report so the card stays
     contained within the page height */
  /* Reduce the maximum height so that approximately two days of financial
     history are visible before scrolling.  This keeps the card compact
     and consistent with the player&rsquo;s request. */
  max-height: 300px;
}

/* Sales report items */
.sales-report-item {
  /* Lay out each sales report horizontally so the territory image and
     associated details sit side-by-side.  A row flex direction and gap
     ensure the name and statistics appear to the right of the picture
     instead of underneath it. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Bank page card headers: create green header bars similar to the dashboard cards */
#bank .bank-card > h3 {
  background-color: #2a6a4b;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  /* Extend the header across the card by offsetting the margin equal to the card padding */
  margin: -1rem -1rem 0.75rem -1rem;
}

/*
 * Bank panel headers
 *
 * Apply the same green header styling used on the sales report and
 * profit/loss cards to the deposit, savings and loan panels.  These
 * panels use their own grid layout so the margin values differ from
 * the .bank-card rule; only a bottom margin is needed to separate
 * the header from the content.  Ensuring a consistent header colour
 * across all bank panels provides a unified visual language.
 */
#bank .bank-deposit > h3,
#bank .bank-savings > h3,
#bank .bank-loan > h3 {
  background-color: #2a6a4b;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin: 0 0 0.75rem 0;
  width: 100%;
}
#bank .bank-card {
  /* Allow the card to expand and take up available vertical space */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*
 * Fix the height of the left and right columns on the bank page.  Using
 * a fixed pixel height ensures the panels remain uniform regardless of
 * content size.  Overflow is hidden; vertical scrollbars can be added
 * if desired by adjusting overflow-y.
 */
#bank .bank-left,
#bank .bank-right {
  height: 1010px;
}

/*
 * Add a blurred backdrop to the bank left column.  The semi-transparent
 * background colour and backdrop-filter blur create a frosted glass
 * effect, helping the deposit, savings and loan panels stand out
 * against the page background.  A subtle border radius softens the
 * container edges.  Note that backdrop-filter requires browser
 * support and will gracefully degrade where unsupported.
 */
#bank .bank-left {
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 0.5rem;
}

/*
 * Dashboard card headers
 *
 * Use the same green header styling on the Inventory, Staff,
 * Territories and Latest News cards found on the dashboard.  The
 * negative margins mirror the padding applied to the card itself so
 * that the header bar spans the full width of the card.  Without
 * this the coloured bar would be inset and not align with the card
 * edges.  These rules intentionally target only direct h3 children
 * of dashboard cards to avoid altering other headings elsewhere.
 */
#dashboard .card > h3 {
  background-color: #2a6a4b;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  margin: -1rem -1rem 0.75rem -1rem;
}

.sales-report-header {
  /* Stack the territory name underneath the image inside the header.  The
     header itself remains a column so that it can be placed next to the
     details section when the parent uses a row layout.  Constrain the
     width to match the image so the details panel grows independently. */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 175px;
  gap: 0.5rem;
}

.sales-report-image {
  width: 175px;
  height: 175px;
  object-fit: cover;
  border-radius: 4px;
  /* Provide some breathing room between the image and the card edge */
  margin-left: 0.5rem;
}

.sales-report-body {
  margin-left: 0;
}

.sales-report-druglist {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0;
}

.sales-report-druglist li {
  margin-bottom: 0.3rem;
}

/* Dealer advice formatting on the territories page.  The header uses a
   bold label (e.g. “Timothy says:”) to introduce the quote, while the
   quote itself inherits the italic style and muted colouring from the
   production page&rsquo;s drug descriptions. */
.dealer-advice-header {
  font-weight: bold;
  margin-top: 0.5rem;
}

.dealer-advice-quote {
  font-style: italic;
  font-size: 0.75rem;
  color: #bfc9c3;
  margin-top: 0.2rem;
}

/* New advice list styling for territories.  Replace the single paragraph
   with a bulleted list of up to three lines.  The list inherits the
   muted colouring from other text on the territories page. */
.dealer-advice-list {
  margin-top: 0.2rem;
  /* Align the advice list flush with the card edge.  Previously a left margin
     created an indented list which no longer matches the desired layout. */
  margin-left: 0;
  font-size: 0.75rem;
  color: #bfc9c3;
  list-style-type: disc;
  padding-left: 1rem;
}
.dealer-advice-list li {
  font-style: italic;
  margin-bottom: 0.1rem;
}

/* Leaderboards */
.leaderboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

#start-leaderboards {
  /* Centre the leaderboard beneath the player input and start button.  Use
     automatic left/right margins to horizontally centre the container and
     prevent it hugging the right side of the page. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 1rem auto 0;
  width: 100%;
  max-width: 50rem;
  /* Allow the start screen leaderboard section to expand so the table can
     show 10 entries before scrolling, with the donation row displayed below. */
  max-height: none;
  overflow: visible;
}
.start-leaderboard-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
/*
 * Start screen leaderboard
 *
 * The leaderboard on the start screen should aim to be up to 1500px
 * wide but never overflow the viewport on smaller devices.  When
 * there is more horizontal space the table centres itself and grows
 * to the preferred width.  On small screens it simply fills the
 * available width.  The vertical dimension still fills the parent and
 * scrolls if there are many entries.
 */
#start-leaderboard-table {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  overflow-y: auto;
}

#start-extra-buttons {
  position: absolute;
  top: 1rem;
  right: 2rem;
  display: flex;
  gap: 0.5rem;
}

.leaderboard-tabs button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
}

.leaderboard-tabs button.active {
  background-color: #2a6a4b;
}

#leaderboard-tables table {
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(0,0,0,0.4);
  margin-bottom: 1rem;
}

#leaderboard-tables th, #leaderboard-tables td {
  padding: 0.6rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#leaderboard-tables th {
  background-color: rgba(0,0,0,0.6);
}
/* Scrollbars */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a6a4b; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a8f67; }

/* Style the hamburger icon inside the mobile menu toggle.  This custom
   SVG mirrors Bootstrap's default toggler icon but uses the current
   text colour to blend seamlessly with the existing dark colour
   scheme. */
#menu-toggle .navbar-toggler-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23e0eae3' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M1 4h14M1 8h14M1 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Ensure the mobile menu toggle does not stretch across the entire header */
#menu-toggle {
  width: auto;
  align-self: flex-start;
}

/* ======================= */
/* Bank layout adjustments */
/* Arrange the bank page into two columns: the left column contains the
   deposit, savings and loan panels stacked vertically, while the right
   column holds the sales report and profit/loss panels stacked
   vertically.  Each column occupies roughly half of the available
   width on desktop screens.  On small devices the existing media
   queries below will revert to a single column layout. */
/* Only apply the flex layout to the bank page when it is visible.  When
   the page is hidden (e.g. on the start screen) it should remain
   collapsed. */

/* Bank page two-column layout.  Using CSS Grid here ensures the left
   and right halves of the bank page (containing the deposit/savings/loan
   panels and the sales reports/profit panels respectively) sit
   side-by-side whenever the viewport is wide enough.  Each column
   occupies 50% of the available width.  On small screens this grid
   automatically collapses into a single column via the media query
   defined below. */
#bank .bank-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Left column: deposit, savings and loan cards stack vertically.  The
   grid model handles the width so no flex properties are needed. */
#bank .bank-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Right column: sales report and profit/loss cards stack vertically.
   Allow these cards to stretch equally to fill the column height. */
#bank .bank-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#bank .bank-right .bank-card {
  flex: 1;
}

/* Ensure leaderboard tables can scroll horizontally on very narrow screens */
#leaderboard-tables,
#start-leaderboard-table {
  overflow-x: auto;
}

/*
  Limit the height of the leaderboard table and enable vertical scrolling so
  players can browse entries beyond the top 10.  The game now displays
  up to 500 ranks, but only the first 10 fit comfortably on screen.
  A max-height ensures the list doesn&rsquo;t grow indefinitely; a scrollbar
  appears when more rows are present.  Horizontal scrolling remains
  supported for narrow viewports via the rule above.
*/
#leaderboard-tables {
  /* Allow the leaderboard area in the main game to grow up to 1080px tall
     before introducing a scrollbar.  Using a max-height rather than a
     hard-coded height means the container can collapse when fewer rows are
     present.  When the content exceeds this height a vertical scrollbar
     appears to keep the table contained within the layout. */
  max-height: 1080px;
  overflow-y: auto;
}

/*
  Opening day sale banner style.  This notice appears at the top of the
  shop on day 1 to inform players that every item is half price for the
  grand opening.  A bold colour and centred text draw attention without
  clashing with the rest of the interface.  The banner is inserted
  dynamically by script.js when appropriate.
*/
#opening-sale-banner {
  /* Use the same red tone as the regular sale banner (see .sale-banner below)
     for a consistent colour scheme across all sale notifications.  The
     previous orange hue has been replaced. */
  background-color: #c0392b;
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 4px;
}

/* Responsive layout tweaks for tablets and phones.  These rules adjust
   layouts when the viewport width is 768px or narrower to ensure
   components stack vertically and remain readable on smaller devices. */
/* Apply tablet/mobile layout tweaks on screens 800px wide or narrower. */
@media (max-width: 800px) {
  /* Stack the top bar vertically on small screens */
  #top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  /* Stack navigation buttons vertically and allow them to fill the available width */
  nav#main-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem 0;
  }
  nav#main-menu button {
    width: 100%;
    justify-content: flex-start;
  }
  /* Display shop items in a single column */
  #shop-content {
    grid-template-columns: 1fr;
  }
  /* Stack bank columns vertically on small screens.  When the viewport
     is narrow, collapse the bank page into a single column so that the
     deposit/savings/loan cards and the sales/profit cards appear one
     below the other rather than side-by-side. */
  #bank .bank-columns {
    grid-template-columns: 1fr;
  }
}

/* On very narrow screens collapse the dashboard into a single column.  By
   default the dashboard uses a two-column layout; this override ensures
   the panels stack vertically when the viewport is too narrow to
   comfortably accommodate two columns. */
@media (max-width: 600px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
/* Responsive menu state tweaks
   When the hamburger menu is activated (the main menu is visible on small
   screens), we apply the .menu-open class to the header.  This causes the
   top bar to lay out its items horizontally rather than stacking them.
   The !important flag ensures the override applies even within other
   media queries. */
header.menu-open #top-bar {
  flex-direction: row !important;
  flex-wrap: wrap;
}
/* Remove the vertical offset on the info chips when the menu is open so
   they align neatly in a row. */
header.menu-open #top-bar span {
  top: 0;
}

/* When the hamburger menu is closed (but visible on small screens), apply
   similar layout rules to the top bar.  This class is toggled via
   JavaScript and ensures that the player info chips display in a row and
   sit immediately above the menu button rather than stacking vertically. */
header.menu-closed #top-bar {
  flex-direction: row !important;
  flex-wrap: wrap;
}
header.menu-closed #top-bar span {
  top: 0;
}

/* Adjust the layout and spacing of the bank page so that the left and right
   columns fill the available vertical space.  By setting a 100% height on
   the grid container and making the columns flexible, the panels will
   automatically expand to match the user&rsquo;s window height. */
#bank .bank-columns {
  height: 100%;
}
#bank .bank-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  gap: 0.5rem;
}
#bank .bank-right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Position the deposit, savings and loan headers in the top-right corner of
   their respective cards.  Absolute positioning removes the header from
   the normal document flow and allows the main content to sit below it.
   Additional top padding on the cards ensures the header does not overlap
   the interior content. */
#bank .bank-deposit,
#bank .bank-savings,
#bank .bank-loan {
  position: relative;
  /* Add extra top padding to accommodate the absolutely positioned header */
  padding-top: 2.5rem;
}
#bank .bank-deposit > h3,
#bank .bank-savings > h3,
#bank .bank-loan > h3 {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  margin: 0;
  width: auto;
}

/* Ensure the production lines column expands to fill available horizontal
   space, regardless of earlier definitions that set flex-grow to zero.
   The !important flag overrides any previous declarations. */
.production-lines-column {
  flex-grow: 1 !important;
  flex-basis: 0;
}

/* Set a fixed width for the chemist assignment column to 250px.  This
   complements the user&rsquo;s request for a consistent size when the column is
   positioned on either side of the drug card. */
.chemist-assignment-column {
  flex: 0 0 250px;
  max-width: 250px;
}

/* Add left padding to the loan information container to separate the
   contents from the card edge. */
#bank .loan-info-container {
  padding-left: 12px;
}

/* Add a top margin to the loan days select to give breathing room above
   the dropdown. */
#loan-days-select {
  margin-top: 8px;
}

/* Remove spacing between the deposit, savings and loan cards on the bank page. */
#bank .bank-left {
  gap: 0;
}
#bank .bank-deposit,
#bank .bank-savings,
#bank .bank-loan {
  gap: 0;
}

/*
 * Harmonise bank panel headers
 *
 * Apply the same header styling used on the sales report and profit/loss
 * cards to the deposit, savings and loan panels.  This override
 * eliminates the absolute positioning previously used to place the
 * headings in the top right corner.  Instead, the header bar
 * stretches across the full width of the card using negative
 * margins to counteract the card&rsquo;s padding.  Resetting the card
 * padding ensures the content sits correctly beneath the header.
 */
#bank .bank-deposit,
#bank .bank-savings,
#bank .bank-loan {
  /* Standardise card padding to match bank-card */
  padding: 1rem;
}
#bank .bank-deposit > h3,
#bank .bank-savings > h3,
#bank .bank-loan > h3 {
  position: static;
  margin: -1rem -1rem 0.75rem -1rem;
  background-color: #2a6a4b;
  color: #e0eae3;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  width: auto;
}

/* In the loan panel, place the inputs side-by-side and allow them to share
   available space.  Previously the form stacked vertically on small
   screens; this override ensures the amount and days fields always sit
   next to each other. */
#bank .loan-form .loan-inputs {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
#bank .loan-form .loan-inputs input,
#bank .loan-form .loan-inputs select {
  flex: 1 1 0;
  max-width: none;
  min-width: 0;
}

/* Position the take loan button beneath the inputs when housed inside the
   loan-info-container.  Give it a small top margin and full width to
   align with the input fields. */
.loan-info-container #take-loan-button {
  margin-top: 0.5rem;
  width: 100%;
}

/* ------------------------------------------- */
/* Custom additions for consistent header spacing and news styling */
/* Style the day headers in the Latest News section to mirror other sub-headers.
   They share the same translucent green background, padding and border radius as
   inventory, staff and territory section headers.  Align the top margin to
   zero so these headers start at the same vertical position as others. */
.news-day-header {
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-top: 0;
  margin-bottom: 0.3rem;
}

/* Reduce the margin above lists that follow a news day header to tighten
   spacing and align content consistently across dashboard cards. */
.news-day-header + ul {
  margin-top: 0.2rem;
}

/* Set top margins for all section headers (inventory, staff, territory, news) to zero.
   This ensures the first header within each card begins at the same height. */
.inventory-section h4,
#staff-summary h4,
.territory-summary-info h4,
.news-day-header {
  margin-top: 0;
}

/* Adjust padding on loan amount input and take loan button to prevent overlap
   with the loan panel image.  The button gains extra left padding and the
   input gains a modest left indent. */
#bank #loan-amount {
  padding-left: 16px;
}
#take-loan-button {
  padding-left: 24px;
}

/* Allow the production lines column to expand to fill remaining space in
   each drug card.  By enabling flex-grow the lines column becomes
   responsive to the container width rather than sticking to a fixed
   minimum size. */
.production-lines-column {
  flex-grow: 1;
}

/* === Custom styling for enhanced UI elements === */

.drug-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

/* On the production page we no longer underline drug names.  Instead, the
   header includes a subtle separator line below the name to delineate
   content sections within the card. */
.drug-header h4 {
  text-decoration: none;
}

/* Add a separator line beneath each drug header.  A thin, semi-transparent
   border visually divides the header (icon, name and reorder control) from
   the description and ingredient details without adding extra DOM elements. */
.drug-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
}

.drug-icon {
  /* Increase the icon size on the production page as requested.  A 50×50
     pixel footprint makes the drug icons easier to distinguish from one
     another when browsing the list of available recipes. */
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.territory-summary-icon {
  width: 24px;
  height: 24px;
  margin-right: 0.4rem;
  vertical-align: middle;
}

.fin-positive { color: #2ecc71; }
.fin-negative { color: #e74c3c; }

.territory-summary-section:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 0.3rem;
  padding-bottom: 0.3rem;
}
.territory-summary-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 0.3rem;
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.inventory-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* Wrapper for the drug quantity and toggle button within the dashboard inventory.  This
   wrapper ensures the quantity sits immediately to the left of the production
   toggle button instead of being separated by the flex space-between layout.
   Using inline-flex allows the contents to size naturally and remain adjacent. */
.inventory-right-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.inventory-row span:last-child {
  text-align: right;
  flex-shrink: 0;
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem;
}

/*
 * Drug icons within the dashboard inventory.  When displaying drugs in
 * the inventory list, prepend a small image to the drug name.  This
 * class defines the size and spacing for those icons.
 */
.inventory-drug-icon {
  width: 35px;
  height: 35px;
  margin-right: 0.35rem;
  vertical-align: middle;
}

/* Ensure the left cell in special items grows so qty sits before the Use button */
.inventory-row .inv-left {
  display: flex;
  align-items: center;
  flex: 1;
}
.inventory-row .special-qty {
  margin-right: 0.4rem;
}

/* Roman numeral icons used to indicate the tier of gear items in the
   dashboard inventory.  These icons are small and unobtrusive so as
   not to clutter the item list. */
.gear-tier-icon {
  width: 18px;
  height: 18px;
  margin-right: 0.3rem;
  vertical-align: middle;
  object-fit: contain;
}

/* Icon used before the supply runner status indicator on the dashboard inventory.
   This logo is intentionally small (approximately the same height as the tick/cross)
   so it doesn&rsquo;t overwhelm the text.  A slight left margin separates it from
   the preceding ingredient/packaging/equipment name. */
.runner-status-icon {
  width: 14px;
  height: 14px;
  margin-left: 0.3rem;
  vertical-align: middle;
  object-fit: contain;
}

.ingredients-grid .inventory-row {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 0.5rem;
}
.ingredients-grid .inventory-row:nth-child(2n) {
  border-right: none;
  padding-right: 0;
}

.progress-spinner {
  width: 20px;
  height: 20px;
  object-fit: contain;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.separator {
  margin: 0 0.3rem;
  color: #8aa;
}

.staff-type-icon {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin: 0 auto 0.4rem;
}

.chem-btn {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  font-size: 0.7rem;
  /* Make chemist assignment buttons align vertically with the text by
     using flexbox.  This prevents the buttons from sitting slightly
     higher than the baseline of their slot labels. */
  display: flex;
  align-items: center;
  /* Lower the chemist assignment buttons slightly within the chemist slot.  A top
     margin prevents the button from sitting flush against the top edge and makes
     the button look visually centred. */
  margin-top: 3px;
}
.chem-btn:hover {
  background-color: #3a8f67;
}

/* Small switch/reorder button displayed on the dashboard card headers.
   This mirrors the colour palette of existing buttons but uses a
   compact size so it does not overpower the panel titles. */
.dashboard-reorder-btn {
  margin-left: 0.5rem;
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  /* Hide inline text to avoid mojibake; icon provided via ::after */
  font-size: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.dashboard-reorder-btn:hover {
  background-color: #3a8f67;
}

.settings-group {
  margin-top: 1rem;
  font-size: 0.9rem;
}
.settings-group input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Style the select element used for the auto‑save interval in the settings page */
.settings-group select {
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  border-radius: 4px;
  border: 1px solid #4b6954;
  background-color: #1d3a2b;
  color: #e0eae3;
}

/* Subtle note text beneath certain settings controls */
.settings-note {
  font-size: 0.8rem;
  color: #9da9a1;
  margin-top: 0.25rem;
  margin-left: 1.5rem;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

.qty-btn {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  height: 1.8rem;
}
.qty-btn:hover {
  background-color: #3a8f67;
}

.staff-total-wages {
  margin-top: 0.4rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.news-day-header {
  background-color: #1f5138;
  color: #e0eae3;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.6rem;
}
.news-normal {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}
.news-warning {
  background-color: rgba(163, 113, 0, 0.25);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}
.news-danger {
  background-color: rgba(139, 0, 0, 0.35);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}

/* Highlight territory event alerts (start/end) with a bright gold text colour. */
.news-event {
  color: #d4af37;
  font-weight: 600;
}

/* Highlight upcoming parties in the latest news feed with a warm gold tone. */
.news-party {
  background-color: rgba(218, 165, 32, 0.35);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}

.start-leaderboard-tabs button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  /* Match the style of the in-game leaderboard tabs.  Increase padding
     and font size for better readability. */
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.start-leaderboard-tabs button.active {
  /* Use the same active colour as the primary leaderboard tabs */
  background-color: #2a6a4b;
}
#start-leaderboard-table table {
  /* Align the start screen leaderboard styling with the in-game leaderboard. */
  width: 100%;
  border-collapse: collapse;
  background-color: rgba(0,0,0,0.4);
  margin-bottom: 1rem;
}
#start-leaderboard-table th,
#start-leaderboard-table td {
  padding: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  font-size: 0.9rem;
}
/* Fix the height of the start-screen leaderboard area */
#start-leaderboard-table {
  height: 535px;
  overflow-y: auto;
}

/* Header cells for the start screen leaderboard mimic the in-game header styling */
#start-leaderboard-table th {
  background-color: rgba(0,0,0,0.6);
}
#start-extra-buttons button {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.8rem;
}
#start-extra-buttons button:hover {
  background-color: #2a6a4b;
}

.hidden-item {
  display: inline-block;
  width: 28px;
  height: 12px;
  background-color: rgba(0,0,0,0.8);
  border-radius: 3px;
  margin: 0 0.2rem;
  vertical-align: middle;
}

.staff-card {
  align-items: center;
  text-align: center;
}

/* === DRUG CARD & PRODUCTION LAYOUT === */

.drug-details .component-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.6;
}
.drug-details .component-list strong {
  margin-right: 0.4rem;
}

.drug-main-content {
  width: 450px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.production-lines-column {
  /* Prevent the production lines column from automatically taking all
     remaining space when resizers are used.  Disabling flex-grow
     ensures that the width set via inline styles (from the drag
     behaviour) actually takes effect. */
  flex-grow: 0;
  min-width: 200px;
  /* Remove the left border from the production lines column.  Borders on
     these columns created vertical separators that the user requested be
     removed. */
  border-left: none;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  padding-top: 1px; /* Nudge for alignment */
}

.chemist-assignment-column {
  flex-shrink: 0;
  width: 250px;
  max-width: 300px;
  /* Remove the left border from the chemist assignment column to match the
     production lines column.  Draggable gutters now provide the only
     visual separation. */
  border-left: none;
  /* Apply balanced horizontal padding so the chemist column does not hug
     either gutter.  Eight pixels on each side matches the requested
     spacing while still aligning neatly with the other columns. */
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  display: flex;
  flex-direction: column;
}

.chemist-assignment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.chemist-assignment-header h5 {
  margin: 0;
}

.chemist-assignment-header button {
  margin: 0;
}

.chemist-slot, .progress-line-container {
  height: 32px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.progress-line-container {
  gap: 0.4rem;
}

.chemist-slot {
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 0 0.2rem;
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.chemist-slot select {
    background-color: rgba(255,255,255,0.1);
    color: #e0eae3;
    border: none;
    border-radius: 3px;
    padding: 0.2rem;
    flex-grow: 1;
    margin-right: 0.5rem;
}

/* Progress bar states */
.progress-bar.inactive {
  background-color: rgba(255, 255, 255, 0.1);
}
.progress-bar.inactive span {
  background-color: transparent;
}

.progress-bar.idle span {
  background-color: rgba(241, 196, 15, 0.6);
  animation: pulse-idle 2s infinite ease-in-out;
}

/* Add a glowing animation for active production lines and manual progress bars.  The
   glow subtly pulses to draw attention to lines that are currently
   producing drugs.  The colour of the glow is set via the
   --glow-color custom property on the element. */
.progress-line-container.glowing, .manual-progress.glowing {
  animation: glow-pulse 1.5s infinite ease-in-out;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0px var(--glow-color);
  }
  50% {
    box-shadow: 0 0 8px 4px var(--glow-color);
  }
}

@keyframes pulse-idle {
  0% { opacity: 0.7; }
  50% { opacity: 1.0; }
  100% { opacity: 0.7; }
}

/* Helper class to render drug names with a white outline and a black glow.
   This class uses a subtle white stroke around the glyphs via the
   -webkit-text-stroke property and applies a dark drop shadow.  The colour of
   the text itself should be set inline or via another class.  Wrap any
   drug name in a span with this class to ensure consistent highlighting. */
.drug-name-outline-glow {
  /*
   * Previously drug names were wrapped in a helper class that applied a white
   * outline and a subtle drop shadow. This white halo made the text stand
   * out against dark backgrounds, but it could be visually distracting and
   * appears muddy when combined with our newly saturated colour palette.
   *
   * To simplify the appearance we remove the text stroke and shadows. The
   * surrounding elements still set the text colour via inline styles and
   * `drugColors`, so no additional styling is needed here. This class now
   * effectively acts as a semantic wrapper without any visual effect.
   */
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Apply the glow animation directly to the bar that fills up inside a progress bar.
   The --glow-color CSS variable should be set on the span element to define
   the colour of the glow.  This rule replaces the previous glow on the entire
   container, drawing attention to the filled portion rather than the whole bar. */
/*
 * Apply the glow animation to the progress bar container rather than the
 * inner span.  Previously the glowing class was attached to the span
 * element that represented the filled portion of the bar. This meant the
 * glow followed the filled segment and could appear clipped by the bar&rsquo;s
 * edges. By moving the glow onto the `.progress-bar` itself the
 * animation now pulses around the entire bar, making active lines stand
 * out without obscuring the fill.
 */
.progress-bar.glowing,
.produce-row .manual-progress .progress-bar.glowing {
  animation: glow-pulse 1.5s infinite ease-in-out;
}

/* === Polishing additions === */
img, canvas {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Star rating styles */
/* Each star is rendered using a span with the 'star' class.  Additional classes
   indicate whether the star is full, half or empty.  We use a single unicode
   star character and vary opacity to depict half and empty states.  A gold
   colour is applied to all stars to match the game's aesthetic. */
.star {
  color: #FFD700;
  font-size: 1rem;
  margin-right: 2px;
}
.full-star {
  opacity: 1;
}
.half-star {
  /* Render a true half-filled star using a background gradient.  The left half
     is golden and the right half is silver to represent the empty portion.
     The star character itself uses the gradient via text clipping. */
  background: linear-gradient(90deg, #FFD700 50%, #C0C0C0 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.empty-star {
  opacity: 0.25;
}

/* When a rating is zero, render all five stars in silver instead of faded gold. */
.zero-star {
  color: #C0C0C0;
  opacity: 1;
}

/* Make the star rating container show a help cursor to indicate it is interactive. */
.rating-container {
  cursor: help;
}

/*
  Remove the “help” cursor (which displays a question mark) from dealer
  hood control ratings.  When hovering over the hood control stars on
  the dealer page the tooltip should appear with the same styling as
  the drug bonus tooltip without the help cursor.  By overriding the
  cursor on rating containers where the data-role is “dealer” we ensure
  the pointer does not display a question mark.  A default cursor is
  used instead to match the behaviour of other text-based tooltips.
*/
.rating-container[data-role="dealer"] {
  cursor: default;
}

/*
  Remove the “help” cursor (which displays a question mark) from
  chemist drug mastery ratings.  On the chemist page, the star rating
  under the Drug Mastery header should behave like normal text with no
  special cursor.  The tooltip will still appear when hovering, but
  the cursor will not display the question mark.
*/
.rating-container[data-role="chemist"] {
  cursor: default;
}

/* Tooltip displayed when hovering over star ratings.  This element
   is positioned near the mouse cursor and indicates the percentage bonus
   corresponding to the star rating. */
.star-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.85);
  color: #e0eae3;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
}

/* Tooltip displayed when hovering over the inventory tick/cross indicators.  These
   tooltips explain whether a supply runner is assigned to automatically restock
   the corresponding item.  The style mirrors the star-tooltip for consistency. */
.inventory-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.85);
  color: #e0eae3;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 10000;
  white-space: nowrap;
}

/* Game over modal overlay and content styles.  The overlay covers the entire
   viewport with a semi-transparent dark background.  The content box is
   centered and uses the same green palette as the rest of the UI. */
.game-over-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20000;
}
.game-over-content {
  background-color: #1f5138;
  color: #e0eae3;
  padding: 1rem;
  border-radius: 6px;
  text-align: center;
  max-width: 90%;
}
.game-over-content img {
  display: block;
  margin: 0 auto 0.5rem auto;
}
.game-over-content button {
  margin-top: 0.5rem;
  padding: 0.4rem 1rem;
  background-color: #2a6a4b;
  border: none;
  border-radius: 4px;
  color: #e0eae3;
  cursor: pointer;
}
.game-over-content button:hover {
  background-color: #3a8f67;
}

/* Colour-coded backgrounds for profit/loss entries in the latest news feed. */
.news-profit {
  background-color: rgba(39, 174, 96, 0.35);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}

.news-loss {
  background-color: rgba(139, 0, 0, 0.35);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0.1rem 0;
}

/* === Recruitment Agent Styles ===
   These rules define the appearance of recruitment agent staff cards and
   their internal controls.  Each card uses additional spacing to
   accommodate the three configuration sections and budget control. */
.recruitment-agent-card {
  /* Provide extra padding to house multiple sections */
  padding: 0.8rem;
  /* Expand minimum width similar to supply runner cards so the layout
     accommodates the additional controls.  Without this, the card may
     wrap controls awkwardly in narrow viewports. */
  min-width: 300px;
  /* Use the same dark background as hire cards; keep the green inner border */
  background-color: #111;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  box-shadow: inset 0 0 0 3px #2ecc71;
  border-radius: 6px;
}

/* Add horizontal separation lines within recruitment agent cards.  These
   lines divide the chemist, dealer and henchman sections as well as the
   budget section.  They mirror the styling used in supply runner cards. */
.recruitment-agent-card hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  width: 100%;
  margin: 0.4rem 0;
}

/* Row container for dropdown and toggle controls inside recruitment agent cards. */
.recruit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Override dropdown width within recruitment agent cards to 150px.  This rule
   appears after the generic .recruit-dropdown definition to ensure it takes
   precedence. */
.recruitment-agent-card .recruit-dropdown {
  width: 150px;
}

/* Push toggle buttons to the right within their row so they align to the
   dropdown edge.  Margin-left: auto causes the toggle to occupy the
   remaining horizontal space. */
.recruit-row .recruit-toggle {
  margin-left: auto;
}

/* Layout for the budget row containing the input and buttons.  Arrange
   elements horizontally with small gaps. */
.recruit-budget-row { /* legacy layout; replaced by separate rows */ }
.recruit-budget-input-row { width: 100%; }
.recruit-budget-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

/* Ensure recruitment agent dropdowns have a fixed width so the toggle
   buttons sit neatly to the right.  Other dropdowns retain their default
   sizing. */
.recruitment-agent-card .recruit-dropdown {
  width: 150px;
}

/* Display the section labels on their own line for recruitment agents.  This
   ensures the dropdown and toggle sit on a new row beneath the label as
   specified in the design. */
.recruitment-agent-card .recruit-section strong {
  display: block;
  margin-bottom: 0.3rem;
}
/* Container for each configuration section (chemists, dealers, henchmen). */
.recruit-section {
  margin-top: 0.6rem;
}
/* Recruitment agent sections: tighter top, defined bottom spacing */
.recruitment-agent-card .recruit-section {
  margin-top: 0px;
  margin-bottom: 10px;
}
/* Toggle buttons for enabling or disabling recruitment. */
.recruit-toggle {
  margin-left: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  border: none;
  font-size: 0.8rem;
  cursor: pointer;
}
.recruit-toggle.on {
  background-color: #3a8f67;
  color: #e0eae3;
}
.recruit-toggle.off {
  background-color: #8a2b2b;
  color: #e0eae3;
}
/* Dropdowns for selecting drugs or territories. */
.recruit-dropdown {
  width: 100%;
  margin-top: 0.3rem;
  background-color: #1f5138;
  color: #e0eae3;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 0.2rem;
  font-size: 0.8rem;
}
/* Controls for adjusting the target number of chemists. */
.recruit-target-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.3rem;
  margin-top: 0.3rem;
  width: 100%;
}
.recruit-target-controls input[type="number"] {
  width: 100%;
  height: 2rem;
  text-align: center;
  background-color: #1f5138;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: #e0eae3;
  padding: 0 0.4rem;
  font-size: 0.9rem;
}
.recruit-target-controls button {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 2rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.recruit-target-controls button:hover {
  background-color: #3a8f67;
}
/* Budget display and input section. */
.recruit-budget {
  margin-top: 0.7rem;
}
.recruit-budget p {
  margin: 0 0 0.3rem 0;
  font-weight: bold;
}
.recruit-budget input[type="number"] {
  width: 45%;
  background-color: #1f5138;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: #e0eae3;
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
  margin-right: 0.4rem;
}
.recruit-budget button {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.recruit-budget button:hover {
  background-color: #3a8f67;
}

/* Simple onboarding pulse */
.pulse {
  box-shadow: 0 0 0 0 rgba(0,0,0,0.35);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); }
  70% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}

@media (max-width: 600px) {
  .panel, .card { padding: 12px; }
  .grid { grid-template-columns: 1fr !important; gap: 12px; }
  .kpi, .stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* -------------------------------------------------------------------------- */
/* Custom styles added for improved production and staff UI */

/* Production auto toggle button */
.auto-toggle {
  margin-right: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #e0eae3;
}
.auto-toggle.on {
  background-color: #2a6a4b;
}
.auto-toggle.off {
  background-color: #602426;
}

/* Staff summary grid layout */
/* Staff summary grid layout.  Mirror the 2-column layout used in the
   inventory sections to make better use of horizontal space.  Each
   row contains up to two staff members. */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2rem 0.5rem;
}
.staff-grid .staff-row {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 0.5rem;
}
.staff-grid .staff-row:nth-child(2n) {
  border-right: none;
  padding-right: 0;
}
.staff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

/* Colour coding for staff assignment statuses */
.status-unassigned {
  color: #e74c3c;
}
.status-idle {
  color: #f1c40f;
}

/* Bright green status indicator for working chemists on the dashboard.  This class
   is applied to the status label when a chemist is actively working on a batch. */
.status-working {
  color: #5cb85c;
}
/* === Production column resizers === */
.drug-card .resizer{
  width:6px; min-width:6px; cursor: col-resize; position: relative; align-self: stretch;
}
.drug-card .resizer::after{
  content:""; position:absolute; top:0; bottom:0; left:2px; width:2px; background:rgba(255,255,255,0.08);
}
.drug-card .resizer:hover::after, .drug-card .resizer:focus::after{background:rgba(255,255,255,0.22);}
.drug-card .resizer{outline:none}

/* Disable the right-hand resizer on production drug cards.  This prevents
   dragging the gutter between the middle and right columns.  A disabled
   cursor indicates the handle cannot be used. */
.drug-card .resizer-right {
  /* Override disabling of the right-hand resizer.  All columns should
     be resizable, so enable pointer events and restore the col-resize
     cursor.  The opacity is reset to 1 to make the gutter visible. */
  pointer-events: auto;
  cursor: col-resize;
  opacity: 1;
}

/*
 * Bank card sizing
 *
 * Deposit, savings and loan panels should maintain a minimum width of 700px and
 * a maximum height of 250px.  These values prevent the cards from
 * collapsing on narrow screens and from growing excessively tall on larger
 * displays.  Padding of 1rem (16px) keeps the interior content from
 * touching the edges of the card.
 */
#bank .bank-deposit,
#bank .bank-savings,
#bank .bank-loan {
  min-width: 700px;
  max-height: 250px;
  padding: 1rem;
  height: auto;
}

/*
 * Responsive production column hiding
 *
 * On narrower screens the side columns on production drug cards should hide to
 * prioritise the main drug information.  We rely on each card specifying
 * its orientation via the data-order attribute ("lines-right" or
 * "chemists-right").
 */
/* Hide the right-hand column on the production page when the viewport is narrower
   than 1090px.  The rules below ensure that whichever side column is positioned
   on the far right (either the production lines or the chemist assignment
   column depending on orientation) is hidden at this breakpoint.  This was
   previously triggered at 900px but has been expanded to 1090px per user
   request. */
@media (max-width: 1090px) {
  .drug-card[data-order="lines-right"] .production-lines-column,
  .drug-card[data-order="lines-right"] .resizer-right,
  .drug-card[data-order="chemists-right"] .chemist-assignment-column,
  .drug-card[data-order="chemists-right"] .resizer-right {
    display: none;
  }
}

@media (max-width: 700px) {
  .drug-card[data-order="lines-right"] .chemist-assignment-column,
  .drug-card[data-order="lines-right"] .resizer-left,
  .drug-card[data-order="chemists-right"] .production-lines-column,
  .drug-card[data-order="chemists-right"] .resizer-left {
    display: none;
  }
}

/*
 * Production reorder button styling.  These buttons allow players to toggle
 * the orientation of the chemist and production line columns.  Use a
 * compact size and colour palette that matches the dashboard reorder
 * buttons.  Margin-left auto pushes the button to the far right within
 * the drug header&rsquo;s flex container.
 */
/*
 * Production reorder button toggle styling
 *
 * Display the reorder control as a small toggle switch rather than a
 * textual arrow.  The base button contains no visible text; instead a
 * circular knob is drawn via the ::after pseudo-element.  The knob
 * slides to the left or right depending on whether the current
 * orientation class is `chemists-right` or `lines-right`.  Margin-left
 * auto positions the toggle at the end of the drug header.  A
 * relatively positioned container allows the pseudo-element to be
 * positioned absolutely within the button.  A transition on the left
 * property smooths the knob&rsquo;s movement when the class changes.  The
 * hover state subtly lightens the background colour.
 */
.production-reorder-btn {
  margin-left: auto;
  position: relative;
  width: 40px;
  height: 20px;
  background-color: #2a6a4b;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  /* Hide any accidental text content */
  font-size: 0;
  line-height: 0;
}
.production-reorder-btn::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background-color: #e0eae3;
  border-radius: 50%;
  transition: left 0.3s ease;
}
/* Position the knob on the left when chemists are shown on the right (chemists-right) */
.production-reorder-btn.chemists-right::after {
  left: 3px;
}
/* Position the knob on the right when production lines are on the right (lines-right) */
.production-reorder-btn.lines-right::after {
  left: 23px;
}
.production-reorder-btn:hover {
  background-color: #3a8f67;
}

/* Production priority control styling
   The Production Priority dropdown replaces the reorder toggle on each
   drug card.  Use a compact horizontal layout that aligns the label
   and select to the right of the card header.  Colours and sizes
   mirror the existing production reorder control for consistency. */
.production-priority-wrapper {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.production-priority-wrapper span {
  font-size: 0.8rem;
}
.production-priority-select {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: 1px solid #4a926a;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
}
/* Style the open state of the production priority dropdown to match the
   recruitment agent dropdowns.  Use a dark green background with light
   text for both options and the select control itself. */
.production-priority-select {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: 1px solid #4a926a;
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.production-priority-select option {
  background-color: #1f5138;
  color: #e0eae3;
}

/* ------------------------------------------------------------------- */
/* Shop sale decorations */
/* ------------------------------------------------------------------- */
/* Banner displayed above items that are on sale */
.sale-banner {
  background-color: #c0392b;
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.3rem;
}

/* Apply a subtle glow to any shop item that is on sale.  The box shadow
   echoes the sale banner colour and draws attention without being
   distracting.  This class is toggled via JavaScript. */
.shop-item.item-on-sale {
  box-shadow: 0 0 16px 2px rgba(192, 57, 43, 0.75);
}

/* Struck through price when an item is discounted */
.old-price {
  text-decoration: line-through;
  color: #aaaaaa;
  margin-right: 0.3rem;
}

/* Highlighted price for the sale amount */
.sale-price {
  color: #f1c40f;
  font-weight: bold;
}

/* Descriptive text shown underneath shop items */
.item-desc {
  font-size: 0.75rem;
  color: #bbbbbb;
  margin-top: 0.2rem;
}

/* ------------------------------------------------------------------- */
/* Territory summary layout modifications */
/* ------------------------------------------------------------------- */
.territory-summary-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 0.6rem;
}
.territory-summary-container:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.territory-summary-image img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0.6rem;
}
.territory-summary-info h4 {
  /* Apply the same styling used for dashboard inventory headers to
     territory summary titles.  A translucent green background and
     padding help the headers stand out against the card. */
  margin: 0;
  margin-bottom: 0.3rem;
  margin-top: 0;
  font-size: 1.1rem;
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  /*
    Let the territory summary header automatically size itself to the width
    of its container.  Removing the fixed 762px width prevents horizontal
    scrolling within the territories card and allows the header to shrink
    or grow with the card on different screen sizes.
  */
  width: 100%;
}

/* ------------------------------------------------------------------- */
/* Custom modifications for user-requested features                   */
/* ------------------------------------------------------------------- */

/* Each territory summary card (inside the dashboard Territories panel) has
   been enlarged for greater readability.  A fixed width of 800px and
   height of 1000px are applied to every territory entry. */
/*
 * Territory summary container
 *
 * Previously each territory summary entry was forced to an 800×1000px
 * box, which caused excessive whitespace and required a very tall scroll area
 * on the Dashboard.  Instead, allow each entry to size itself based on
 * its content.  The container uses flexbox to position the icon and
 * information side-by-side and expands to fill the available width of
 * the card.  A bottom margin separates successive entries.
 */
.territory-summary-container {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

/* The information column within each territory summary entry is now a
   consistent width.  This pairs with the 120px image on the left to
   achieve the overall 800px width specified above. */
/*
 * Territory summary information column
 *
 * Allow the details section to grow to occupy remaining space next to the
 * icon.  Removing the fixed width ensures the layout adapts to the
 * container&rsquo;s width without leaving large empty areas.
 */
.territory-summary-info {
  flex: 1;
  width: auto;
}

/* Make territory summary rows slightly smaller to fit added columns */
.territory-summary-info p {
  font-size: 0.95rem;
  margin: 0.15rem 0;
}

/* Add breathing room around the first info row beneath the territory name */
#dashboard .territory-summary-info p:first-of-type {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Constrain the Territories card on the dashboard so that only seven
   summary entries are visible before scrolling is required.  The
   maximum height is calculated by multiplying the fixed height of each
   entry by seven.  Overflowing content will scroll within the card. */
/*
 * Territory summary list container
 *
 * Limit the visible height of the territories list to match the overall
 * Dashboard card height (approximately 1000px).  Extra entries will scroll
 * within this area.  Removing the overly large 7000px height prevents
 * unnecessary whitespace and keeps the list contained neatly.
 */
#territory-summary {
  max-height: 1000px;
  overflow-y: auto;
}

/* Apply a consistent hover highlight effect to all buttons on pages
   throughout the site.  This excludes the navigation menu buttons
   because they live outside of a .page container.  Increasing the
   brightness on hover creates a similar visual effect to the main menu. */
.page button:hover {
  filter: brightness(1.2);
}

/*
 * Global page background override
 *
 * Remove image-based backgrounds throughout the game and replace them with
 * a muted green carbon-fibre effect.  Using repeating linear gradients
 * produces a subtle cross-hatch pattern reminiscent of carbon fibre while
 * remaining lightweight and easily customisable.  The colour palette is
 * deliberately subdued to improve contrast and readability on all pages.
 *
 * The rule targets each page container by ID because earlier rules set
 * background images on those IDs with higher specificity than the .page
 * class.  Explicitly redefining the backgrounds here ensures the new
 * styling takes precedence over the images defined at the top of the
 * stylesheet.  Should additional pages be added in the future, include
 * their IDs in this selector or provide a more generic override.
 */
#start-screen,
#dashboard,
#shop,
#staff,
#production,
#territories,
#help,
#bank,
#leaderboards {
  /* Remove any previously set background images */
  background-image: none;
  /* Base colour for the page backgrounds: a dark, muted green */
  background-color: #0e3426;
  /* Apply two diagonal repeating gradients to mimic a carbon-fibre weave. */
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 4px);
}

/* Donate banner styling.  Centralise the donate text and banner and
   provide a small margin above the section for separation. */
.donate-section {
  margin: 2rem auto 1rem auto;
  text-align: center;
  max-width: 600px;
}

.donate-section p {
  margin-bottom: 0.5rem;
  /* Increase the donation copy size slightly for better readability.  Previously 0.9rem; bumped to 1rem. */
  font-size: 1rem;
}

.donate-section .donations-header {
  text-align: center;
  margin: 0 0 0.5rem 0;
}

.donate-section .donate-or {
  margin-top: 0.25rem;
}

/* Ensure Ko-fi logo sits below the big donate button and above OR */
.donate-section .settings-donate-paypal {
  display: block;
  margin: 0.5rem auto 0 auto;
}

/* Start screen donation row */
.start-donate-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.75rem 0 0.25rem 0;
}

.start-donate-center img {
  display: block;
}

.donate-section img {
  cursor: pointer;
  border-radius: 4px;
}

/* Custom settings button styling.  Mirrors the palette of existing
   interface buttons with a hover state that darkens slightly. */
.settings-btn {
  background-color: #1f5138;
  color: #e0eae3;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 0.5rem;
}

.settings-btn:hover {
  background-color: #2a6a4b;
}

/* === Custom enhancements === */

/* Add a separator line between daily news entries similar to the Territories card.  Each
   subsequent day header in the Latest News card receives a thin border on top
   with a small padding to provide visual separation between days. */
.news-day-header:not(:first-of-type) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 0.4rem;
}

/* Align the first news day header with other card headings on the dashboard.  Remove the
   default top margin so the "Day N" header starts flush with the card title. */
.news-day-header:first-of-type {
  margin-top: 0;
}

/* Provide a subtle hover and shadow effect for buttons throughout the game (excluding the
   navigation bar which is outside the .page container).  Buttons gently rise
   and cast a soft shadow when hovered, enhancing their interactivity. */
.page button {
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
.page button:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

/* Special items Use button: match green theme and handle disabled state */
.special-use-btn {
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}
.special-use-btn:disabled {
  background-color: #8a2b2b;
  color: #e0eae3;
  cursor: not-allowed;
  opacity: 0.9;
}

/* News rarity colouring for henchman gear finds */
.news-rarity-common { background-color: rgba(128,128,128,0.2); padding: 0.2rem 0.4rem; border-radius: 4px; }
.news-rarity-uncommon { background-color: rgba(50,205,50,0.2); padding: 0.2rem 0.4rem; border-radius: 4px; }
.news-rarity-rare { background-color: rgba(30,144,255,0.2); padding: 0.2rem 0.4rem; border-radius: 4px; }
.news-rarity-epic { background-color: rgba(128,0,128,0.2); padding: 0.2rem 0.4rem; border-radius: 4px; }
.news-rarity-legendary { background-color: rgba(255,215,0,0.25); padding: 0.2rem 0.4rem; border-radius: 4px; }

/* Dashboard party event styles */
.party-title { color: #ffd700; }
.territory-summary-image.party-glow img {
  box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.6);
  border-radius: 6px;
}

/* Ensure Fire buttons sit near the bottom of staff cards consistently */
.staff-card .fire-btn {
  margin-top: 10px;
  margin-bottom: 0px;
}

/* Styling for the percentage sign displayed next to equipment durability thresholds on
   supply runner cards.  A small margin separates it from the number input. */
.percent-sign {
  margin-left: 0.2rem;
  font-weight: bold;
}

/* Highlight the staff card being dragged during reordering.  Lower opacity and add
   a glow so it stands out as the user drags it across the list. */
.staff-card.dragging {
  opacity: 0.6;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Highlight potential drop targets when reordering staff cards.  A dashed border
   indicates where the dragged card will be placed on drop. */
.staff-card.drag-target {
  border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Colour disabled equipment repair buttons red when durability is above the
   repairable threshold.  The class is added dynamically in script.js. */
.repair-button-disabled {
  background-color: #602426 !important;
  color: #e0eae3 !important;
  cursor: not-allowed !important;
}

/* === Dealer Advice Styles ===
   The following styles support the daily dealer advice feature on the
   territories page.  A speech bubble icon toggles a collapsible panel
   showing the dealer&rsquo;s portrait, name and comments on three randomly
   selected drugs.  The panel smoothly expands and collapses via a
   max-height transition.  Comments are italicised and presented in a
   bulleted list to distinguish them from other territory details. */

.dealer-price-advice-header {
  font-weight: bold;
  margin: 0.5rem 0 0.2rem;
}

/*
 * Dealer advice wrapper styling
 *
 * Add a subtle separator line below the advice panel to visually divide it
 * from the rest of the territory card.  The existing flex layout is
 * preserved so the header and content stack vertically.  A small bottom
 * margin and padding ensure the separator does not butt up against
 * subsequent elements.
 */
.dealer-advice-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Provide a bit of breathing room below the advice panel */
  margin-bottom: 0.5rem;
  /* Draw a thin separator below the dealer advice (requested on the
     territories page).  Using a semi-transparent white creates a
     consistent look with other separators used throughout the UI. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  /* Add a small padding to ensure the separator isn&rsquo;t flush with the
     content above it. */
  padding-bottom: 0.5rem;
}

/*
 * Active customers line styling
 *
 * On each territory card the “Active customers” line previously had a top
 * and bottom margin of 16px.  The top margin is removed and the bottom
 * margin reduced to 8px.  A separator line is also drawn beneath the
 * customer count to visually separate it from the dealer details and
 * advice.  Applying this class through script.js allows the margin and
 * separator to be applied only to the appropriate paragraph.
 */
.territory-active-customers {
  margin-top: 0;
  margin-bottom: 8px;
  /* Separator bar beneath the active customers text */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.5rem;
}

.dealer-speech-bubble {
  display: inline-block;
  background-color: #2a6a4b;
  color: #e0eae3;
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  /* Remove bottom margin so the bubble can sit flush next to labels when
     placed in a horizontal header.  Any spacing is handled by the
     container&rsquo;s gap property. */
  margin-bottom: 0;
  max-width: max-content;
  border: none;
  font-size: 1rem;
}

/* When hovering over the speech bubble toggle, darken it slightly to
   mirror the hover effect used on other buttons throughout the game. */
.dealer-speech-bubble:hover {
  background-color: #367a59;
}

.dealer-advice-content {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  /* Remove padding by default so the collapsed panel occupies no visual
     space.  Padding will be restored when the panel is shown via the
     `.show` class. */
  padding: 0;
  width: 100%;
  /* Use a max-height transition (and padding) for smooth expansion/collapse */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.dealer-advice-content.show {
  /* Large enough to accommodate the portrait and up to three comments */
  max-height: 600px;
  /* Restore padding when expanded so the content has breathing room */
  padding: 0.5rem;
}

/* Layout the dealer advice header so the label and bubble are on the same
   line.  The gap property creates consistent spacing between the two
   elements. */
.dealer-advice-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.2rem;
}

.dealer-advice-label {
  font-weight: bold;
}

/* Remove bottom margin from the bubble when it appears inside the header */
.dealer-advice-header .dealer-speech-bubble {
  margin-bottom: 0;
  /* Push the speech bubble to the end of the header row so it occupies
     the remaining horizontal space between the label and the card edge. */
  margin-left: auto;
}

.dealer-advice-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.dealer-advice-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.dealer-comments-list {
  list-style: disc;
  margin-left: 1rem;
  padding-left: 0;
}

.dealer-comments-list li {
  margin-bottom: 0.3rem;
  font-style: italic;
}

/* ========================================================================
   Gear and Pawn Shop Styling
   ------------------------------------------------------------------------
   These rules support the gear system introduced for henchmen equipment.  They
   define styles for the gear popup overlay, the playing card used to
   display newly found gear, rarity border colours and the gear equip
   controls shown on the staff page.  They are appended at the end of the
   stylesheet to ensure they override earlier definitions if needed.
*/

/* Overlay for displaying found gear.  The overlay covers the entire
   viewport and centres its content.  A semi-transparent background
   darkens the page so the gear card stands out. */
.gear-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Use the same carbon fibre pattern as the rest of the game for the
     gear discovery overlay.  A solid base colour combined with two
     diagonal repeating gradients produces the subtle cross-hatch
     texture that ties the pop-up into the overall theme. */
  /* Remove the patterned backdrop from the gear popup overlay.  The
     pop-up should no longer darken the page; instead, allow the
     underlying UI to remain visible with no tint. */
  background-color: transparent;
  background-image: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* The gear card displayed in the popup.  Mimic a playing card with a dark
   background, subtle shadow and rounded corners. */
.gear-card {
  background-color: #152a21;
  border-radius: 6px;
  /* Increase the padding around the gear discovery modal.  By expanding
     the padding to 100px the darkened backdrop extends beyond the
     cards, creating a visual border of approximately 100 pixels on
     each side.  This gives the impression that the cards are sitting
     on top of a framed background rather than filling the entire
     overlay. */
  padding: 100px;
  width: 280px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  color: #e0eae3;
  position: relative;
  /* Hide overflowing pseudo-elements such as the legendary shimmer.  Without
     overflow hidden, the shimmer animation spills out of the card on
     either side, creating distracting artefacts. */
  overflow: hidden;
}

/* Gear image in the card.  Constrain size to keep aspect ratio and
   centre it horizontally. */
.gear-card img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 0.5rem;
}

/* Rarity border colours for gear cards. */
.rarity-common { border: 2px solid #808080; }
.rarity-uncommon { border: 2px solid #008000; }
.rarity-rare { border: 2px solid #1e90ff; }
.rarity-epic { border: 2px solid #800080; }
.rarity-legendary { border: 2px solid #ffd700; }

/* Container for gear equip controls on staff cards. */
.gear-equip-container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gear-equip-container label {
  font-weight: bold;
  display: block;
}

.gear-equip-container select {
  width: 100%;
  padding: 0.25rem;
  border-radius: 4px;
  border: 1px solid #334d40;
  background-color: #0d2b1f;
  color: #e0eae3;
}

.gear-equip-container .gear-info {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

/* Pawn Shop styles */
.pawn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}

.pawn-row p {
  margin: 0;
  flex: 1;
}

.pawn-row span {
  margin-right: 0.5rem;
  white-space: nowrap;
}

.pawn-sell-btn {
  background-color: #214c3a;
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.pawn-sell-btn:hover {
  background-color: #2c5c47;
}

/* Updated Pawn Shop UI */
.pawn-card {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 1rem;
  border-radius: 6px;
  margin-top: 1rem;
  /* Stretch the pawn shop card to fill the available width.  Without a
     defined width the flex columns may wrap prematurely on narrow
     screens. */
  width: 100%;
}

.pawn-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  /* Ensure the header spans the full width of its container.  Without
     an explicit width, the header may shrink to fit its contents and
     sit alongside the columns rather than above them. */
  width: 100%;
}

.pawn-broker-image {
  /* Scale the pawn broker image up to match the requested
     175×175px size.  Use explicit width/height so it remains
     square and the aspect ratio is preserved when a custom
     inline size is not provided. */
  width: 175px;
  height: 175px;
  object-fit: contain;
  border-radius: 4px;
}

.pawn-columns {
  display: flex;
  /* Do not wrap the three columns by default.  Wrapping causes the
     middle and right columns to fall below the left column on
     moderately sized screens.  The individual column flex values
     already allow the layout to shrink appropriately. */
  flex-wrap: nowrap;
  gap: 1rem;

  /* Ensure the columns container occupies a significant portion of the
     viewport.  This helps keep the three columns aligned side-by-side
     across a variety of screen heights and provides space for their
     content to scroll internally if needed. */
  min-height: 60vh;
}

.pawn-column {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;

  /* Give each pawn shop column its own blurred backdrop and slight
     padding.  Separating the columns visually reinforces that they
     are independent panels rather than part of a single card.  The
     semi-transparent background and backdrop-filter blur mirror the
     aesthetics used in other UI panels (e.g. the bank). */
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 0.5rem;
}

/* Override widths for pawn shop grid columns.  The left and right
   columns take up more space to accommodate longer item names, while
   the middle column remains narrow for the transfer controls. */
.pawn-left {
  flex: 3;
}
.pawn-middle {
  /* Increase the width of the middle column so that its buttons and input
     fields fit comfortably without triggering a horizontal scrollbar.  The
     column now grows to accommodate its content and retains a minimum
     width of 220px to prevent wrapping of the transfer controls. */
  /* Allow the middle column width to shrink or grow based solely on its
     contents.  Using flex-basis: auto permits the column to size to
     its intrinsic width (the width of the buttons and input field),
     preventing an unnecessary horizontal scrollbar when the pawn shop
     interface is narrow.  Remove the explicit minimum width so the
     column can shrink below the previous 220px default if space is
     constrained. */
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
}
.pawn-column.pawn-middle {
  /* Override the default flex behaviour for the pawn shop's middle
     column.  By setting flex-basis to auto and removing the minimum
     width, the column sizes itself according to its content (the arrow
     buttons and quantity input) instead of attempting to fill an
     equal share of the available width.  This prevents the
     appearance of a horizontal scrollbar and keeps the controls
     visually compact. */
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
}
.pawn-right {
  flex: 3;
}

.pawn-column h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* Centre align the column headings and match the colour scheme used in
     shop item headers.  A subtle background and padding make the
     headings stand out against the blurred panel. */
  text-align: center;
  background-color: rgba(32, 96, 64, 0.5);
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  color: #e0eae3;
}

.pawn-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  /* Allow the list to grow and scroll if the content exceeds the
     available height.  Without flex-grow the lists may compress
     unevenly when many items are present. */
  flex-grow: 1;
  overflow-y: auto;
}

/* Category headers inside the pawn shop inventory lists.  These rows
   separate ingredients, packaging and gear items in the left and middle
   columns.  A bold font and a subtle underline distinguish the
   categories without overwhelming the content. */
.pawn-category-header {
  font-weight: bold;
  padding: 0.3rem 0;
  /* Match the dashboard inventory category styling by applying a subtle
     green backdrop and white text.  The underline is kept via the
     border-bottom to preserve the visual separation between categories. */
  background-color: rgba(32, 96, 64, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0eae3;

  /* Ensure category headers in the inventory and actions columns share
     the same height so that the rows align perfectly across columns.
     Using flexbox and a minimum height forces both empty and populated
     headers to occupy the same vertical space. */
  display: flex;
  align-items: center;
  min-height: 1.8rem;
}
.pawn-column.pawn-middle .pawn-category-header {
  /* Align the category separators in the middle column but leave the
     text blank to preserve spacing.  The styling is inherited from
     the default category header. */
  text-align: center;
}

.pawn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.pawn-row span {
  flex: 1;
  white-space: nowrap;
}

/* Align the stock/price information to the right within each inventory row
   in the pawn shop.  Using the :last-child selector ensures only the
   right-hand span (which holds "In Stock" and price information) is
   right-aligned, leaving the item name untouched. */
.pawn-row span:last-child {
  text-align: right;
}

.pawn-btns button {
  background-color: #214c3a;
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  margin-left: 0.2rem;
  cursor: pointer;
}

.pawn-btns button:hover {
  background-color: #2c5c47;
}

/* Style the buttons and number inputs within the pawn shop Actions column.
   These controls should match the rest of the game's buttons for a
   consistent look and feel. */
.pawn-column.pawn-middle .pawn-row button {
  background-color: #214c3a;
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.pawn-column.pawn-middle .pawn-row button:hover {
  background-color: #2c5c47;
}
.pawn-column.pawn-middle .pawn-row input {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.2rem;
  max-width: 3rem;
  text-align: center;
}

/* Reusable theme for number inputs to match pawn shop look */
.themed-number {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
}

/* Fine-tune the layout of the middle column in the pawn shop.  Buttons
   and the quantity input should sit next to each other without
   stretching to fill the entire row.  Centre them horizontally and
   provide small gaps for readability. */
.pawn-column.pawn-middle .pawn-row {
  /* Centre the transfer controls horizontally and vertically so that
     the buttons align with the corresponding item rows in the other
     columns.  Without explicit align-items, the controls may sit
     lower or higher than the text, making the UI appear misaligned.
     A small horizontal gap separates the buttons and input field. */
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

/* Ensure pawn shop rows and headers have a consistent height and
   padding across all three columns.  These values mirror the
   alignment rules defined earlier but are placed at the end of the
   stylesheet to override any previous declarations.  Without this
   override, rows can shrink or expand when many items are listed,
   causing the action buttons to misalign with their corresponding
   inventory rows. */
.pawn-row,
.pawn-category-header {
  min-height: 1.8rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.pawn-column.pawn-middle .pawn-row input {
  max-width: 3rem;
  text-align: center;
}

.pawn-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-weight: bold;
}

.pawn-sell-confirm {
  background-color: #3a7152;
  color: #e0eae3;
  border: 1px solid #4a8163;
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

.pawn-sell-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Gear discovery pop-up styles */
.gear-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  /*
   * The gear discovery overlay should occupy the entire viewport and
   * centre its child elements.  Use a semi-transparent backdrop to
   * darken the underlying UI and draw focus to the gear cards.  A
   * generous 100px padding around the edges creates the illusion that
   * the cards are floating within a frame rather than filling the
   * entire screen.  This matches the player's request for a 100px
   * border around the cards on all sides.  Note: width/height remain
   * explicit to ensure full coverage when `padding` is large.
   */
  width: 100vw;
  height: 100vh;
  /* Apply a semi-transparent dark backdrop with blur so that
     discovering gear focuses the player's attention on the pop-up.
     The backdrop darkens and blurs the underlying interface while
     preserving overall visibility. */
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  /* No extra padding on the overlay itself; the pop-up container
     manages its own spacing. */
  padding: 0;
}

.gear-popup-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  /* Add generous padding on all sides so that gear glow effects are fully
     visible.  Without this padding, long shadows can be clipped at the
     container edges. */
  padding: 100px;

  /* Remove the dark halo around the container.  The overlay itself
     now provides the backdrop and blur effect, so the container no
     longer needs a large spread box-shadow.  Retain relative
     positioning for internal layout only. */
  position: relative;
  box-shadow: none;
}

.gear-card {
  /* Default gear card styling.  Use a larger card size (1.5× previous)
     to improve readability of gear details.  Colours are muted and
     content is centred vertically.  Border is removed by default so
     unrevealed cards do not show a rarity outline. */
  background-color: #162d22;
  color: #e0eae3;
  border: none;
  border-radius: 8px;
  width: 300px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  /* Smoothly transition box-shadow changes so the pre-reveal glow fades
     in over 1.5 seconds during the spin. */
  transition: box-shadow 1.5s ease;
}

/* Border colours for rarity */
/* Apply rarity borders only when the card has been revealed.  Unrevealed
   cards remain neutral so that the player cannot infer rarity from the
   back. */
.gear-card.revealed.rarity-common {
  border: 3px solid #ffffff;
}
.gear-card.revealed.rarity-uncommon {
  border: 3px solid #32cd32;
}
.gear-card.revealed.rarity-rare {
  border: 3px solid #1e90ff;
}
.gear-card.revealed.rarity-epic {
  border: 3px solid #800080;
}
.gear-card.revealed.rarity-legendary {
  border: 3px solid #ffd700;
}

/* When a card is revealed apply a glowing animated outline matching the
   rarity colour.  The glow repeats slowly to draw attention to the
   discovered item. */
/* Reduce the pre-reveal glow size by half for all rarities.  The
   original implementation used a 60px/120px blur radius which
   produced very large halos; halving these values to 30px/60px
   preserves the highlight effect while reducing overpowering glare. */
.gear-card.glow.revealed.rarity-common {
  box-shadow: 0 0 30px #ffffff, 0 0 60px rgba(255,255,255,0.6);
}
.gear-card.glow.revealed.rarity-uncommon {
  box-shadow: 0 0 30px #32cd32, 0 0 60px rgba(50,205,50,0.6);
}
.gear-card.glow.revealed.rarity-rare {
  box-shadow: 0 0 30px #1e90ff, 0 0 60px rgba(30,144,255,0.6);
}
.gear-card.glow.revealed.rarity-epic {
  box-shadow: 0 0 30px #800080, 0 0 60px rgba(128,0,128,0.6);
}
.gear-card.glow.revealed.rarity-legendary {
  box-shadow: 0 0 30px #ffd700, 0 0 60px rgba(255,215,0,0.6);
}

/* Legendary items shimmer when revealed.  A translucent diagonal
   gradient sweeps across the card repeatedly. */
.gear-card.shimmer.revealed.rarity-legendary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(60deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: shimmer 2s infinite;
  pointer-events: none;
}

/* Spin animation for gear cards during the reveal sequence.  Cards
   rotate around the Y axis three full turns over three seconds. */
.gear-card.spinning {
  animation: gear-spin 3s linear;
}

@keyframes gear-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1080deg);
  }
}
@keyframes shimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.gear-card-front,
.gear-card-back {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

/* Style the front of gear cards (face down).  Use a carbon fibre
   pattern and remove any coloured border.  The question mark is the
   only visible content before reveal. */
.gear-card-front {
  background-color: #111;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
  border: none;
}

/* The back of the card inherits the card&rsquo;s background colour.  When
   revealed the border and glow are applied to the outer .gear-card via
   the .revealed and .glow classes. */
.gear-card-back {
  background-color: transparent;
}

.gear-card-back {
  /* Hidden by default; shown via JS */
}

/* Increase the size of the question mark on unrevealed gear cards.  When gear
   is discovered the question mark should be twice as large as before
   (6rem instead of 3rem) so it stands out more clearly on the card back. */
.gear-card-backface {
  font-size: 6rem;
  font-weight: bold;
  color: #aaa;
}

.gear-card-buttons {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}
.gear-card-buttons button {
  background-color: #214c3a;
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  /* Reduce the button text size to better match the Combat Power text on gear cards. */
  font-size: 0.9rem;
  /* Use a slightly lighter font weight for improved readability. */
  font-weight: 500;
}
.gear-card-buttons button:hover {
  background-color: #2c5c47;
}

.gear-card-buttons button .gear-sell-amount {
  font-size: 1.1em;
  font-weight: 600;
  opacity: 0.95;
}
.gear-found-label {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.75);
}

/* -------------------------------------------------------------------------
   Henchman gear slot interface

   These styles support the overhauled gear equip UI on hired henchman cards.
   Instead of listing gear in rows with dropdowns, each card now contains two
   slots (weapon and armour).  A slot displays the item&rsquo;s icon, name,
   durability bar and an unassign button.  When empty, the slot shows
   placeholder text and a dropdown to assign gear.  Colours and spacing are
   tuned to harmonise with the existing card design.
*/
.henchman-gear-container {
  /* Arrange gear slots vertically (weapon on top of armour) instead of side by side. */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.henchman-gear-slot {
  /* Make gear slot take the full width of the parent column and centre its
     contents.  Remove the flex:1 rule so slots stack neatly when arranged
     vertically. */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.4rem;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  text-align: center;
}
/* Border colours inherited from rarity classes defined for gear cards */
.henchman-gear-slot.rarity-common { border: 2px solid #808080; }
/* Add a subtle glow matching the rarity colour to assigned gear slots.  This
   glow is only applied for uncommon or higher quality gear to help
   differentiate them visually. */
.henchman-gear-slot.rarity-uncommon {
  border: 2px solid #008000;
  box-shadow: 0 0 6px #008000;
}
.henchman-gear-slot.rarity-rare {
  border: 2px solid #1e90ff;
  box-shadow: 0 0 6px #1e90ff;
}
.henchman-gear-slot.rarity-epic {
  border: 2px solid #800080;
  box-shadow: 0 0 6px #800080;
}
.henchman-gear-slot.rarity-legendary {
  border: 2px solid #ffd700;
  box-shadow: 0 0 6px #ffd700;
}
.henchman-gear-image {
  /* Enlarge gear images to match the 220×85px assets.  Preserve aspect
     ratio and scale down if necessary. */
  width: 220px;
  height: 85px;
  object-fit: contain;
  margin-bottom: 0.25rem;
}
.henchman-gear-name {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}
.gear-durability-bar {
  width: 100%;
  height: 6px;
  background-color: #444;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.1rem;
}
.gear-durability-fill {
  height: 100%;
  width: 0;
  background-color: #32cd32;
  border-radius: 3px;
}
.gear-unassign-btn {
  margin-top: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: #214c3a;
  color: #e0eae3;
  border: 1px solid #334d40;
  border-radius: 4px;
  cursor: pointer;
}
.gear-unassign-btn:hover {
  background-color: #2c5c47;
}

/*
 * Dealer auto top-up configuration styles
 *
 * The auto top-up panel appears on the front of each dealer staff card.  It
 * allows the player to select up to three drugs and target quantities.  When
 * the card is flipped (class .show-back is applied), the auto top-up section
 * is hidden and the mastery section is shown instead.
 */
.dealer-autotopup-section {
  margin-top: 0.6rem;
}
.dealer-autotopup-section p {
  margin: 0 0 0.3rem 0;
}
.dealer-topup-slot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.dealer-topup-select {
  flex: 1;
  background-color: #4e331f;
  color: #e0eae3;
  border: none;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  outline: none;
}
.dealer-topup-select option {
  background-color: #4e331f;
  color: #e0eae3;
}
.dealer-topup-select:focus {
  background-color: #604026;
}
.settings-checkboxes {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.4rem;
  margin-top: 0.5rem;
}
.settings-checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.settings-checkboxes .settings-spacer { display: none; }
.dealer-topup-controls {
  display: none;
  align-items: center;
  gap: 0.4rem;
}
.dealer-topup-qty {
  width: 60px;
  padding: 0.35rem;
  border-radius: 4px;
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0eae3;
}
/* Smart Stocking toggle button (SS) next to quantity */
.smart-stock-btn {
  margin-left: 0.35rem;
  padding: 0.25rem 0.45rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  color: #e0eae3;
}
.smart-stock-btn.on { background-color: #2a6a4b; }
.smart-stock-btn.off { background-color: #602426; }
.dealer-flip-btn {
  margin-top: 0.6rem;
  background-color: transparent;
  color: #e0eae3;
  border: 1px solid #e0eae3;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
}
.dealer-flip-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.dealer-mastery-section {
  display: none;
  margin-top: 0.6rem;
}
/* When flipping the dealer card show the mastery and hide the auto top-up panel */
.dealer-staff-card.show-back .dealer-autotopup-section {
  display: none;
}
.dealer-staff-card.show-back .dealer-mastery-section {
  display: block;
}
/* Keep the flip button visible on both sides so players can flip back */
.dealer-staff-card.show-back .dealer-flip-btn {
  display: inline-block;
}

/* === Pawn Shop column padding ===
   Apply left padding to the headers and rows within the Warehouse Inventory column
   (the left column) of the pawn shop.  Without this padding, the text of
   items and categories in the leftmost column hugs the border and appears
   visually cramped.  Only the left column receives this extra padding so
   the central and right columns align neatly with their controls. */
.pawn-column.pawn-left .pawn-category-header,
.pawn-column.pawn-left .pawn-row {
  padding-left: 8px;
}

/* === Chemist staff card flip ===
   Provide separate front and back sections for chemist cards so that drug
   mastery information can be hidden behind a flip.  The front section
   displays current assignment and work speed; the back section displays
   mastery details.  Flipping is controlled by toggling the .show-back
   class on the card (see script). */
.chemist-front-section {
  /* No specific styling needed; the default block display is sufficient */
}
.chemist-mastery-section {
  display: none;
  margin-top: 0.6rem;
}
.chemist-flip-btn {
  margin-top: 0.6rem;
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.chemist-flip-btn:hover { /* inherits global .page button:hover effects */ }
/* When the chemist card is flipped show the mastery section and hide the front */
.chemist-staff-card.show-back .chemist-front-section {
  display: none;
}
.chemist-staff-card.show-back .chemist-mastery-section {
  display: block;
}
/* Keep the flip button visible on both sides so players can flip back */
.chemist-staff-card.show-back .chemist-flip-btn {
  display: inline-block;
}

/* Dealer flip button adopts same look and hover effects */
.dealer-flip-btn {
  margin-top: 0.6rem;
  background-color: #2a6a4b;
  color: #e0eae3;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.dealer-flip-btn:hover { /* inherits global .page button:hover effects */ }

/* === Start screen button scaling ===
   Increase the size of the help and settings buttons on the start screen.  The
   larger font and padding improve readability and make them easier to click. */
#start-extra-buttons button {
  font-size: 1.2rem;
  padding: 0.8rem 1.2rem;
}
/* Enlarge the icons inside these buttons so they scale proportionally */
#start-extra-buttons button .icon {
  font-size: 1.5rem;
}

/* === Territory assignment slot states ===
   When a drug slot is auto-managed (the dealer automatically tops up stock), the
   select element should be coloured red to warn the player that it may be
   overridden.  A small label appears next to the select with the word
   "auto".  Locked slots (where the dealer already holds stock) remain
   disabled but do not need additional styling. */
.territory-drug-select.auto-topup {
  /* Use a dark red background and white text to clearly indicate auto-managed slots.  */
  background-color: #8b0000;
  color: #ffffff;
  border-color: #8b0000;
}
.auto-topup-label {
  color: #ff6666;
  margin-left: 0.5rem;
  font-size: 0.85rem;
}

/* === Customer trend arrows ===
   Arrows appended to the active customer count indicate changes from the
   previous day.  The font-weight is increased to make the arrows clearly
   visible without increasing their size. */
.customer-change-arrow {
  font-weight: bold;
}

/* Helper class to centre the active customers label on territory cards */
.active-customers-info {
  text-align: center;
}

/* Headings for the supplying section on territories page.  Remove bottom margin to reduce spacing. */
.supplying-heading {
  margin-bottom: 0;
}

/* === Flip Button Hover Fix ===
   Prevent global button hover styles (brightness/transform/shadows) from
   affecting the chemist/dealer Flip buttons, which caused them to appear
   transparent or "ghosted" on hover. Keep their hover state simple.
*/
.chemist-flip-btn,
.dealer-flip-btn {
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.chemist-flip-btn:hover,
.dealer-flip-btn:hover {
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  background-color: rgba(255,255,255,0.1);
}

/*
 * Reduce wasted vertical space on the primary pages.  By default the
 * .page class applies a 2rem padding on all sides, which leaves a large
 * gap above the content.  To maximise usable space while retaining
 * consistent side and bottom margins, remove the top padding on each
 * major game section.
 */
#dashboard,
#shop,
#staff,
#production,
#territories,
#bank,
#leaderboards,
#help,
#settings {
  padding-top: 0;
}

/* If an older donate section remains further down the page, hide duplicates so only the top instance shows */
#settings .donate-section ~ .donate-section { display: none; }

/* Make the donate section independent of layout: absolutely position it at the
   top-center of the settings page so it does not push other settings down. */
#settings { position: relative; }
#settings .donate-section {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 100%);
  z-index: 1;
}

/*
 * Territory icon hover effect
 *
 * To make the territory portraits feel more obviously interactive, we add
 * a subtle lift and shadow on hover.  Moving the container up a few
 * pixels and applying a soft shadow provides a tactile cue that it can
 * be clicked to flip for a description.  The transition property
 * ensures the effect animates smoothly.
 */
.territory-icon-container {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.territory-icon-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* === Party Event Highlight ===
   When a territory is hosting a party event the portrait container
   receives the .party-active class.  This class applies a soft golden
   glow that pulses over time to draw attention without being overly
   distracting.  The box shadow pulses between a subtle halo and a
   brighter highlight. */
.territory-icon-container.party-active {
  border-radius: 4px;
  animation: party-glow 2s infinite;
  box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.4);
}

@keyframes party-glow {
  0% {
    box-shadow: 0 0 4px 1px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 12px 6px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 0 4px 1px rgba(255, 215, 0, 0.3);
  }
}

/* Apply a golden pulsating glow to the entire territory card when a party
   event is active.  This ensures that territories without an icon still
   display a festive highlight.  The animation is shared with the
   territory-icon-container.party-active. */
.territory-card.party-card-active {
  border-radius: 4px;
  animation: party-glow 2s infinite;
  box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.4);
}

/* === Dashboard Production Toggle Button === */
/* Style for the play/pause button next to drugs in the dashboard inventory. */
.production-toggle-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Position the toggle to the right of the quantity.  Apply left margin
     instead of right margin since the button now comes after the qty span. */
  margin-right: 0;
  margin-left: 0.35rem;
  color: #e0eae3;
  /* Hide any inline text; we render icon via ::before to avoid encoding issues */
  font-size: 0;
  /* Use flexbox to perfectly center the icon inside the button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transition: background-color 0.2s;
}

/* Render play/pause glyphs via pseudo-element to avoid mojibake */
.production-toggle-btn::before {
  content: '\25B6'; /* ► default to play */
  font-size: 14px;
  line-height: 1;
}
.production-toggle-btn.on::before {
  content: '\275A\275A'; /* ❚❚ pause */
}
.production-toggle-btn.off::before {
  content: '\25B6'; /* ► play */
}

/* Red 'pause' state for when production is active */
.production-toggle-btn.on {
  background-color: #602426; /* Same red as auto-toggle off */
}

/* Green 'play' state for when production is paused */
.production-toggle-btn.off {
  background-color: #2a6a4b; /* Same green as auto-toggle on */
}

.production-toggle-btn:hover {
  filter: brightness(1.2);
}


/* === Dashboard Equipment Repair Button === */
.equipment-repair-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 0.35rem;
  color: #e0eae3;
  /* Hide any inline text; render icon via ::before for consistent glyph */
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  transition: background-color 0.2s;
}

/* Red disabled styling for blocked henchman assign/unassign buttons */
.blocked-action {
  background-color: #602426; /* deep red consistent with other danger/off states */
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.95;
}
.blocked-action:hover {
  filter: none;
  transform: none;
}

/* Wrench icon using pseudo-element to avoid encoding issues */
.equipment-repair-btn::before {
  content: '\01F527'; /* 🔧 */
  font-size: 14px;
  line-height: 1;
}

.equipment-repair-btn:disabled {
  background-color: #602426; /* red, disabled */
  cursor: not-allowed;
}

.equipment-repair-btn:not(:disabled) {
  background-color: #2a6a4b; /* green, enabled */
}

.equipment-repair-btn:hover {
  filter: brightness(1.2);
}

/* Keep repair button inline on right, add spacing from durability */
.equipment-repair-btn { margin-left: 0.35rem; }

/* === Custom supply runner drop-down styling === */
/* Container for the custom select; fill available width like the native select */
.supply-row .custom-select {
  position: relative;
  flex: 1;
}

/* Display panel showing the current selection */
.supply-row .custom-select .select-selected {
  background-color: #1f5138;
  color: #e0eae3;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

/* Arrow indicator on the selected panel */
.supply-row .custom-select .select-selected:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.6rem;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #e0eae3;
  transform: translateY(-50%);
}

/* Flip the arrow when the dropdown is open */
.supply-row .custom-select .select-selected.select-arrow-active:after {
  border-top: none;
  border-bottom: 5px solid #e0eae3;
}

/* Options list container */
.supply-row .custom-select .options-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #1f5138;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

/* Individual option entries */
.supply-row .custom-select .options-list .option,
.supply-row .custom-select .options-list .option-header {
  padding: 0.2rem 0.4rem;
  color: #e0eae3;
}

/* Hover state for selectable options */
.supply-row .custom-select .options-list .option:hover {
  background-color: #2a6a4b;
}

/* Header styling matches the native dropdown headers */
.supply-row .custom-select .options-list .option-header {
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
  color: #8ab8a0;
  cursor: default;
}

/* Highlight the currently selected option in the list */
.supply-row .custom-select .options-list .selected-option {
  background-color: #2a6a4b;
}

/* Ensure base names remain white when constructing custom labels */
.option-base {
  color: #e0eae3;
}
/* Hide drug names on collapsed supply runner dropdowns while keeping them visible inside the open menu. */
.supply-custom-select .select-selected .option-drug-names {
  display: none;
}
.supply-custom-select .select-selected.select-arrow-active .option-drug-names,
.supply-custom-select .options-list .option .option-drug-names {
  display: inline;
}