/* ═══════════════════════════════════════════════════════════════
   GPG Comex Dashboard  ·  Grand Pacific Group
   Tema: Branco · Azul Marinho · Dourado
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --gpg-navy:      #0e1a40;
  --gpg-navy2:     #1a2d6b;
  --gpg-gold:      #c9a84c;
  --gpg-gold-lt:   #f0d080;
  --gpg-white:     #ffffff;
  --gpg-bg:        #f5f7fb;
  --gpg-bg2:       #edf0f8;
  --gpg-border:    #d4daea;
  --gpg-text:      #0e1a40;
  --gpg-muted:     #5a6a8a;
  --gpg-accent:    #c9a84c;  /* overridden per-commodity via inline style */
  --gpg-accent2:   #9b7b2e;
}

/* ── Per-commodity accent colours (CSS class overrides) ─────── */
.gpg-c-acucar    { --gpg-accent:#c9a84c; --gpg-accent2:#9b7b2e; }
.gpg-c-graos     { --gpg-accent:#2d7d46; --gpg-accent2:#1e5430; }
.gpg-c-cafe      { --gpg-accent:#7c4a1e; --gpg-accent2:#5a3214; }
.gpg-c-proteinas { --gpg-accent:#8b1a2a; --gpg-accent2:#5c0f1a; }
.gpg-c-all       { --gpg-accent:#0e1a40; --gpg-accent2:#1a2d6b; }

/* ── Base wrapper ───────────────────────────────────────────── */
.gpg-wrap {
  background:    var(--gpg-bg);
  color:         var(--gpg-text);
  font-family:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:   400;
  font-size:     15px;
  border-radius: 16px;
  overflow:      hidden;
  box-shadow:    0 2px 32px rgba(14,26,64,.12);
  position:      relative;
}

/* ── HEADER ─────────────────────────────────────────────────── */
.gpg-header {
  background:       var(--gpg-navy);
  background-image: linear-gradient(135deg, #0a1230 0%, #0e1a40 55%, #1a2d6b 100%);
  padding:          24px 36px 20px;
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              24px;
  flex-wrap:        wrap;
}

.gpg-header-brand {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.gpg-logo-svg { flex-shrink: 0; }

.gpg-logo-img {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
  border:        2px solid rgba(201,168,76,.5);
  box-shadow:    0 0 0 1px rgba(201,168,76,.2);
}

.gpg-eyebrow {
  display:         block;
  font-family:     'DM Mono', 'Courier New', monospace;
  font-size:       9.5px;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  color:           var(--gpg-gold-lt);
  margin-bottom:   4px;
}

/* Override WordPress heading resets */
.gpg-wrap h2.gpg-title,
.gpg-wrap .gpg-title {
  font-family:   'Cormorant Garamond', Georgia, serif !important;
  font-size:     1.65rem !important;
  font-weight:   700 !important;
  line-height:   1.2 !important;
  color:         #fff !important;
  margin:        0 !important;
  padding:       0 !important;
  border:        none !important;
}

/* ── Header controls ────────────────────────────────────────── */
.gpg-header-controls {
  display:     flex;
  align-items: flex-end;
  gap:         12px;
  flex-wrap:   wrap;
}

.gpg-filter-grp {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.gpg-filter-lbl {
  font-family:    'DM Mono', monospace;
  font-size:      9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gpg-gold-lt);
}

.gpg-sel {
  background:    rgba(255, 255, 255, .1);
  border:        1px solid rgba(201, 168, 76, .4);
  border-radius: 6px;
  color:         #fff;
  padding:       7px 10px;
  font-size:     0.82rem;
  min-width:     110px;
  cursor:        pointer;
  transition:    border-color .2s;
}
.gpg-sel:focus { outline: none; border-color: var(--gpg-gold); }
.gpg-sel option { background: var(--gpg-navy); }

.gpg-btn-apply {
  background:    var(--gpg-gold);
  color:         var(--gpg-navy);
  border:        none;
  border-radius: 6px;
  padding:       9px 20px;
  font-size:     0.82rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    opacity .2s, transform .15s;
  align-self:    flex-end;
  white-space:   nowrap;
}
.gpg-btn-apply:hover { opacity: .87; transform: translateY(-1px); }

/* ── Period tabs ────────────────────────────────────────────── */
.gpg-period-tabs {
  background:    var(--gpg-white);
  border-bottom: 1px solid var(--gpg-border);
  padding:       0 36px;
  display:       flex;
  gap:           0;
  flex-wrap:     wrap;
}

.gpg-period-tab {
  padding:        11px 20px;
  font-size:      0.82rem;
  font-weight:    500;
  cursor:         pointer;
  color:          var(--gpg-muted);
  background:     none;
  border:         none;
  border-bottom:  2px solid transparent;
  transition:     all .2s;
  white-space:    nowrap;
}
.gpg-period-tab:hover  { color: var(--gpg-navy); }
.gpg-period-tab.active { color: var(--gpg-navy); font-weight: 600; border-bottom-color: var(--gpg-accent); }

/* ── Loading / Error ────────────────────────────────────────── */
.gpg-loading,
.gpg-error {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         48px 36px;
  color:           var(--gpg-muted);
  font-size:       0.9rem;
  background:      var(--gpg-white);
}

.gpg-spin {
  width:         22px;
  height:        22px;
  border:        2px solid var(--gpg-border);
  border-top-color: var(--gpg-accent);
  border-radius: 50%;
  animation:     gpg-spin .7s linear infinite;
  flex-shrink:   0;
}
@keyframes gpg-spin { to { transform: rotate(360deg); } }

/* ── KPI Row ────────────────────────────────────────────────── */
.gpg-kpis {
  display:       grid;
  grid-template-columns: repeat(4, 1fr);
  gap:           14px;
  padding:       24px 36px;
  background:    var(--gpg-white);
  border-bottom: 1px solid var(--gpg-border);
}
@media (max-width: 900px)  { .gpg-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .gpg-kpis { grid-template-columns: 1fr; } }

.gpg-kpi {
  background:    var(--gpg-bg);
  border:        1px solid var(--gpg-border);
  border-radius: 12px;
  padding:       18px 20px;
  position:      relative;
  overflow:      hidden;
  transition:    box-shadow .2s;
}
.gpg-kpi:hover { box-shadow: 0 4px 16px rgba(14,26,64,.1); }

/* Accent top stripe — position 0/1/2/3 get different tints */
.gpg-kpi::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     3px;
  background: var(--gpg-accent);
}
.gpg-kpi--1::before { background: var(--gpg-navy); }
.gpg-kpi--2::before { background: var(--gpg-accent2); }
.gpg-kpi--3::before { background: var(--gpg-navy2); }

.gpg-kpi-icon {
  position:  absolute;
  top: 14px; right: 14px;
  font-size: 1.3rem;
  opacity:   .2;
}

.gpg-kpi-lbl {
  display:        block;
  font-family:    'DM Mono', monospace;
  font-size:      9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--gpg-muted);
  margin-bottom:  8px;
}

.gpg-kpi-val {
  display:     block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size:   1.85rem;
  font-weight: 700;
  color:       var(--gpg-navy);
  line-height: 1;
}

.gpg-kpi-sub {
  display:    block;
  font-size:  0.72rem;
  color:      var(--gpg-muted);
  margin-top: 4px;
}

.gpg-kpi-comps {
  display:    flex;
  gap:        8px;
  margin-top: 8px;
  flex-wrap:  wrap;
}

.gpg-comp {
  font-family:  'DM Mono', monospace;
  font-size:    0.7rem;
  padding:      2px 6px;
  border-radius: 4px;
}
.gpg-comp-neutral { background: var(--gpg-bg2); color: var(--gpg-muted); }
.gpg-comp-up      { background: #d4edda;       color: #155724; }
.gpg-comp-down    { background: #fdecea;       color: #c62828; }

/* ── Sections ───────────────────────────────────────────────── */
.gpg-section {
  padding:        24px 36px 0;
}
.gpg-section:last-of-type { padding-bottom: 24px; }

.gpg-section-hdr {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
  flex-wrap:       wrap;
  gap:             10px;
}

.gpg-wrap h3.gpg-section-title,
.gpg-wrap .gpg-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size:   1.1rem !important;
  font-weight: 700 !important;
  color:       var(--gpg-navy) !important;
  margin:      0 0 12px !important;
  padding:     0 !important;
  border:      none !important;
}

.gpg-section-sub {
  font-size:    0.78rem;
  color:        var(--gpg-muted);
  margin-top:   -8px;
  margin-bottom: 12px;
}

/* ── Series tab buttons ─────────────────────────────────────── */
.gpg-chart-tabs {
  display: flex;
  gap:     4px;
}

.gpg-tab {
  background:    var(--gpg-bg2);
  border:        1px solid var(--gpg-border);
  border-radius: 6px;
  padding:       5px 12px;
  font-size:     0.78rem;
  font-weight:   500;
  cursor:        pointer;
  color:         var(--gpg-muted);
  transition:    all .2s;
}
.gpg-tab:hover  { color: var(--gpg-navy); border-color: var(--gpg-navy); }
.gpg-tab.active { background: var(--gpg-navy); color: #fff; border-color: var(--gpg-navy); }

/* ── Cards ──────────────────────────────────────────────────── */
.gpg-card {
  background:    var(--gpg-white);
  border:        1px solid var(--gpg-border);
  border-radius: 12px;
  padding:       20px;
  margin-bottom: 16px;
}
.gpg-card--full { width: 100%; }

/* ── Two-column grid ────────────────────────────────────────── */
.gpg-2col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}
.gpg-2col--60-40 {
  grid-template-columns: 1.5fr 1fr;
}
@media (max-width: 900px) {
  .gpg-2col,
  .gpg-2col--60-40 { grid-template-columns: 1fr; }
}

/* ── Treemap ────────────────────────────────────────────────── */
.gpg-treemap {
  width:      100%;
  min-height: 380px;
  position:   relative;
  user-select: none;
  overflow:   hidden;
  background: var(--gpg-bg);
  border-radius: 8px;
}

.gpg-tm-cell {
  position:   absolute;
  overflow:   hidden;
  border:     1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  display:    flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:    8px;
  cursor:     default;
  transition: filter .15s;
  box-sizing: border-box;
}
.gpg-tm-cell:hover { filter: brightness(1.14); z-index: 2; }

.gpg-tm-country {
  font-size:      0.78rem;
  font-weight:    600;
  color:          #fff;
  text-shadow:    0 1px 3px rgba(0,0,0,.45);
  line-height:    1.2;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.gpg-tm-pct {
  font-family: 'DM Mono', monospace;
  font-size:   0.68rem;
  color:       rgba(255, 255, 255, .85);
}

.gpg-tm-tooltip {
  position:       fixed;
  z-index:        9999;
  background:     var(--gpg-navy);
  color:          #fff;
  padding:        10px 14px;
  border-radius:  8px;
  font-size:      0.78rem;
  pointer-events: none;
  box-shadow:     0 4px 20px rgba(0,0,0,.3);
  max-width:      220px;
  line-height:    1.75;
  border:         1px solid rgba(201,168,76,.3);
}
.gpg-tm-tooltip strong {
  display:      block;
  color:        var(--gpg-gold-lt);
  font-size:    0.85rem;
  margin-bottom: 4px;
  white-space:  nowrap;
}

/* ── NCM Groups table ───────────────────────────────────────── */
.gpg-ncm-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.8rem;
}
.gpg-ncm-table thead th {
  font-family:    'DM Mono', monospace;
  font-size:      9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--gpg-muted);
  font-weight:    500;
  padding:        6px 8px;
  border-bottom:  2px solid var(--gpg-border);
  text-align:     left;
}
.gpg-ncm-table thead th:nth-child(2),
.gpg-ncm-table thead th:nth-child(3) { text-align: right; }

.gpg-ncm-table tr { border-bottom: 1px solid var(--gpg-border); }
.gpg-ncm-table tr:last-child { border-bottom: none; }
.gpg-ncm-table td { padding: 8px 8px; vertical-align: middle; }

.gpg-ncm-name {
  color:       var(--gpg-text);
  font-weight: 500;
  max-width:   160px;
}

.gpg-ncm-fob {
  text-align:  right;
  font-family: 'DM Mono', monospace;
  font-size:   0.72rem;
  color:       var(--gpg-navy);
}

.gpg-ncm-pct {
  font-size:   0.68rem;
  color:       var(--gpg-muted);
  display:     block;
  margin-top:  2px;
}

.gpg-ncm-bar-track {
  height:        4px;
  background:    var(--gpg-bg2);
  border-radius: 2px;
  overflow:      hidden;
}
.gpg-ncm-bar-fill {
  height:        100%;
  background:    var(--gpg-accent);
  border-radius: 2px;
  transition:    width .8s ease;
}

/* ── Rank table ─────────────────────────────────────────────── */
.gpg-rank-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     7px 0;
  border-bottom: 1px solid var(--gpg-border);
}
.gpg-rank-row:last-child { border-bottom: none; }

.gpg-rank-n {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  font-family:     'DM Mono', monospace;
  font-size:       0.65rem;
  background:      var(--gpg-bg2);
  color:           var(--gpg-muted);
  flex-shrink:     0;
}
.gpg-rank-n-top { background: var(--gpg-navy); color: var(--gpg-gold-lt); }

.gpg-rank-info { flex: 1; min-width: 0; }

.gpg-rank-name {
  font-size:      0.79rem;
  color:          var(--gpg-text);
  font-weight:    500;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.gpg-rank-bar-t {
  height:        3px;
  background:    var(--gpg-bg2);
  border-radius: 2px;
  overflow:      hidden;
  margin-top:    4px;
}
.gpg-rank-bar-f {
  height:        100%;
  background:    linear-gradient(90deg, var(--gpg-navy), var(--gpg-accent));
  border-radius: 2px;
  transition:    width .8s ease;
}

.gpg-rank-val    { text-align: right; flex-shrink: 0; }
.gpg-rank-fob    { font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--gpg-navy); }
.gpg-rank-pct    { font-size: .65rem; color: var(--gpg-muted); }

/* ── Footer ─────────────────────────────────────────────────── */
.gpg-footer {
  background:     var(--gpg-navy);
  border-top:     2px solid var(--gpg-gold);
  padding:        14px 36px;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            8px;
  font-family:    'DM Mono', monospace;
  font-size:      9px;
  letter-spacing: .07em;
  color:          rgba(255, 255, 255, .45);
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes gpg-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gpg-kpi  { animation: gpg-up .4s ease both; }
.gpg-card { animation: gpg-up .45s ease both; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .gpg-header        { padding: 20px 20px 16px; }
  .gpg-period-tabs   { padding: 0 20px; }
  .gpg-kpis          { padding: 16px 20px; gap: 10px; }
  .gpg-section       { padding: 16px 20px 0; }
  .gpg-footer        { padding: 12px 20px; }
  .gpg-header-controls { gap: 8px; }
  .gpg-sel           { min-width: 90px; }
}

@media (max-width: 480px) {
  .gpg-wrap h2.gpg-title,
  .gpg-wrap .gpg-title { font-size: 1.2rem !important; }
  .gpg-kpi-val         { font-size: 1.5rem; }
}