/*
  Public market polish module.
  Extracted from the former modules/30-market-economy.css; keep after 34-home-data-layout.css.
*/

/* ============================================================
   UI Stage 5 — polish: news/comments, tables, modals, typography
   Non-breaking: only CSS, respects existing structure + tokens.
   ============================================================ */

/* ---- Micro-typography & readable rhythm ---- */
body{ line-height: 1.45; text-rendering: geometricPrecision; }
:where(h1,h2,h3,h4){ letter-spacing: .2px; }
:where(h1){ font-size: 28px; line-height: 1.15; margin: 0 0 10px 0; }
:where(h2){ font-size: 20px; line-height: 1.2; margin: 0 0 8px 0; }
:where(h3){ font-size: 16px; line-height: 1.25; margin: 0 0 6px 0; }
:where(p){ margin: 0 0 10px 0; }
:where(.muted){ color: var(--text700) !important; }
:where(.mono){ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
:where(code,.code){
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
}
:where(hr){
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 16px 0;
  opacity: .9;
}

/* ---- Section header helpers (can be adopted progressively) ---- */
.section{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  box-shadow: var(--shadow);
  overflow: clip;
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.section__title{ font-weight: 1000; }
.section__kicker{ color: var(--text700); font-size: 12px; margin-top: 4px; }
.section__actions{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.section__body{ padding: var(--panel-pad); }

/* ---- News & comments (softer, more consistent surfaces) ---- */
.newsCard{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(8,12,18,.90), rgba(10,14,22,.96));
}
.newsCard::before{ opacity: .28; }
.newsCard__title{ font-weight: 950; }
.newsCard__text{ color: rgba(231,237,243,.86); }
.newsCard__tag{
  border-color: rgba(240,140,40,.30);
  background: rgba(240,140,40,.10);
  font-weight: 950;
}
.cmt{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
}
.cmt__av{ border-color: rgba(255,255,255,.10); }

/* ---- Table component (used by admin + diagnostics) ---- */
.table, .adminTable{
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table th, .table td,
.adminTable th, .adminTable td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table thead th,
.adminTable thead th{
  text-align:left;
  font-weight: 950;
  color: var(--text700);
  background: rgba(0,0,0,.14);
}
.table tbody tr:hover td,
.adminTable tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
.table--compact th, .table--compact td{ padding: 7px 10px; font-size: 13px; }
.tableMini th, .tableMini td{ padding: 7px 9px; font-size: 12px; }
.table td:last-child, .adminTable td:last-child{ word-break: break-word; }

/* Scroll container for wide tables (already used in some admin pages) */
.tableWrap{
  width:100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.12);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
.tableWrap > table{ min-width: 760px; }
.tableWrap thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Modal polish: subtle entrance, no JS changes required ---- */
@keyframes modalIn{
  from{ transform: translateY(6px) scale(.992); opacity: .0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}
.modal-overlay.is-open .modal-content{ animation: modalIn 140ms ease-out both; }
@media (prefers-reduced-motion: reduce){
  .modal-overlay.is-open .modal-content{ animation: none; }
}

/* ---- Market rows: clearer focus + consistent borders ---- */
.marketOfferRow{ border-color: var(--border); }
.marketOfferRow:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.marketAllRow:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- React small alignment (shared tokens) ---- */
.reactRow{ border: 1px solid var(--border) !important; }


/* ==============================
   Stage 6: Page polish (key pages)
   - consistent padding for stats/player/news/map
   - unified toolbars/empty states
   ============================== */

/* Panel head responsiveness: keep actions usable on narrow screens */
@media (max-width: 720px){
  .panel__head{ flex-direction: column; align-items: stretch; }
  .panel-head{ flex-direction: column; align-items: stretch; }
  .panel__actions{ justify-content: flex-start; flex-wrap: wrap; width: 100%; }
}

/* Stats page: when wrapped in panel-body, reduce nested shadows a bit */
.panel .topRole{ box-shadow: none; background: rgba(0,0,0,.14); }
.panel .topRole__head{ flex-wrap: wrap; }
.topRole__actions{ flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px){
  .topRole__actions{ justify-content: flex-start; width: 100%; }
  .topSearch{ min-width: 100%; max-width: 100%; }
}

/* Player page: move content into panel-body, keep spacing tight and consistent */
.playerPage .playerHero{ margin: 0; }
.playerPage .playerTabs{ margin-top: var(--space-4); }
.playerPage .playerTabPanels{ margin-top: var(--space-3); }

/* Player tabs: closer to site buttons, with proper focus ring */
.playerTabBtn{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
  color: var(--text900);
  padding: 9px 12px;
  border-radius: 14px;
  font-weight: 850;
  letter-spacing: .02em;
}
.playerTabBtn:hover{ background: rgba(0,0,0,.18); border-color: rgba(255,255,255,.18); }
.playerTabBtn.is-active{
  background: rgba(240,140,40,.10);
  border-color: rgba(240,140,40,.45);
}
.playerTabBtn:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

/* News page: panel-body wrapper */
.newsGrid{ padding: 0; }
.newsList{ display:grid; gap: 12px; }
.newsItem{ border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(0,0,0,.12); overflow:hidden; }
.newsItem:hover{ border-color: rgba(255,255,255,.18); }
.newsItem__body{ padding: 12px 14px; }
.newsItem__title{ font-weight: 950; letter-spacing:.2px; }
.newsItem__meta{ font-size: 12px; color: var(--text700); margin-top: 4px; }

/* Map page: panel shell */
.mapPage .panel-body{ padding: var(--panel-pad); }
.mapEmbed{
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: rgba(0,0,0,.10);
}
.mapEmbed iframe{
  width: 100%;
  height: min(72vh, 880px);
  border: 0;
  display:block;
}

/* Sidebar monitoring: avoid inline styles and keep divider rhythm */
aside .divider{ margin: 12px 0; }

/* ============================================================
   Stage 7 — Home + Market + Admin polish (page-level)
   Goals: unified surfaces, consistent wide rhythm, better focus/hover,
   zero logic/architecture changes.
   ============================================================ */

/* ---------- Home: WebChat + News ---------- */
.homeMainGrid{ gap: var(--grid-gap); }

.webchatPanel .panel-body{ padding: var(--panel-pad); }

.webchat__list{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.webchatMsg{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
}
.webchatMsg--new{
  /* keep animation, but use softer base */
}

.webchat__composer{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.panel-body .newsGrid{ margin-top: 0; }

.newsCard{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.18));
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.newsCard:hover{
  border-color: rgba(240,140,40,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  transform: translateY(-1px);
}
.newsCard__text{ color: rgba(231,237,243,.88); }
.newsCard__meta{ color: var(--text700); }

@media (prefers-reduced-motion: reduce){
  .newsCard:hover{ transform:none; }
}

/* ---------- Sidebar: Online / Telemetry ---------- */
.telemetryRow{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
  transition: background var(--transition-med), border-color var(--transition-med);
}
.telemetryRow:hover{
  background: rgba(0,0,0,.18);
  border-color: rgba(240,140,40,.30);
}
.telemetryRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.telemetryAvatar{ border: 1px solid var(--border); background: rgba(0,0,0,.18); }

/* ---------- Market: page shell + toolbar + rows ---------- */
/* Keep ancestors overflow visible so `position: sticky` works predictably across browsers */
html.page-market .shopsPage{ overflow: visible; }

.shopsPage .panel__head.shopsHead{
  margin:0;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.12));
  align-items: center;
}

/* Market head meta: keep it compact and aligned */
html.page-market .shopsHead__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 8px;
  text-align:right;
  line-height: 1.1;
  min-width: 0;
}

@media (max-width: 720px){
  .shopsPage .panel__head.shopsHead{ flex-wrap: wrap; align-items: flex-start; }
  .shopsHead__meta{ width: 100%; text-align: left; }
}

.shopsToolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}

html.page-market .shopsToolbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.22);
}

