/* Giao diện chính dùng MudBlazor; tệp này chỉ chứa phần riêng của ứng dụng:
   bàn cờ SVG, danh sách nước đi, bảng chéo, biên bản in, form đăng nhập tĩnh. */

.brand { font-size: 1.15rem; font-weight: 600; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin-right: 6px;
    background: #f8e7c4; color: #b71c1c; border: 2px solid #b71c1c; font-weight: 700;
}
.text-none { text-transform: none !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.d-inline { display: inline; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.pre { white-space: pre-wrap; }
.red-text { color: var(--mud-palette-secondary); font-weight: 600; }

/* ---- Bố cục trang ván cờ ---- */
.board-wrap { max-width: 560px; margin: 0 auto; width: 100%; }

/* ---- Bàn cờ SVG ---- */
.xq-board { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.xq-wood { fill: #e9c58a; }
.xq-frame { fill: none; stroke: #5b3a1a; stroke-width: 5; }
.xq-line { stroke: #5b3a1a; stroke-width: 2; }
.xq-river { font-size: 46px; fill: #5b3a1a; text-anchor: middle; letter-spacing: 12px; font-family: "Noto Serif SC", serif; }
.xq-last { fill: none; stroke: #1565c0; stroke-width: 4; stroke-dasharray: 18 10; }
.xq-face { fill: #f8e7c4; stroke: #b9853f; stroke-width: 4; }
.xq-ring { fill: none; stroke-width: 3; }
.xq-piece.red .xq-ring { stroke: #b71c1c; }
.xq-piece.black .xq-ring { stroke: #212121; }
.xq-char { font-size: 44px; font-weight: 700; text-anchor: middle; font-family: "Noto Serif SC", "SimSun", serif; }
.xq-piece.red .xq-char { fill: #b71c1c; }
.xq-piece.black .xq-char { fill: #212121; }
.xq-board.clickable { cursor: pointer; user-select: none; }
.xq-hit { fill: transparent; }
.xq-hint { fill: #2e7d32; opacity: .75; pointer-events: none; }
.xq-hint-capture { fill: none; stroke: #2e7d32; stroke-width: 6; pointer-events: none; }
.xq-piece.selected .xq-face { stroke: #2e7d32; stroke-width: 8; }
.xq-piece.check .xq-face { stroke: #e53935; stroke-width: 8; }

/* ---- Danh sách nước đi ---- */
.moves { max-height: 460px; overflow-y: auto; font-family: ui-monospace, Consolas, monospace; }
.move-row { display: grid; grid-template-columns: 40px 1fr 1fr; gap: 4px; }
.move-row .no { color: var(--mud-palette-text-secondary); text-align: right; padding: 2px 4px; }
.mv { padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.mv:hover { background: var(--mud-palette-action-default-hover); }
.mv.red { color: var(--mud-palette-secondary); }
.mv.cur { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); font-weight: 700; }
.moves .empty { color: var(--mud-palette-text-secondary); padding: 8px; }

/* ---- Đồng hồ ---- */
.clock-bar { border: 2px solid transparent; }
.clock-bar.active { border-color: var(--mud-palette-warning); }
.clock-bar.low { border-color: var(--mud-palette-error); }
.clock-time { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- Xếp thế cờ ---- */
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 6px 0; }
.pal {
    display: flex; flex-direction: column; align-items: center; padding: 4px 0; line-height: 1.1;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-surface);
    cursor: pointer; color: inherit; font: inherit;
}
.pal.on { outline: 3px solid var(--mud-palette-warning); }
.pal .pc { font-size: 1.4rem; font-weight: 700; }
.pal.red .pc { color: #b71c1c; }
.pal small { font-size: .7rem; color: var(--mud-palette-text-secondary); }
.pal small.over { color: var(--mud-palette-error); font-weight: 700; }
.source-image { width: 100%; border-radius: 10px; }

/* ---- Giải đấu ---- */
tr.withdrawn td { color: var(--mud-palette-text-disabled); text-decoration: line-through; }
tr.withdrawn td:first-child { text-decoration: none; }
.cross-cell { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 2px 1px; vertical-align: middle; }
.dot.r { background: #c62828; }
.dot.b { background: #212121; border: 1px solid #888; }
.result-cell { min-width: 150px; }

/* ---- Đăng nhập (trang tĩnh, không dùng ô nhập của MudBlazor) ---- */
.auth-card { max-width: 420px; margin: 32px auto; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.ssr-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--mud-palette-text-secondary); }
.ssr-field input {
    font: inherit; font-size: 1rem; padding: 10px 12px; border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
}
.ssr-field input:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }

/* ---- Biên bản in (giấy trắng, chữ đen) ---- */
.print-area { display: none; }
.sheet { font-size: 11px; color: #000; background: #fff; page-break-after: always; font-family: Roboto, Arial, sans-serif; }
.sheet:last-child { page-break-after: auto; }
.sheet h2 { margin: 0; font-size: 16px; }
.sheet .muted { color: #555; }
.sheet .small { font-size: 10px; }
.sheet .center { text-align: center; }
.sheet .red { color: #b71c1c; }
.sheet-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
.sheet-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.sheet-table th, .sheet-table td { border: 1px solid #000; padding: 2px 5px; text-align: left; }
.sheet-table th { background: #eee; font-weight: 600; }
.sheet-table small { color: #555; font-weight: 400; }
.sheet-table .no { width: 28px; text-align: center; background: #f5f5f5; }
.sheet-moves { display: flex; gap: 10px; }
.sheet-moves .moves-table td { height: 17px; font-family: ui-monospace, Consolas, monospace; }
.sheet-fen { border: 1px solid #000; padding: 3px; margin-bottom: 6px; font-size: 10px; }
.sheet-result { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.sheet-result .box { border: 1px solid #000; padding: 2px 10px; }
.sheet-result .box.on { border-width: 2px; background: #ddd; font-weight: 700; }
.sheet-notes { font-size: 10px; margin-bottom: 8px; }
.sheet-sign { display: flex; gap: 20px; margin-top: 10px; }
.sheet-sign > div { flex: 1; text-align: center; }
.sheet-sign .line { border-bottom: 1px solid #000; height: 40px; }

@media print {
    @page { size: A4; margin: 12mm; }
    body, .mud-layout, .mud-main-content { background: #fff !important; color: #000 !important; }
    .mud-appbar, .mud-drawer, .mud-overlay, .mud-snackbar-provider, #blazor-error-ui, .no-print { display: none !important; }
    .mud-main-content { padding: 0 !important; margin: 0 !important; }
    .mud-container { max-width: none !important; padding: 0 !important; }
    /* Trang có biên bản riêng thì chỉ in biên bản. */
    .content:has(.print-area) > *:not(.print-area) { display: none !important; }
    .print-area { display: block; }
    .mud-paper { box-shadow: none !important; }
    .mud-table-container { overflow: visible !important; }
    .mud-simple-table table { font-size: 10px; }
}

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px;
    background: #ffecb3; color: #000; box-shadow: 0 -1px 3px rgba(0,0,0,.2); z-index: 2000;
}
#blazor-error-ui .reload { margin-left: 8px; }