/* ============================================================
   OnlineHandball — стиль экрана матча (монохром, светлая/тёмная)
   Подключается ГЛОБАЛЬНО (см. README). Все классы с префиксом mc-,
   чтобы не конфликтовать с классами MudBlazor.
   Тема переключается классом mc-light / mc-dark на корневом .mc-scroll.
   ============================================================ */

.mc-light{
  --mc-bg:#e9edf3; --mc-surf:#ffffff; --mc-surf2:#f3f5f9; --mc-surf3:#e7ebf2;
  --mc-line:#dee3ec; --mc-line2:#ccd3df;
  --mc-txt:#1b2230; --mc-txt2:#586274; --mc-txt3:#8b94a6;
  --mc-emph:#1b2230; --mc-emph-ink:#ffffff;
  --mc-shadow:0 1px 2px rgba(30,41,59,.08),0 4px 14px rgba(30,41,59,.10);
  --mc-shadow-lg:0 8px 28px rgba(30,41,59,.14);
}
.mc-dark{
  --mc-bg:#0e1117; --mc-surf:#171b24; --mc-surf2:#1f2431; --mc-surf3:#272d3c;
  --mc-line:#2c3446; --mc-line2:#3a4256;
  --mc-txt:#e8ebf2; --mc-txt2:#9aa4b6; --mc-txt3:#6b7488;
  --mc-emph:#eef1f6; --mc-emph-ink:#12151c;
  --mc-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  --mc-shadow-lg:0 8px 28px rgba(0,0,0,.5);
}

.mc-scroll{--mc-r:10px;--mc-r-sm:8px;--mc-bh:44px;--mc-bh-lg:54px;--mc-g:8px;
  overflow-x:auto;background:var(--mc-bg);color:var(--mc-txt);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding:18px;min-height:100vh}
.mc-app{min-width:1180px;max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:var(--mc-g)}
.mc-lead{color:var(--mc-txt2);font-size:13.5px;text-align:center;margin:0 0 4px}

/* ---------- app bar ---------- */
.mc-appbar.mud-paper{background:var(--mc-surf);border:1px solid var(--mc-line);border-radius:var(--mc-r);
  display:flex;align-items:center;gap:12px;padding:8px 12px;box-shadow:var(--mc-shadow)}
.mc-tools{display:flex;align-items:center;gap:2px}
.mc-appbar .mud-icon-button{color:var(--mc-txt2)}
.mc-appbar .mud-icon-button:hover{background:var(--mc-surf3);color:var(--mc-txt)}
.mc-sep{width:1px;height:26px;background:var(--mc-line);margin:0 2px}
.mc-barsep{width:1px;height:40px;background:var(--mc-line);margin-left:4px}
.mc-clock{display:flex;flex-direction:column;align-items:center;margin:0 6px}
.mc-per{font-size:10px;letter-spacing:2px;color:var(--mc-txt3);text-transform:uppercase;font-weight:600}
.mc-time{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05}
.mc-score{display:flex;align-items:center;gap:12px;margin-left:auto}
.mc-tm{display:flex;align-items:center;gap:10px}
.mc-tm.mc-away{flex-direction:row-reverse}
.mc-nm{font-size:13px;color:var(--mc-txt2);font-weight:500}
.mc-pts{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.mc-fl{font-size:11px;color:var(--mc-txt3);font-weight:600;border:1px solid var(--mc-line);border-radius:6px;padding:2px 7px}
.mc-dash{color:var(--mc-txt3);font-size:22px}
.mc-appbar .mc-sel.mud-input-control{max-width:170px}
.mc-sel { border-radius:3px; background-color: #EEEEEE; color: #424242; }
.mc-sel .mud-input > .mud-input-slot { padding-left: 6px!important; padding-top: 6px!important; padding-bottom: 6px!important; }

/* ---------- top fields strip ---------- */
.mc-topfields.mud-paper{background:var(--mc-surf);border:1px solid var(--mc-line);border-radius:var(--mc-r);
  padding:9px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--mc-shadow)}
.mc-tf-row{display:grid;grid-template-columns:74px 34px 100px 1fr 100px 34px 74px;gap:8px;align-items:center}
.mc-tf{height:32px;background:var(--mc-surf2);border:1px solid var(--mc-line);border-radius:var(--mc-r-sm)}
.mc-tf-arrow.mud-icon-button{height:32px;width:100%;border:1px solid var(--mc-line2);background:var(--mc-surf2);
  color:var(--mc-txt2);border-radius:var(--mc-r-sm)}
.mc-tf-arrow.mud-icon-button:hover{background:var(--mc-surf3);color:var(--mc-txt)}

/* ---------- main grid ---------- */
.mc-main{display:grid;grid-template-columns:190px 1fr 190px 320px;gap:var(--mc-g);align-items:start}
.mc-card.mud-paper{background:var(--mc-surf);border:1px solid var(--mc-line);border-radius:var(--mc-r);box-shadow:var(--mc-shadow)}
.mc-card-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--mc-line)}
.mc-t{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--mc-txt3);font-weight:700}
.mc-t.mc-t2{color:var(--mc-txt2)}

