/*
    "Plum Terminal" skin (see UI_REFRESH_DESIGN.md).

    Restyles MudBlazor and ApexCharts without changing layout: flat surfaces separated by 1px lines
    instead of shadows, 6px corners, Inter for things you read, JetBrains Mono for things the system
    tells you (labels, metadata, controls, numbers).

    Must load AFTER MudBlazor.min.css so same-specificity rules here win. The design tokens (--mt-*,
    --font-*) are defined at the top of app.css; the palette itself comes from ThemeService.
*/

/* ------------------------------------------------------------------ base */

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--mt-primary-text);
}

    a:hover {
        color: var(--mt-primary-text-hover);
    }

/* #776BE7 is fine as a fill but too dark to read as text on these surfaces, so anything MudBlazor
   colors as "primary text" (links, icons, icon buttons) uses the lighter text tint instead. */
.mud-primary-text {
    color: var(--mt-primary-text) !important;
}

.mud-typography-caption,
.mud-typography-overline {
    color: var(--mt-text-dim);
}

/* ------------------------------------------------------------------ surfaces */

.mud-paper,
.mud-table,
.mud-expand-panel {
    border: 1px solid var(--mt-line);
}

    /* A flat (Elevation="0") paper nested in another paper is a layout wrapper, so it stays invisible.
       Nested papers that used to stand out with a shadow keep the outline instead. */
    .mud-paper .mud-paper.mud-elevation-0:not(.mud-paper-outlined),
    .mud-paper[style*="background: transparent"],
    .mud-paper[style*="background-color: transparent"] {
        border-color: transparent;
    }

/* a table that already sits inside a card does not need a second outline */
.mud-paper .mud-table {
    border: 0;
}

.mud-expand-panel:not(.mud-panel-expanded) + .mud-expand-panel:not(.mud-panel-expanded) {
    margin-top: -1px;
}

.mud-card-header.mud-card-header-padding {
    padding: 16px 16px 8px;
}

.mud-card-header:only-child.mud-card-header-padding {
    padding-bottom: 16px;
}

/* card title: Inter 15/600 in full text color, its leading icon picks up the accent */
.mud-card-header .mud-typography-h6 {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--mt-text);
}

    .mud-card-header .mud-typography-h6 > .mud-icon-root:first-child,
    .mud-card-header .mud-typography-h6 > div > .mud-icon-root:first-child {
        color: var(--mt-accent);
        font-size: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
    }

/* A list inside a card (the stat lists on the profile, deck, game and stats cards) uses the card's own
   padding as its gutter, so its rows line up with the card title and the dividers between them.
   Scoped to cards on purpose: the same class pads the options of every select and autocomplete dropdown,
   and those must keep it. Clickable rows keep theirs too, so a hover highlight never hugs the text. */
.mud-card .mud-list-item-gutters:not(.mud-list-item-clickable) {
    padding-left: 0;
    padding-right: 0;
}

.mud-divider {
    border-color: var(--mt-line);
}

/* ------------------------------------------------------------------ app bar + drawer */

.mud-appbar {
    border-bottom: 1px solid var(--mt-line);
}

.mud-drawer {
    border-right: 1px solid var(--mt-line);
}

.mt-nav.mud-navmenu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 12px 24px;
}

.mt-nav .mud-nav-link {
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--mud-default-borderradius);
    font-size: .875rem;
    line-height: 1.3;
    color: var(--mt-text-body2);
}

    .mt-nav .mud-nav-link .mud-nav-link-icon {
        font-size: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
    }

        .mt-nav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
            color: var(--mt-text-faint);
        }

    .mt-nav .mud-nav-link .mud-nav-link-text {
        margin-left: 10px;
        margin-inline-start: 10px;
        font-weight: inherit;
    }

    .mt-nav .mud-nav-link:hover:not(.mud-nav-link-disabled),
    .mt-nav .mud-nav-link:focus-visible:not(.mud-nav-link-disabled) {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--mt-text);
    }

.mt-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mt-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled),
.mt-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible:not(.mud-nav-link-disabled) {
    background-color: var(--mt-primary-soft);
    color: #fff;
    font-weight: 600 !important;
}

    .mt-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
        color: var(--mt-primary-text);
    }

.mt-nav .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link {
    padding-left: 38px;
    padding-inline-start: 38px;
}

/* "// library" style section labels */
.mt-nav-section {
    padding: 16px 10px 6px;
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--mt-text-faint);
    text-transform: lowercase;
    user-select: none;
}

/* ------------------------------------------------------------------ buttons */

.mud-button-root.mud-button {
    min-height: 36px;
    padding: 0 12px;
    box-shadow: none;
}

    .mud-button-root.mud-button[class*="-size-small"] {
        min-height: 30px;
        padding: 0 10px;
        font-size: .75rem;
    }

    .mud-button-root.mud-button[class*="-size-large"] {
        min-height: 48px;
        padding: 0 16px;
        font-size: .9375rem;
    }