.shopsTabs{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.shopsTab{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text900);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.shopsTab:hover{ transform: translateY(-1px); }
.shopsTab.is-active{
  background: rgba(255,255,255,.08);
  border-color: rgba(240,140,40,.28);
}
.shopsTab:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .shopsTab:hover{ transform:none; }
}

.shopsSearch input,
.shopsSelect,
.shopsChip,
.marketSort .marketSelect,
.marketGrid input,
.marketNum{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.shopsSearch input:focus,
.shopsSelect:focus,
.marketSort .marketSelect:focus,
.marketGrid input:focus,
.marketNum:focus{
  outline:none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

.marketOfferRow{
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-med), background var(--transition-fast), border-color var(--transition-fast);
}
.marketOfferRow:hover{
  transform: translateY(-1px);
  border-color: rgba(240,140,40,.28);
  background: rgba(0,0,0,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
}
.marketOfferRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.marketAllRow{
  background: rgba(0,0,0,.12);
}
.marketAllRow:hover{
  background: rgba(0,0,0,.16);
  border-color: rgba(240,140,40,.22);
  transform: translateY(-1px);
}
.marketAllRow:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .marketOfferRow:hover,
  .marketAllRow:hover{ transform:none; }
}

.shopsEmpty{
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.10);
  color: var(--text700);
}

/* Market/shops modal: align to shared tokens */
.shopsModalPanel{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(12,12,14,.90));
}
.shopsModalHead{
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.14);
}
.shopsModalClose{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.shopsModalClose:hover{ transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce){
  .shopsModalClose:hover{ transform:none; }
}

/* ============================================================
   UI Stage 8 — final page polish (home + market + admin)
   ============================================================ */
/* Global motion policy: keep UI snappy, but respect accessibility */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  :where(.btn,.shopsTab,.marketOfferRow,.marketAllRow,.newsCard,.marketActionBtn,.marketFavBtn):hover{
    transform: none !important;
  }
}