/* ---------- roster ---------- */
.mc-body{padding:6px}
.mc-to.mud-button-root{margin:2px 0 8px;height:34px;border:1px solid var(--mc-line2);color:var(--mc-txt2);
  text-transform:uppercase;font-size:12px;letter-spacing:.5px}
.mc-to.mud-button-root:hover{background:var(--mc-surf2);color:var(--mc-txt)}
.mc-rhead,.mc-pl{display:grid;grid-template-columns:26px 1fr 22px 20px;align-items:center;gap:8px;padding:0 8px}
.mc-rhead{height:24px}
.mc-rhead span{font-size:10px;color:var(--mc-txt3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.mc-rhead .mc-r{text-align:center}
.mc-pl{height:36px;border-radius:6px;cursor:pointer;transition:background .12s}
.mc-pl:hover{background:var(--mc-surf2)}
.mc-num{width:26px;height:24px;border-radius:6px;background:var(--mc-surf3);color:var(--mc-txt2);font-size:12px;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.mc-pl.mc-on .mc-num{background:var(--mc-emph);color:var(--mc-emph-ink)}
.mc-pn{font-size:13px;color:var(--mc-txt);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-pl.mc-off .mc-pn{color:var(--mc-txt3)}
.mc-st{font-size:12px;text-align:center;color:var(--mc-txt2);font-variant-numeric:tabular-nums}
.mc-st.mc-f{color:var(--mc-txt3)}

/* ---------- center ---------- */
.mc-center{display:flex;flex-direction:column;gap:var(--mc-g)}
.mc-panel .mc-body,.mc-panel{padding:16px}
.mc-grid{display:grid;gap:var(--mc-g)}
.mc-row-2{grid-template-columns:1fr 1fr}.mc-row-3{grid-template-columns:1fr 1fr 1fr}
.mc-row-4{grid-template-columns:repeat(4,1fr)}.mc-row-5{grid-template-columns:repeat(5,1fr)}
.mc-grid+.mc-grid{margin-top:var(--mc-g)}
.mc-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--mc-txt3);font-weight:700;margin:14px 2px 8px}

/* кнопки: базовый вид поверх MudButton */
.mc-btn.mud-button-root{width:100%;height:var(--mc-bh);border-radius:var(--mc-r-sm);font-size:13px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;min-width:0}
.mc-filled.mud-button-root{background:var(--mc-surf3);color:var(--mc-txt);box-shadow:var(--mc-shadow)}
.mc-filled.mud-button-root:hover{background:var(--mc-line2)}
.mc-tonal.mud-button-root{background:var(--mc-surf2);color:var(--mc-txt2);box-shadow:none}
.mc-tonal.mud-button-root:hover{background:var(--mc-surf3);color:var(--mc-txt)}
.mc-outlined.mud-button-root{background:transparent;color:var(--mc-txt);border:1px solid var(--mc-line2);box-shadow:none}
.mc-outlined.mud-button-root:hover{background:var(--mc-surf2)}
.mc-emph.mud-button-root{background:var(--mc-emph);color:var(--mc-emph-ink);box-shadow:var(--mc-shadow)}

.mc-start-row{display:grid;grid-template-columns:var(--mc-bh-lg) 1fr var(--mc-bh-lg);gap:var(--mc-g)}
.mc-start.mud-button-root{height:var(--mc-bh-lg);font-size:15px}
.mc-swap.mud-icon-button{height:var(--mc-bh-lg);width:100%;border-radius:var(--mc-r-sm);background:var(--mc-surf2);
  color:var(--mc-txt2);border:1px solid var(--mc-line)}
.mc-swap.mud-icon-button:hover{background:var(--mc-surf3);color:var(--mc-txt)}
.mc-icobtn.mud-icon-button{width:100%;height:var(--mc-bh);border:1px solid var(--mc-line2);background:var(--mc-surf2);
  color:var(--mc-txt2);border-radius:var(--mc-r-sm)}
.mc-icobtn.mud-icon-button:hover{background:var(--mc-surf3);color:var(--mc-txt)}

/* площадка (квадрат) */
.mc-court{background:var(--mc-surf2);border:1px solid var(--mc-line);border-radius:var(--mc-r);padding:10px;margin-top:var(--mc-g)}
.mc-court svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto}
.mc-court .mc-cl{stroke:var(--mc-txt3);stroke-width:2;fill:none}
.mc-court .mc-cf{fill:var(--mc-surf3)}

/* ---------- журнал ---------- */
.mc-logtop{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--mc-line)}
.mc-logtop .mud-input-control{flex:1}
.mc-addbtn.mud-icon-button{width:34px;height:34px;border:1px solid var(--mc-line2);background:var(--mc-surf2);
  color:var(--mc-txt2);border-radius:var(--mc-r-sm)}
