/* ═══════════════════════════════════════════════════════
   GelbRuptures Module CSS v3.0 — Responsivo & Adaptativo
   ═══════════════════════════════════════════════════════ */

/* ── KPIs ─────────────────────────────────────────────── */
.gr-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 1200px) { .gr-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .gr-kpis { grid-template-columns: repeat(2, 1fr); } }

.gr-kpi {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  transition: transform .18s, box-shadow .18s;
  min-width: 0;
}
.gr-kpi[onclick] { cursor: pointer; }
.gr-kpi[onclick]:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.gr-kpi-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.4); margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-kpi-val {
  font-size: clamp(14px, 2.2vw, 22px);
  font-weight: 900; letter-spacing: -.02em;
  font-family: var(--mono, 'monospace');
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Nav ──────────────────────────────────────────────── */
.gr-nav {
  display: flex; gap: 6px; margin-bottom: 12px;
  align-items: center; flex-wrap: wrap;
}
.gr-nav-btn {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.6); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .15s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.gr-nav-btn:hover  { background: rgba(255,255,255,.08); color: #fff; }
.gr-nav-btn.active { background: rgba(15,244,198,.12); border-color: rgba(15,244,198,.35); color: #0ff4c6; }
.gr-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: rgba(255,255,255,.12);
  color: #fff; font-size: 9px; font-weight: 800;
}
.gr-badge.red { background: rgba(255,51,85,.2); color: #ff3355; }

/* ── Filtros ──────────────────────────────────────────── */
.gr-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
@media (min-width: 768px) {
  .gr-filters { grid-template-columns: auto auto auto 1fr auto; align-items: end; }
}

.gr-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gr-filter-group label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.35);
}
.gr-risk-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.gr-risk-btn {
  padding: 4px 9px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55); font-size: 10px;
  cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap;
}
.gr-risk-btn:hover { background: rgba(255,255,255,.08); }
.gr-risk-btn.active { color: #fff; font-weight: 700; }

.gr-selects { display: flex; gap: 8px; flex-wrap: wrap; }
.gr-select {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: #fff; padding: 5px 8px; font-size: 11px;
  font-family: inherit; flex: 1; min-width: 120px; max-width: 200px;
  max-height: 72px;
}
.gr-select option { background: #0c1220; }
.gr-search {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: #fff; padding: 5px 10px; font-size: 11px;
  font-family: inherit; width: 100%;
}
.gr-search::placeholder { color: rgba(255,255,255,.25); }
.gr-filter-actions { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.gr-btn-ghost {
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1); background: transparent;
  color: rgba(255,255,255,.45); font-size: 11px;
  cursor: pointer; font-family: inherit; transition: .15s; white-space: nowrap;
}
.gr-btn-ghost:hover { background: rgba(255,255,255,.06); color: #fff; }

/* ── PDV Card ─────────────────────────────────────────── */
.gr-pdv-card {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.gr-pdv-header {
  padding: 10px 14px; cursor: pointer; transition: .15s;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.gr-pdv-header:hover { background: rgba(255,255,255,.03); }
.gr-pdv-title {
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gr-pdv-meta {
  font-size: 10px; color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gr-badge-polo {
  background: rgba(255,255,255,.07); border-radius: 5px;
  padding: 2px 7px; font-size: 9px; font-weight: 600;
}
.gr-tag-ruptured {
  background: rgba(204,0,51,.2); color: #cc0033; border-radius: 5px;
  padding: 2px 7px; font-size: 9px; font-weight: 800;
  animation: gr-blink 1.2s infinite;
}
.gr-link { color: rgba(15,244,198,.65); font-size: 10px; }

/* ── Tabela ───────────────────────────────────────────── */
.gr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gr-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 680px; }
.gr-table thead tr { background: rgba(255,255,255,.03); }
.gr-table th {
  padding: 6px 8px; text-align: left;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap;
}
.gr-row { border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: .1s; }
.gr-row:hover { background: rgba(255,255,255,.03); }
.gr-row-ruptured { background: rgba(204,0,51,.05) !important; }
.gr-row-critical  { background: rgba(255,51,85,.04)  !important; }
.gr-td-product { padding: 7px 8px; max-width: 180px; }
.gr-product-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-product-cat  { font-size: 9px; color: rgba(255,255,255,.3); margin-top: 1px; }
.gr-score-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; }
.gr-score { font-size: 15px; font-weight: 900; font-family: var(--mono,'monospace'); line-height: 1; }
.gr-score-bar { width: 44px; height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.gr-score-bar div { height: 100%; border-radius: 3px; }
.gr-risk-badge {
  font-size: 8px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid; border-radius: 4px; padding: 1px 4px;
}
.gr-mini-bar { width: 44px; height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin: 2px auto 0; }
.gr-mini-bar div { height: 100%; border-radius: 3px; }
.gr-days { font-size: 13px; font-weight: 800; font-family: var(--mono,'monospace'); }
.gr-top50 {
  background: rgba(255,204,0,.15); color: #ffcc00;
  border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 800;
}
.gr-rupt-cnt {
  background: rgba(255,51,85,.15); color: #ff3355;
  border-radius: 4px; padding: 1px 5px; font-size: 9px; font-weight: 700;
}
.gr-sol {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; background: rgba(255,255,255,.03);
  border-radius: 5px; border-left: 2px solid;
}
.gr-sol-icon { font-size: 11px; flex-shrink: 0; }
.gr-sol-text { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Alertas Críticos ─────────────────────────────────── */
.gr-critical-header {
  padding: 9px 14px; background: rgba(255,51,85,.07);
  border: 1px solid rgba(255,51,85,.2); border-radius: 10px;
  margin-bottom: 12px; font-size: 11px; font-weight: 600; color: #ff3355;
}
.gr-critical-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
@media (max-width: 480px) { .gr-critical-grid { grid-template-columns: 1fr 1fr; } }

.gr-critical-card {
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 12px; cursor: pointer; transition: transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.gr-critical-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.gr-urgent { animation: gr-pulse-border 2s infinite; }
.gr-cc-rank { font-size: 11px; font-weight: 900; margin-bottom: 5px; }
.gr-cc-product { font-size: 12px; font-weight: 800; margin-bottom: 2px; line-height: 1.3; }
.gr-cc-place  { font-size: 9px; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.gr-cc-metrics {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4px; margin-bottom: 6px; text-align: center;
}
.gr-cc-score  { font-size: 18px; font-weight: 900; font-family: var(--mono,'monospace'); }
.gr-cc-trend  { font-size: 9px; color: rgba(255,255,255,.35); }
.gr-urgent-badge {
  position: absolute; top: 8px; right: 8px;
  background: #ff3355; color: #fff;
  font-size: 7px; font-weight: 800; padding: 2px 5px;
  border-radius: 4px; letter-spacing: .05em;
}

/* ── Modal conteúdo ───────────────────────────────────── */
.gr-modal-product, .gr-modal-pdv, .gr-modal-intelligence { }
.gr-modal-hero {
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 14px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.gr-modal-product-name { font-size: clamp(14px,3vw,18px); font-weight: 800; margin-bottom: 4px; }
.gr-modal-product-meta {
  font-size: 11px; color: rgba(255,255,255,.4);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.gr-modal-score-circle {
  width: 64px; height: 64px; border-radius: 50%; border: 3px solid;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.gr-modal-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.gr-modal-kpi {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px; padding: 9px; text-align: center;
}
.gr-modal-kpi div:first-child { font-family: var(--mono,'monospace'); margin-bottom: 3px; }
.gr-modal-kpi div:last-child  { font-size: 9px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .04em; }
.gr-modal-section { margin-bottom: 14px; }
.gr-modal-section-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: rgba(255,255,255,.45);
  margin-bottom: 9px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gr-modal-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 11px; gap: 8px; flex-wrap: wrap;
}
.gr-modal-row span { color: rgba(255,255,255,.45); }
.gr-solution {
  padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.03); margin-bottom: 6px;
}
.gr-sol-action { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.gr-sol-detail { font-size: 11px; color: rgba(255,255,255,.45); }

/* ── Modal fallback próprio ───────────────────────────── */
.gr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; backdrop-filter: blur(4px); padding: 12px;
}
.gr-modal-box {
  background: #0c1220; border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; width: min(900px, 100%);
  max-height: 88vh; display: flex; flex-direction: column;
}
.gr-modal-box.gr-modal-xl { width: min(1100px, 100%); }
.gr-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.07);
  gap: 10px; flex-shrink: 0;
}
.gr-modal-header button {
  background: none; border: none; color: rgba(255,255,255,.45);
  font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 5px;
  transition: .15s; flex-shrink: 0;
}
.gr-modal-header button:hover { background: rgba(255,255,255,.06); color: #fff; }
.gr-modal-title { font-size: 14px; font-weight: 800; }
.gr-modal-body  { overflow-y: auto; padding: 16px 18px; flex: 1; }

/* ── Estados ──────────────────────────────────────────── */
.gr-loading {
  padding: 48px; text-align: center;
  color: rgba(255,255,255,.35); font-size: 13px;
}
.gr-spin { display: inline-block; animation: gr-spin 1s linear infinite; margin-left: 6px; }
.gr-error { padding: 24px; text-align: center; color: #ff3355; font-size: 13px; }
.gr-error button {
  margin-top: 10px; padding: 5px 14px; border-radius: 7px;
  border: 1px solid #ff3355; background: transparent;
  color: #ff3355; cursor: pointer; font-family: inherit;
}
.gr-empty {
  padding: 48px 20px; text-align: center;
  color: rgba(255,255,255,.25); font-size: 13px; line-height: 1.7;
}

/* ── Footer info ──────────────────────────────────────── */
.gr-footer {
  font-size: 9px; color: rgba(255,255,255,.18);
  text-align: right; margin-top: 8px; padding-top: 6px;
}

/* ── Animações ────────────────────────────────────────── */
@keyframes gr-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes gr-spin { to { transform: rotate(360deg); } }
@keyframes gr-pulse-border {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,51,85,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(255,51,85,0); }
}

/* ── Dropdown custom ──────────────────────────────────── */
.gr-dropdown { position: relative; min-width: 130px; }
.gr-dropdown-btn {
  width: 100%; padding: 5px 10px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.8);
  font-size: 11px; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  transition: .15s; white-space: nowrap; text-align: left;
}
.gr-dropdown-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.gr-dropdown.open .gr-dropdown-btn { border-color: rgba(15,244,198,.4); color: #0ff4c6; }
.gr-dd-arrow { font-size: 9px; opacity: .5; transition: transform .15s; flex-shrink: 0; }
.gr-dropdown.open .gr-dd-arrow { transform: rotate(180deg); opacity: 1; }
.gr-dropdown-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #0f1828; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; z-index: 999; max-height: 220px; overflow-y: auto;
  display: none; box-shadow: 0 12px 32px rgba(0,0,0,.4);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
  min-width: 180px;
}
.gr-dropdown.open .gr-dropdown-menu { display: block; animation: gr-dd-in .12s ease; }
@keyframes gr-dd-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.gr-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; transition: background .1s;
  font-size: 11px; color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.gr-dd-item:last-child { border-bottom: none; }
.gr-dd-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.gr-dd-item input[type=checkbox] { accent-color: #0ff4c6; width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }
.gr-dd-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-dd-item em { display: block; font-size: 9px; color: rgba(255,255,255,.35); font-style: normal; }

/* ── Insights bar ─────────────────────────────────────── */
.gr-insights-bar {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.gr-insight-chip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  border-left: 3px solid; transition: .15s;
}
.gr-insight-chip:hover { filter: brightness(1.1); }
.gr-ins-critico { background: rgba(204,0,51,.08); border-color: #cc0033; }
.gr-ins-alto    { background: rgba(255,107,53,.08); border-color: #ff6b35; }
.gr-ins-medio   { background: rgba(255,204,0,.07); border-color: #ffcc00; }
.gr-ins-info    { background: rgba(15,244,198,.06); border-color: #0ff4c6; }
.gr-ins-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gr-ins-body { flex: 1; min-width: 0; }
.gr-ins-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.gr-ins-text  { font-size: 11px; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ── Ranking produto-centrado ─────────────────────────── */
.gr-product-ranking {
  margin-bottom: 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.gr-ranking-title {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.gr-ranking-table-wrap { overflow-x: auto; }