html, body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #F85149;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ─────────────────────────────────────────────
   Page content wrapper
   Centered column with consistent padding.
   Content flows naturally — one page scrollbar.
   ───────────────────────────────────────────── */
.page-content {
    --page-pad-x: 32px;
    --page-pad-y: 24px;

    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: var(--page-pad-y) var(--page-pad-x);
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .page-content {
        --page-pad-x: 16px;
        --page-pad-y: 16px;
    }
}

@media (min-width: 601px) and (max-width: 960px) {
    .page-content {
        --page-pad-x: 24px;
    }
}

/* ─────────────────────────────────────────────
   Table paper wrapper
   ───────────────────────────────────────────── */
.table-paper {
    overflow: clip;
    border-radius: var(--mud-default-borderradius);
}

/* ─────────────────────────────────────────────
   Compare table — full-width, no scroll
   ───────────────────────────────────────────── */
.compare-table {
    table-layout: fixed;
    width: 100%;
}

/* ─────────────────────────────────────────────
   Table header
   ───────────────────────────────────────────── */
.draft-th {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

/* ---- Skeleton → Content fade-in ---- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.25s ease-out;
}

/* ---- Drag Handle ---- */
.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    user-select: none;
    touch-action: none;
    color: var(--mud-palette-text-secondary);
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.drag-handle:hover {
    opacity: 1;
}

/* Row highlight during drag */
tr.drag-over-highlight > td {
    background-color: rgba(88, 166, 255, 0.06) !important;
}

/* Grabbing cursor while actively dragging */
body.is-dragging,
body.is-dragging * {
    cursor: grabbing !important;
}

/* ---- Touch Drag Ghost ---- */
.touch-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--mud-palette-surface, #1e1e2e);
    color: var(--mud-palette-text-primary, #c9d1d9);
    font-size: 0.875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0.92;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: scale(1.04);
}

/* ── MudDataGrid: centered column headers ── */
.mud-datagrid .mud-table-head .mud-table-cell {
    text-align: center !important;
}

/* ─────────────────────────────────────────────
   Back button: icon-only hidden on desktop
   ───────────────────────────────────────────── */
.back-btn-icon {
    display: none !important;
}

/* ─────────────────────────────────────────────
   Draft board — table-layout: fixed forces
   <colgroup> widths to be respected exactly.
   The scroll wrapper sits outside MudPaper so
   overflow: clip on .table-paper cannot block it.
   ───────────────────────────────────────────── */
#draft-board {
    table-layout: fixed;
    width: 100%;
}

.draft-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Player name: allow truncation inside fixed-width column */
#draft-board .player-name {
    min-width: 0;
    overflow: hidden;
}

#draft-board .player-name .mud-typography-body2,
#draft-board .player-name .mud-typography-caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────
   Phone  (≤ 600px)  — mobile overrides
   ───────────────────────────────────────────── */
@media (max-width: 600px) {

    .back-btn-full {
        display: none !important;
    }

    .back-btn-icon {
        display: inline-flex !important;
    }

    .col-date {
        display: none !important;
    }

    /* ── Compare table — compress to fit ── */
    .compare-table .mud-table-cell,
    .compare-table .draft-th {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 0.7rem !important;
    }

    .compare-table .compare-college {
        display: none !important;
    }

    .compare-table .compare-firstname {
        display: none !important;
    }
}