/* =======================================================
   MARKET REPORTS — Premium dashboard (scoped)
   Premium UI polish: stronger typography, borders, spacing,
   pill badges, KPI emphasis, richer cards, cleaner table.
   ======================================================= */

:root{
  --mr-brand:#218CCF;
  --mr-brand2:#12D8E0;
  --mr-ink:#0a3246;
  --mr-dark:#0A4E73;
  --mr-soft:#EAF6FC;
  --mr-soft2:#CFEAF7;

  --mr-border:#dbe7f1;
  --mr-border2:#e7f0f7;

  --mr-muted:#64748b;
  --mr-muted2:#94a3b8;

  --mr-bg:#f7fbff;

  --mr-shadow:0 12px 28px rgba(15,23,42,.08);
  --mr-shadow2:0 18px 42px rgba(2,132,199,.12);

  --mr-radius:18px;
  --mr-radius2:22px;
}

.muted{ color:var(--mr-muted); }
.small{ font-size:.92rem; }

/* Page background polish (safe even if your theme overrides) */
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(33,140,207,.10), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(14,165,233,.08), transparent 55%),
              var(--mr-bg);
}

/* =======================================================
   CONSOLIDATED HEADER
   One compact card: title/sub (left) + schedule/request buttons
   (right) on the same row, then the two-tier tab nav, then the
   filter bar — replaces what used to be three stacked sections
   (page-head, auction-schedule block, reports&downloads topbar).
   ======================================================= */
.mr-header-bar{
  --ctrl-h:42px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98));
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--mr-radius2);
  box-shadow: var(--mr-shadow);
  padding:22px 24px 20px;
  margin-top:18px;
}

.mr-header-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.mr-header-left{ min-width:0; }

.mr-header-eyebrow{
  display:inline-block;
  font-weight:900;
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mr-brand);
  margin-bottom:4px;
}

.mr-header-title{
  margin:0;
  font-weight:1000;
  letter-spacing:-.02em;
  color:var(--mr-ink);
  /* Sized so every dataset title (incl. the longer "Orthodox — ..."
     variants) stays on one line at common widths — a fixed clamp keyed
     only to viewport width (not text length) let the Orthodox tabs wrap
     to a second line while CTC stayed on one, shifting the header's
     height when switching tabs. Smaller + tighter line-height fixes that. */
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mr-header-sub{
  margin:6px 0 0;
  color:var(--mr-muted);
  font-weight:650;
  font-size:.92rem;
  max-width:60ch;
}

.mr-header-right{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  flex:0 0 auto;
  padding-top:2px;
}

/* Each button + its short label, stacked and centred as one unit;
   equal min-width keeps the two action blocks visually balanced. */
.mr-header-action{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:170px;
}

.mr-header-action .btn{ width:100%; justify-content:center; }

.mr-header-action-label{
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--mr-muted2);
}

/* Two-tier nav: main tea tabs, a small caption, then the dataset
   sub-tabs — reads as one connected navigation row instead of
   two disconnected controls. */
.mr-nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(10,78,115,.10);
}

@media (max-width: 640px){
  .mr-header-right{ width:100%; }
  .mr-header-right .btn{ flex:1 1 auto; justify-content:center; }
  .mr-nav{ align-items:flex-start; }
}

/* Tabs: more premium capsule */
.mr-tabs{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(234,246,252,.98), rgba(207,234,247,.98));
  border:1px solid rgba(10,78,115,.10);
  box-shadow:0 14px 34px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

.mr-tab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--mr-dark);
  opacity:.80;
  font-weight:950;
  letter-spacing:.15px;
  padding:11px 16px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  transition: background-color .18s ease, color .18s ease, transform .12s ease,
              box-shadow .18s ease, opacity .18s ease, filter .18s ease;
  outline:none;
  min-height:42px;
  white-space:nowrap;
  position:relative;
}

.mr-tab:hover{
  opacity:1;
  background:rgba(255,255,255,.70);
  box-shadow: inset 0 0 0 1px rgba(10,78,115,.10);
}