.mc-addbtn.mud-icon-button:hover{background:var(--mc-surf3);color:var(--mc-txt)}
.mc-logbody{padding:0;max-height:640px;overflow-y:auto}
.mc-ev{display:grid;grid-template-columns:52px 26px 1fr;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--mc-line);font-size:13px}
.mc-ev:hover{background:var(--mc-surf2)}
.mc-ev.mc-head{background:var(--mc-surf2)}
.mc-ev .mc-tm{color:var(--mc-txt3);font-size:12px;font-variant-numeric:tabular-nums;font-weight:600}
.mc-ev .mc-who{width:24px;height:22px;border-radius:5px;background:var(--mc-surf3);color:var(--mc-txt2);font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.mc-ev.mc-head .mc-who{background:transparent}
.mc-ev .mc-txt{color:var(--mc-txt);font-weight:500}
.mc-ev.mc-sub .mc-txt{color:var(--mc-txt2);font-weight:400;padding-left:6px}
.mc-ev.mc-head .mc-txt{color:var(--mc-txt3);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}
.mc-ev .mc-txt small{color:var(--mc-txt3);font-weight:500}

/* ---------- нижняя панель ---------- */
.mc-bottom.mud-paper{display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;gap:var(--mc-g);align-items:center;
  background:var(--mc-surf);border:1px solid var(--mc-line);border-radius:var(--mc-r);padding:10px 12px;box-shadow:var(--mc-shadow)}
.mc-bottom .mc-btn.mud-button-root{height:42px}
.mc-stepper{display:flex;align-items:center;gap:6px;justify-content:center}
.mc-sq.mud-icon-button{width:42px;height:42px;border-radius:var(--mc-r-sm);border:1px solid var(--mc-line2);
  background:var(--mc-surf2);color:var(--mc-txt)}
.mc-sq.mud-icon-button:hover{background:var(--mc-surf3)}
.mc-val{min-width:46px;height:42px;border-radius:var(--mc-r-sm);background:var(--mc-surf3);color:var(--mc-txt);
  font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.mc-footer{display:flex;align-items:center;justify-content:space-between;color:var(--mc-txt3);font-size:12px;padding:2px 6px}