/* Ferramenta City Leagues com a identidade Michael Jogando: só troca variáveis e cores fixas
   da página original (que fica igual no prize-map local). */
:root, :root:root {
  color-scheme: dark;
  --page-bg: var(--mj-grafite);
  --surface: var(--mj-grafite-2);
  --surface-alt: var(--mj-grafite-3);
  --text-primary: var(--mj-branco);
  --text-secondary: var(--mj-cinza);
  --text-muted: var(--mj-cinza-2);
  --border: var(--mj-linha);
  --border-strong: #3a3a3a;
  --accent: var(--mj-laranja);
  --accent-strong: var(--mj-laranja-claro);
  --accent-soft: rgba(255, 138, 31, 0.14);
  --accent-soft-border: rgba(255, 138, 31, 0.45);
  --bad: var(--mj-vermelho);
  --bad-soft: rgba(255, 69, 69, 0.15);
  --bad-soft-border: rgba(255, 69, 69, 0.45);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --mu-good: var(--mj-laranja);
  --mu-bad: var(--mj-vermelho);
  --mu-mid: #383838;
}
body { font-family: var(--mj-font); background: var(--mj-grafite); }

/* texto escuro sobre laranja (branco sobre laranja não passa contraste) */
button.primary, .primary,
.cl-tier-toggle .ar-preset-btn.active,
.cl-view-toggle button.active,
#clSubnav a.active,
.cl-dd-menu button.active { color: var(--mj-grafite) !important; }
.cl-dd-menu button.active .cl-dd-n { color: rgba(18, 18, 18, 0.75) !important; }

.mj-tool-head { padding: 1.6rem 0 0.4rem; display: flex; align-items: center; gap: 0.9rem; }
.mj-tool-head img { width: 34px; height: 34px; flex: none; }
.mj-tool-head h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.012em; margin: 0; }
.mj-tool-head p { margin: 0.1rem 0 0; color: var(--mj-cinza); font-size: 0.9rem; }

/* ---------- celular ---------- */
@media (max-width: 640px) {
  .app { padding: 0 1rem 3rem; }
  .mj-tool-head { padding: 1rem 0 0.2rem; gap: 0.6rem; }
  .mj-tool-head img { display: none; }
  .mj-tool-head h1 { font-size: 1.4rem; }
  .mj-tool-head p { font-size: 0.82rem; }
  .cl-top { padding-top: 0.8rem; }
  /* na visão geral a trilha só repete o título: some, fica o link de Ferramentas */
  #clCrumbs:not(:has(.sep)) { visibility: hidden; }

  /* filtro de período: datas lado a lado sem vazar, atalhos numa linha */
  .panel { padding: 0.9rem; }
  .row { flex-wrap: wrap; gap: 0.6rem; }
  .row > div { flex: 1 1 140px; min-width: 0; }
  input[type="date"] { min-width: 0; width: 100%; font-size: 0.9rem; padding-left: 0.5rem; padding-right: 0.3rem; }
  .mu-presets { flex-wrap: wrap; gap: 0.4rem; }
  .mu-presets-label { width: 100%; }
  .mu-presets .ar-preset-btn { white-space: nowrap; padding: 0.4rem 0.7rem; flex: 1 1 auto; width: auto; }
  #clApply { width: 100%; }

  /* tabelas: mais densas, nome do deck fixo na esquerda enquanto arrasta */
  table { font-size: 0.8rem; }
  th, td { padding: 0.5rem 0.45rem; }
  tr:first-child th { font-size: 0.68rem; }
  .cl-pct { gap: 0.3rem; }
  .cl-pct-track { width: 30px; height: 6px; }
  .la-table-wrap { margin: 0 -1rem; padding: 0 1rem; scrollbar-width: none; }
  .la-table-wrap::-webkit-scrollbar { display: none; }
  .la-table-wrap table tr > :first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--page-bg);
    white-space: normal; min-width: 8.5rem; max-width: 10.5rem;
    box-shadow: 1px 0 0 var(--border);
  }
  .la-table-wrap table tr:first-child > :first-child { background: var(--surface-alt); }
  .la-table-wrap table tr.cl-child > :first-child { background: var(--surface-alt); padding-left: 1rem; }

  /* lista individual: ações em grade, navegação com folga pro dedo */
  .cl-deck-actions { gap: 0.4rem; }
  .cl-deck-actions button, .cl-deck-actions a.btnlike { padding: 0.5rem 0.7rem; }
  #clDeckPrev { order: 10; flex: 1 1 28%; }
  .cl-deck-actions > .hint { order: 11; text-align: center; min-width: 3.6rem; }
  #clDeckNext { order: 12; flex: 1 1 28%; }
}