/* some buttons wrap their label in a MudText, which would otherwise bring body type back */
.mud-button-root.mud-button .mud-typography {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.mud-button-outlined {
    border-color: var(--mt-line-strong);
}

    .mud-button-outlined.mud-button-outlined-primary {
        color: var(--mt-primary-text);
        border-color: var(--mt-primary-outline);
    }

.mud-button-text.mud-button-text-primary {
    color: var(--mt-primary-text);
}

.mud-button-filled.mud-button-filled-primary {
    color: #fff;
}

.mud-button-root .mud-button-icon-start.mud-button-icon-size-medium > .mud-icon-root,
.mud-button-root .mud-button-icon-end.mud-button-icon-size-medium > .mud-icon-root {
    font-size: 1.125rem;
}

.mud-icon-button {
    border-radius: var(--mud-default-borderradius);
}

/* segmented control: a button group whose unselected segments recede */
.mud-button-group-root .mud-button-outlined.mud-button-outlined-primary {
    color: var(--mt-text-dim);
    border-color: var(--mt-line-strong);
}

.mud-toggle-group {
    border: 1px solid var(--mt-line-strong);
}

/* ------------------------------------------------------------------ chips, badges, tabs */

.mud-chip {
    font-family: var(--font-mono);
    letter-spacing: 0;
}

    .mud-chip.mud-chip-size-small {
        border-radius: 4px;
        font-size: .6875rem;
    }

    .mud-chip.mud-chip-size-medium {
        border-radius: 4px;
        font-size: .75rem;
        height: 28px;
    }

    .mud-chip.mud-chip-size-large {
        border-radius: var(--mud-default-borderradius);
        font-size: .8125rem;
    }

.mud-badge {
    font-family: var(--font-mono);
    font-size: .625rem;
    height: 16px;
    min-width: 16px;
    padding: 0 4px;
    line-height: 16px;
    border-radius: 8px;
}

.mud-tab {
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--mt-text-dim);
}

    .mud-tab.mud-tab-active {
        color: var(--mt-primary-text);
    }

.mud-tab-slider {
    background: var(--mt-accent);
}

/* ------------------------------------------------------------------ tables */

.mud-table-root .mud-table-head .mud-table-cell {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--mt-text-faint);
    border-bottom: 1px solid var(--mt-line);
}

.mud-table-toolbar + .mud-table-container .mud-table-root .mud-table-head .mud-table-cell {
    border-top: 1px solid var(--mt-line);
}

/* the sorted column reads in full text color */
.mud-table-sort-label:has(.mud-direction-asc, .mud-direction-desc) {
    color: var(--mt-text);
}

.mud-table-sort-label .mud-table-sort-label-icon {
    font-size: 14px;
}

.mud-table-root .mud-table-body .mud-table-cell {
    font-variant-numeric: tabular-nums;
}

    /* Numbers and dates in tables are set in mono. MudTd writes its DataLabel to data-label, so the
       numeric columns are picked out by label here; a column that is not listed simply stays in Inter. */
    .mud-table-root .mud-table-body .mud-table-cell.mt-num,
    .mud-table-root .mud-table-body .mud-table-cell:is(
        [data-label="Rank"], [data-label="Date"], [data-label="Created"], [data-label="Start"], [data-label="End"], [data-label="Last Played"],
        [data-label="Games"], [data-label="Games Played"], [data-label="Total Games"], [data-label="TotalGames"],
        [data-label="Wins"], [data-label="Total Wins"], [data-label="Losses"], [data-label="Draws"], [data-label="Record"],
        [data-label="Win %"], [data-label="WinPercentage"], [data-label="Turns"], [data-label="Length"], [data-label="Mulligans"],
        [data-label="Avg Hand Size"], [data-label="Avg Win Turn"], [data-label="Fastest Win"], [data-label="Appearances"], [data-label="Server ID"]) {
        font-family: var(--font-mono);
        font-size: .875rem;
        letter-spacing: 0;
    }

        .mud-table-root .mud-table-body .mud-table-cell:is([data-label="Date"], [data-label="Created"], [data-label="Start"], [data-label="End"], [data-label="Last Played"]) {
            font-size: .8125rem;
            color: var(--mt-text-dim);
        }

.mud-table-pagination,
.mud-table-pagination .mud-table-pagination-caption,
.mud-table-pagination .mud-select .mud-input {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--mt-text-dim);
}

.mud-table-pagination-toolbar {
    border-top-color: var(--mt-line);
}

    .mud-table-pagination-toolbar .mud-table-pagination-actions .mud-icon-button {
        width: 32px;
        height: 32px;
        padding: 0;
        margin-left: 6px;
        border: 1px solid var(--mt-line-strong);
    }

/* ------------------------------------------------------------------ overlays: popovers, tooltips, dialogs */

.mud-popover.mud-paper {
    background-color: var(--mt-raised);
    border-color: var(--mt-line-strong);
}

