/* MinneMUDAC — shared styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface2: #334155;
    --border: #475569;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --accent: #3b82f6;
    --radius: 10px;
    --available-bg: #64748b;
    --available-text: #f1f5f9;
    --tile-gap: 28px;
}

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.flex { display:flex; } .flex-col { flex-direction:column; } .flex-1 { flex:1; min-height:0; }
.items-center { align-items:center; } .justify-between { justify-content:space-between; }
.overflow-y { overflow-y:auto; } .w-full { width:100%; }
.text-sm { font-size:.85rem; } .text-xs { font-size:.75rem; }
.bold { font-weight:700; } .text-muted { color:var(--text-muted); }
.rounded { border-radius:var(--radius); } .text-center { text-align:center; }

/* ── Topbar ──────────────────────────────────────── */
.topbar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px 14px; display: flex; align-items: center;
    justify-content: space-between; flex-shrink: 0; gap: 8px; flex-wrap: wrap;
}
.topbar h1 { font-size: 1rem; font-weight: 700; white-space: nowrap; }

/* ── Status dot ─────────────────────────────────── */
.status-dot { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;background:#64748b; }
.status-dot.ok { background:#22c55e; } .status-dot.err { background:#ef4444; }

/* ── Table tile ─────────────────────────────────── */
.tile {
    border-radius: var(--radius); padding: 18px 12px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px; cursor: pointer;
    transition: filter .15s, opacity .15s; border: 2px solid transparent;
    min-height: 100px; text-align: center; font-weight: 700;
    position: relative; overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.tile:active { filter:brightness(1.2); }
.tile .tile-num   { font-size:1.6rem; line-height:1; }
.tile .tile-team  { font-size:.72rem; font-weight:400; opacity:.9; }
.tile .tile-timer { font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.tile.selected    { border-color:#fff !important; box-shadow:0 0 0 3px rgba(255,255,255,.35),0 3px 10px rgba(0,0,0,.35); }
.tile.grayed      { opacity:.28; pointer-events:none; box-shadow:none; }
.tile.inactive    { opacity:.18; pointer-events:none; box-shadow:none; }
.tile.available   { background:var(--available-bg); color:var(--available-text); }
.tile.break       { background:#374151; color:#9ca3af; box-shadow:0 2px 6px rgba(0,0,0,.2); }

/* ── Blink ───────────────────────────────────────── */
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.2;} }
.blinking { animation:blink .7s step-end infinite; }

/* ── Table grid ──────────────────────────────────── */
.table-grid { display:grid; gap:var(--tile-gap); padding:20px; align-content:start; }
.cols-1 { grid-template-columns:1fr; }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
.cols-5 { grid-template-columns:repeat(5,1fr); }
@media(max-width:480px) { .cols-4,.cols-5{grid-template-columns:repeat(3,1fr);} :root{--tile-gap:14px;} }

/* ── Team list item ──────────────────────────────── */
.team-item {
    display:flex; align-items:center; gap:8px;
    padding:9px 10px; border-radius:var(--radius);
    cursor:pointer; background:var(--surface);
    border:2px solid transparent; transition:background .1s;
}
.team-item:active { background:var(--surface2); }
.team-item.selected { border-color:var(--accent); background:#1e3a5f; }
.team-item.pitching-now { border-color:#64748b; opacity:.5; pointer-events:none; }
.team-item .team-num { font-size:1.05rem; font-weight:700; }
.team-item .pitch-count { font-size:.78rem; background:var(--surface2); border-radius:12px; padding:2px 8px; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── Team pace colors ────────────────────────────── */
/* Applied based on pace relative to round goal */
.team-item.pace-green  .team-num { color: #4ade80; }
.team-item.pace-yellow .team-num { color: #facc15; }
.team-item.pace-red    .team-num { color: #f87171; }
/* Neutral = not started yet or no goal set → default white */

/* Director team rows */
.dir-team-row.pace-green  .tn { color: #4ade80; }
.dir-team-row.pace-yellow .tn { color: #facc15; }
.dir-team-row.pace-red    .tn { color: #f87171; }

/* ── Action buttons ──────────────────────────────── */
.action-bar { display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px;background:var(--surface);border-top:1px solid var(--border);flex-shrink:0; }
.action-btn { flex:1;min-width:80px;max-width:150px;padding:13px 8px;border-radius:var(--radius);border:none;font-size:.9rem;font-weight:700;cursor:pointer;transition:filter .15s;color:#fff; }
.action-btn:disabled { opacity:.35;pointer-events:none; } .action-btn:active { filter:brightness(1.2); }
.btn-confirming { background:#06b6d4;color:#000; }
.btn-available  { background:#22c55e;color:#000; }
.btn-break      { background:#6b7280; }
.btn-conflict   { background:#ef4444; }
.btn-send-back  { background:#f97316;color:#000; }  /* orange — conflict with memory */

/* ── Toast ───────────────────────────────────────── */
#toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#1e293b;border:1px solid var(--border);color:var(--text);padding:10px 20px;border-radius:20px;font-size:.9rem;opacity:0;transition:opacity .3s;pointer-events:none;z-index:100;white-space:nowrap; }
#toast.show { opacity:1; }

/* ── Section label ───────────────────────────────── */
.section-label { font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding:6px 12px 2px;flex-shrink:0; }

/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }

/* ── Admin forms ──────────────────────────────────── */
.form-group { display:flex;flex-direction:column;gap:6px; }
.form-group label { font-size:.85rem;color:var(--text-muted); }
input[type=text],input[type=number],input[type=password],input[type=color],select,textarea { background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-size:.95rem;width:100%; }
input[type=color] { padding:2px 4px;height:36px;cursor:pointer; }
button.submit-btn { background:var(--accent);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius);font-size:.95rem;font-weight:700;cursor:pointer; }
button.submit-btn:hover { filter:brightness(1.15); }
button.danger-btn { background:#ef4444;color:#fff;border:none;padding:8px 16px;border-radius:var(--radius);font-size:.85rem;cursor:pointer; }

/* ── Connection + round timer ─────────────────────── */
#conn-status { font-size:.7rem;display:flex;align-items:center;gap:4px;flex-shrink:0; }
.round-clock { font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap; }
.round-clock.running { color:#a5f3fc; }
.round-clock.ended   { color:#fca5a5; }

/* ── Override panel ───────────────────────────────── */
.override-panel {
    background:#1a2744;border-bottom:1px solid var(--border);
    padding:8px 14px;display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;font-size:.82rem;flex-shrink:0;
}
.override-panel input[type=number] { width:70px;padding:4px 8px;font-size:.82rem; }
.override-panel button { padding:4px 12px;border-radius:var(--radius);border:none;font-size:.8rem;font-weight:700;cursor:pointer; }
.btn-ov-apply { background:var(--accent);color:#fff; }
.btn-ov-reset { background:#4b5563;color:#fff; }
.btn-ov-toggle { background:transparent;border:1px solid var(--border) !important;color:var(--text-muted);font-size:.72rem;padding:3px 8px; }

/* ── Overtime timer ───────────────────────────────── */
.tile-timer.overtime { color:#fca5a5; }