.mr-tab:active{
  transform: translateY(1px);
}

.mr-tab.active{
  opacity:1;
  color:#fff;
  background:linear-gradient(135deg, var(--mr-dark), var(--mr-brand));
  box-shadow:0 18px 34px rgba(10,78,115,.22);
  filter:saturate(1.05);
}

.mr-tab.active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  pointer-events:none;
}

.mr-tab:focus-visible{
  opacity:1;
  box-shadow:0 0 0 4px rgba(33,140,207,.25);
}

/* Mobile: full-width segmented control */
@media (max-width: 560px){
  .mr-tabs{
    width:100%;
    border-radius:18px;
    padding:6px;
  }
  .mr-tab{
    flex:1;
    text-align:center;
    white-space:normal;
    line-height:1.15;
    padding:10px 12px;
  }
}

/* =======================================================
   SUB-TABS (COMBROK Auction Report / Mombasa Auction Report)
   Smaller, understated variant of .mr-tabs so the hierarchy
   (tea type is primary, dataset source is secondary) stays clear.
   Now sits in the shared header nav rather than nested inside
   each tea panel, so only the group matching the active main
   tab should render — the [hidden] rule below enforces that
   (without it, the plain-class .mr-subtabs display:inline-flex
   below would outrank the browser's default [hidden] styling).
   ======================================================= */
.mr-subtabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(10,78,115,.12);
}

.mr-subtab{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--mr-dark);
  opacity:.72;
  font-weight:850;
  letter-spacing:.1px;
  font-size:.88rem;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  transition: background-color .16s ease, color .16s ease, opacity .16s ease;
  outline:none;
  white-space:nowrap;
}

.mr-subtab:hover{
  opacity:1;
  background:rgba(234,246,252,.9);
}

.mr-subtab.active{
  opacity:1;
  color:#fff;
  background:linear-gradient(135deg, var(--mr-brand), var(--mr-brand2));
  box-shadow:0 8px 18px rgba(33,140,207,.24);
}

.mr-subtab:focus-visible{
  opacity:1;
  box-shadow:0 0 0 3px rgba(33,140,207,.22);
}

.mr-subtabs[hidden]{ display:none !important; }

@media (max-width: 560px){
  .mr-subtabs{ width:100%; }
  .mr-subtab{ flex:1; text-align:center; }
}

/* Sub-panel switching (mirrors .mr-panel) */
.mr-subpanel{
  display:none;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.mr-subpanel.active{
  display:block;
  opacity:1;
  transform: translateY(0);
}
.mr-subpanel[hidden]{ display:none !important; }

/* =======================================================
   FILTER BAR — compact inline row, integrated into the header
   card (no separate background/card of its own — .mr-header-bar
   already provides that), rather than its own boxed section.
   ======================================================= */
.mr-filter-inline{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  column-gap:28px;
  row-gap:14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(10,78,115,.10);
}

.mr-header-bar .field{ display:grid; gap:9px; align-content:start; position:relative; }
.mr-header-bar .field.year{ flex:0 0 auto; min-width:150px; }
.mr-header-bar .field.range{ flex:1 1 340px; min-width:300px; }
.mr-header-bar .field.actions{ flex:0 0 auto; }

.mr-header-bar .field > span{
  font-weight:950;
  color:var(--mr-dark);
  letter-spacing:.14em;
  font-size:.78rem;
  text-transform:uppercase;
  line-height:1.2;
}
.mr-header-bar .field-label-ghost{
  display:block;
  visibility:hidden;
  font-size:.78rem;
  line-height:1.2;
}

.mr-header-bar input[type="number"],
.mr-header-bar select{
  appearance:auto;
  height:var(--ctrl-h);
  box-sizing:border-box;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:0 14px;
  min-width:150px;
  font-weight:850;
  color:var(--mr-ink);
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}

.mr-header-bar select:focus,
.mr-header-bar input[type="number"]:focus{
  outline:none;
  border-color: rgba(33,140,207,.45);
  box-shadow:0 0 0 4px rgba(33,140,207,.16), 0 12px 26px rgba(15,23,42,.08);
}

.mr-header-bar .range .range-row{ display:flex; align-items:center; gap:10px; }
.mr-header-bar .range .range-row select{ flex:1 1 0; min-width:0; }
.mr-header-bar .range .sep{
  color:var(--mr-dark);
  font-weight:950;
  letter-spacing:.05em;
  flex:0 0 auto;
}

/* checkbox row */
.mr-header-bar .range .chk{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:2px;
  user-select:none;
  color:var(--mr-dark);
  font-weight:800;
  font-size:.88rem;
}
.mr-header-bar .range .chk input{
  width:16px;
  height:16px;
  accent-color: var(--mr-brand);
  transform:translateY(1px);
}

/* Actions: Apply / Clear, level with the selects above */
.mr-header-bar .actions-row{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--ctrl-h);
}