/* ---------------------------------
   HOME (news + webchat)
---------------------------------- */
.homeMainGrid{ gap: var(--grid-gap); }

.webchat__list{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.24));
}
.webchatMsg{
  border-color: rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.webchatMsg:hover{
  border-color: rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
}
.webchat__authHint{ font-size: 13px; }

/* Subtle scrollbars (targeted, non-breaking) */
.webchat__list, .adminCard, .marketAll, .tableWrap, .tableScroll{
  scrollbar-color: rgba(255,255,255,.26) rgba(0,0,0,.18);
  scrollbar-width: thin;
}
.webchat__list::-webkit-scrollbar,
.adminCard::-webkit-scrollbar,
.marketAll::-webkit-scrollbar,
.tableWrap::-webkit-scrollbar,
.tableScroll::-webkit-scrollbar{ height: 10px; width: 10px; }
.webchat__list::-webkit-scrollbar-thumb,
.adminCard::-webkit-scrollbar-thumb,
.marketAll::-webkit-scrollbar-thumb,
.tableWrap::-webkit-scrollbar-thumb,
.tableScroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.18);
}
.webchat__list::-webkit-scrollbar-track,
.adminCard::-webkit-scrollbar-track,
.marketAll::-webkit-scrollbar-track,
.tableWrap::-webkit-scrollbar-track,
.tableScroll::-webkit-scrollbar-track{ background: rgba(0,0,0,.14); border-radius: 999px; }

.newsCard{
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.26));
}
.newsCard:hover{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* ---------------------------------
   MARKET (density + typography + empty states)
---------------------------------- */
/* Keep market toolbar below the sticky site header (matches .tableHead--sticky) */
html.page-market .shopsToolbar{ top: var(--sticky-top); }
.shopsToolbar{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
}
html.page-market .shopsToolbar{ background: rgba(0,0,0,.22); }

.shopsTab{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text900);
}
.shopsTab.is-active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.shopsSearch input, .shopsSelect{
  border-color: var(--border);
  background: rgba(0,0,0,.14);
  color: var(--text900);
}
.shopsChip{ border-color: var(--border); background: rgba(0,0,0,.12); color: var(--text900); }


/* Empty blocks used by market.js */
.shopsEmpty{
  margin: 12px 0;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: rgba(0,0,0,.14);
  color: rgba(231,237,243,.84);
}
.shopsEmptyCenter{ display:flex; justify-content:center; align-items:center; }

/* "All offers" table */
.marketAll{
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(0,0,0,.10);
  overflow: auto;
}
.marketAllHead{
  display:grid;
  grid-template-columns: minmax(260px,1fr) 260px 240px 140px;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text700);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  min-width: 920px; /* enables horizontal scroll on small screens */
}
.marketAllBody{ padding: 10px; display:flex; flex-direction:column; gap: 10px; min-width: 920px; }
.mvRows{ display:flex; flex-direction:column; gap: 10px; }

/* Market "All" view: on laptop/tablet widths we should not force horizontal scrolling.
   We keep 4 columns but shrink them to fit typical 1024–1180 layouts.
   For smaller widths we switch to stacked cards (see @media 820px below).
*/
@media (max-width: 1180px){
  html.page-market .marketAllHead,
  html.page-market .marketAllBody{ min-width: 0; }

  html.page-market .marketAllHead,
  html.page-market .marketAllRow{
    grid-template-columns: minmax(220px,1fr) 220px 220px 120px;
  }
}

.marketAllRow{
  display:grid;
  grid-template-columns: minmax(260px,1fr) 260px 240px 140px;
  gap: 12px;
  align-items:center;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  padding: 10px 10px;
  cursor:pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.marketAllRow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.marketAllRow .c{ min-width: 0; }
.marketAllRow .t{ min-width:0; }
.marketAllRow .t .l1{ font-weight: 950; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marketAllRow .t .l2{ font-size: 12px; color: rgba(255,255,255,.60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Offer rows inside expanded group (density polish) */
.marketOfferRow{
  border-color: var(--border);
  background: rgba(0,0,0,.10);
  padding: 9px 10px;
}
.marketOfferRow:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
}

/* Pills/buttons within market rows */
.shopsCoordPill, .shopsSellerPill{
  border-color: var(--border);
  background: rgba(0,0,0,.12);
}
.marketFavBtn, .marketActionBtn{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
}
.marketFavBtn:hover, .marketActionBtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}

/* ---------------------------------
   ADMIN (tables/forms/toolbars)
---------------------------------- */

/* Reduced motion: avoid hover lifts on large lists */
@media (prefers-reduced-motion: reduce){
  .playerRow:hover,
  .navLink:hover,
  .pTab:hover,
  .viewBtn:hover{ transform:none !important; }
}


.profileWidgetChevron{ transition: transform .16s ease; }
.profileWidgetBtn.is-open .profileWidgetChevron{ transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .profileWidgetChevron{ transition: none; }
  .profileMenu{ transition: none; }
}


/* Vote modal */