.mud-tooltip,
.mud-tooltip.mud-tooltip-default {
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mt-text);
    background-color: var(--mt-raised);
    border: 1px solid var(--mt-line-strong);
}

.mud-dialog {
    border: 1px solid var(--mt-line-strong);
    box-shadow: none;
}

/* a full-screen dialog (life tracker, flashback) holds a 100vw x 100vh panel: an edge line there would make it
   2px too big for its own dialog and bring scrollbars */
.mud-dialog.mud-dialog-fullscreen {
    border: 0;
}

.mud-snackbar {
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: .8125rem;
}

.mud-list-item,
.mud-menu-item {
    font-size: .875rem;
}

/* ------------------------------------------------------------------ ApexCharts chrome (series colors stay with the user's chart theme) */

.apexcharts-canvas .apexcharts-tooltip,
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark,
.apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
    color: var(--mt-text);
    background: var(--mt-raised);
    border: 1px solid var(--mt-line-strong);
    border-radius: var(--mud-default-borderradius);
    box-shadow: none;
    font-family: var(--font-mono);
    font-size: 12px;
}

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
        margin-bottom: 0;
        padding: 6px 10px 2px;
        color: var(--mt-text-dim);
        background: transparent;
        border-bottom: 0;
        font-family: var(--font-mono) !important;
        font-size: 12px !important;
    }

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-series-group {
        padding: 2px 10px 4px;
    }

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-text {
        font-family: var(--font-mono) !important;
        font-size: 12px !important;
    }

.apexcharts-canvas .apexcharts-xaxistooltip,
.apexcharts-canvas .apexcharts-yaxistooltip {
    color: var(--mt-text);
    background: var(--mt-raised);
    border: 1px solid var(--mt-line-strong);
    border-radius: 4px;
    box-shadow: none;
    font-family: var(--font-mono);
}

    .apexcharts-canvas .apexcharts-xaxistooltip::before,
    .apexcharts-canvas .apexcharts-xaxistooltip::after,
    .apexcharts-canvas .apexcharts-yaxistooltip::before,
    .apexcharts-canvas .apexcharts-yaxistooltip::after {
        display: none;
    }

/* a tooltip built in JS (ChartHelper.WithColorSliceTooltip) */
.apexcharts-canvas .apexcharts-tooltip .mt-chart-tip {
    padding: 6px 10px;
    line-height: 1.6;
    white-space: nowrap;
}

/* ChartHelper.WithSliceTooltip: the tooltip takes the slice's color and picks its ink to suit */
.apexcharts-canvas .apexcharts-tooltip .mt-chart-tip-fill b {
    font-weight: 700;
}

.apexcharts-canvas .apexcharts-tooltip .mt-ink-dark {
    color: var(--mt-ink);
}

.apexcharts-canvas .apexcharts-tooltip .mt-ink-light {
    color: #fff;
}

.apexcharts-canvas .apexcharts-tooltip .mt-chart-tip-title {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mt-text-dim);
}

/* the Blazor-templated tooltips (ApexPointTooltip) are built from MudText */
.apexcharts-canvas .apexcharts-tooltip .mud-typography {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
}

.apexcharts-canvas .apexcharts-legend-text {
    font-family: var(--font-mono) !important;
    color: var(--mt-text-dim) !important;
}

/* pie/donut slices are separated by a gap in the card color, and point markers get a ring of it */
.apexcharts-canvas .apexcharts-pie-area {
    stroke: var(--mt-card);
    stroke-width: 2px;
}

.apexcharts-canvas .apexcharts-marker {
    stroke: var(--mt-card);
}

.apexcharts-canvas .apexcharts-toolbar .apexcharts-menu-icon svg,
.apexcharts-canvas .apexcharts-toolbar .apexcharts-zoom-icon svg,
.apexcharts-canvas .apexcharts-toolbar .apexcharts-zoomin-icon svg,
.apexcharts-canvas .apexcharts-toolbar .apexcharts-zoomout-icon svg,
.apexcharts-canvas .apexcharts-toolbar .apexcharts-reset-icon svg,
.apexcharts-canvas .apexcharts-toolbar .apexcharts-pan-icon svg {
    fill: var(--mt-text-faint);
}

.apexcharts-canvas .apexcharts-toolbar .apexcharts-pan-icon svg {
    stroke: var(--mt-text-faint);
}

.apexcharts-canvas .apexcharts-menu {
    padding: 4px;
    color: var(--mt-text);
    background: var(--mt-raised);
    border: 1px solid var(--mt-line-strong);
    border-radius: var(--mud-default-borderradius);
    font-family: var(--font-mono);
    font-size: 12px;
}

    .apexcharts-canvas .apexcharts-menu .apexcharts-menu-item {
        border-radius: 4px;
    }

        .apexcharts-canvas .apexcharts-menu .apexcharts-menu-item:hover {
            background: rgba(255, 255, 255, 0.07);
        }