/* Buttons: more premium */
.mr-header-bar .btn{
  height:var(--ctrl-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--mr-brand), var(--mr-brand2));
  color:#fff;
  border-radius:999px;
  padding:0 22px;
  font-weight:950;
  letter-spacing:.2px;
  border:0;
  cursor:pointer;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
  text-decoration:none;
  box-shadow:0 14px 28px rgba(33,140,207,.26);
  position:relative;
  z-index:1;
}

.mr-header-bar .btn:hover{
  filter:brightness(.98) saturate(1.05);
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(33,140,207,.30);
}
.mr-header-bar .btn:active{
  transform:translateY(0);
  box-shadow:0 12px 24px rgba(33,140,207,.22);
}

.mr-header-bar .btn.ghost{
  background:rgba(255,255,255,.96);
  color:var(--mr-dark);
  border:1px solid rgba(10,78,115,.14);
  box-shadow:0 12px 22px rgba(15,23,42,.06);
}

.mr-header-bar .btn.dl{ font-weight:950; }

.mr-hint{
  font-weight:850;
  color: var(--mr-muted);
  letter-spacing:.2px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.50);
  border:1px solid rgba(15,23,42,.06);
  display:inline-block;
  margin-top:4px;
}

/* Responsive: stack the filter row cleanly on small screens */
@media (max-width: 760px){
  .mr-filter-inline{ flex-direction:column; align-items:stretch; row-gap:16px; }
  .mr-header-bar .field.year,
  .mr-header-bar .field.range,
  .mr-header-bar .field.actions{ flex:1 1 auto; min-width:0; }
  .mr-header-bar .field-label-ghost{ display:none; }
  .mr-header-bar .actions-row{ width:100%; }
  .mr-header-bar .actions-row .btn{ flex:1 1 0; }
}

/* =======================================================
   PANELS (tab switching)
   ======================================================= */
.mr-panel{
  display:none;
  opacity:0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease;
}
.mr-panel.active{
  display:block;
  opacity:1;
  transform: translateY(0);
}
.mr-panel[hidden]{ display:none !important; }

/* =======================================================
   Section headings polish
   ======================================================= */
.mr-kpi-head .mr-kpi-title{
  margin:0;
  font-weight:1000;
  letter-spacing:-.02em;
  color:var(--mr-ink);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.mr-kpi-head .mr-kpi-sub{
  margin:6px 0 0;
  color:var(--mr-muted);
  font-weight:650;
}

/* =======================================================
   KPI GRID (Premium)
   ======================================================= */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

/* Make KPI look premium with a left accent + subtle glass */
.kpi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98));
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--mr-radius2);
  padding:16px 16px;
  box-shadow: var(--mr-shadow);
  position:relative;
  overflow:hidden;
}

/* top sheen */
.kpi-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(700px 160px at 20% 0%, rgba(33,140,207,.16), transparent 60%);
  pointer-events:none;
}

/* left accent bar */
.kpi-card::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background: linear-gradient(180deg, var(--mr-brand2), var(--mr-dark));
  opacity:.9;
}

/* Text hierarchy */
.kpi-label{
  font-weight:950;
  color: var(--mr-dark);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.kpi-value{
  font-weight:1000;
  font-size:1.35rem;
  line-height:1.15;
  margin-top:8px;
  color:#0f172a;
}

.kpi-hint{
  margin-top:10px;
  font-size:.90rem;
  color:var(--mr-muted);
  font-weight:650;
}

/* Make numbers pop slightly */
.kpi-value{
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* Hover: lift */
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--mr-shadow2);
  border-color: rgba(33,140,207,.22);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Responsive KPI */
@media (max-width: 980px){
  .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .kpi-grid{ grid-template-columns:1fr; }
}

/* =======================================================
   CHARTS GRID + CARDS
   ======================================================= */
.charts-grid{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media(min-width:1000px){
  .charts-grid{ grid-template-columns:1fr 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98));
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  padding:14px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 260px at 15% 0%, rgba(33,140,207,.10), transparent 62%);
  pointer-events:none;
}

.card.hover:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(15,23,42,.12);
  border-color: rgba(33,140,207,.18);
}

.chart-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.chart-head h3{
  margin:0;
  font-weight:1000;
  color:var(--mr-ink);
  letter-spacing:-.01em;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
}
.chart-head .sub{
  color:var(--mr-muted);
  font-size:.92rem;
  font-weight:800;
  padding:.28rem .6rem;
  border-radius:999px;
  background: rgba(234,246,252,.9);
  border:1px solid rgba(15,23,42,.06);
}

.chart{
  position:relative;
  min-height:260px;
  overflow:hidden;
  border-radius:16px;
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  border:1px solid rgba(15,23,42,.06);
}

.chart svg{
  width:100%;
  height:100%;
  display:block;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.chart-empty{
  color:var(--mr-muted);
  padding:16px;
  font-weight:800;
}

.donut{
  display:grid;
  place-items:center;
  min-height:260px;
}

/* =======================================================
   SUMMARY CARD (all 4 datasets: CTC/Orthodox x Combrok/Auction)
   ======================================================= */
[id^="mr-summary-"]{
  border-radius:22px;
  border:1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.98));
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}

.mr-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
}

.mr-summary-title{
  margin:0;
  font-weight:1000;
  color:var(--mr-ink);
  letter-spacing:-.01em;
}

.mr-summary-sub{
  margin:6px 0 0;
  font-weight:700;
  color:var(--mr-muted);
}

.mr-summary-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.mr-badge{
  display:inline-flex;
  align-items:center;
  padding:.45rem .7rem;
  border-radius:999px;
  background: rgba(234,246,252,.95);
  border:1px solid rgba(10,78,115,.10);
  font-weight:950;
  color:var(--mr-dark);
  font-size:.82rem;
  letter-spacing:.2px;
}

/* =======================================================
   TABLE (Premium)
   ======================================================= */
.table-wrap{
  overflow:auto;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 14px 30px rgba(15,23,42,.06);
  background:#fff;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border-radius:18px;
  overflow:hidden;
}

.table thead th{
  text-align:left;
  padding:13px 14px;
  background: linear-gradient(180deg, #f3f9fe, #edf7ff);
  color:var(--mr-ink);
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.74rem;
  border-bottom:2px solid rgba(33,140,207,.18);
  white-space:nowrap;
}

.table tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.06);
  color:#334155;
  white-space:nowrap;
  font-weight:750;
}

.table tbody tr:nth-child(odd) td{
  background: rgba(251,253,255,1);
}
.table tbody tr:hover td{
  background: rgba(234,246,252,.75);
}

/* Align numeric feel a bit nicer (optional) */
.table tbody td:nth-child(1),
.table tbody td:nth-child(2),
.table tbody td:nth-child(3),
.table tbody td:nth-child(4),
.table tbody td:nth-child(5),
.table tbody td:nth-child(6){
  font-variant-numeric: tabular-nums;
}

/* =======================================================
   Animations gate (kept minimal; no hiding by default)
   ======================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

/* =======================================================
   Extra small responsiveness
   ======================================================= */
@media (max-width: 560px){
  .mr-summary{ flex-direction:column; }
  .mr-summary-badges{ justify-content:flex-start; }
}