/* mui-dmscreen.css -- base styling for the Material UI layer.
 *
 * The migration replaced every Semantic UI React component with MUI. MUI components style
 * themselves (their .Mui*-root slots), so this file only covers two things props cannot reach:
 *   1. the plain <div> layout classes we introduced in place of Segment/Grid/Form/Menu/Statistic/...
 *   2. a few density/text overrides on MUI's internal slot classes to match Semantic's tighter look.
 *
 * Game-system colour and border accents live in mui-dnd5e.css / mui-coc.css / mui-lcars.css.
 * The old sui-*.css bundles stay loaded because they still define custom, non-mui classes
 * (lcars-text-bar, radarCard, characterCard, ...).
 */

/* ---- font parity: MUI ships Roboto; the rest of the app is Lato --------------------------- */
/* auth.css sets `body { font-family: 'Lato' }`, but MUI's emotion styles hard-set Roboto on
 * every component slot and win by source order, so MUI widgets rendered in a different (wrong)
 * face than everything around them. Force the Semantic font stack on the text slots.
 * !important is needed because emotion injects its <style> after this <link>.
 * Icon slots are intentionally excluded -- `.material-icons` carries its own icon font. */
.MuiTypography-root,
.MuiButtonBase-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiInputBase-input,
.MuiFormLabel-root,
.MuiFormControlLabel-root,
.MuiFormHelperText-root,
.MuiSelect-select,
.MuiMenuItem-root,
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiTableCell-root,
.MuiTab-root,
.MuiChip-label,
.MuiTooltip-tooltip,
.MuiAlert-root,
.MuiDialogTitle-root,
.MuiDialogContentText-root {
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}

/* ---- MUI slot density: Semantic ran tighter than MUI's defaults --------------------------- */

.MuiButton-root {
    text-transform: none;   /* Semantic buttons are sentence-case, not UPPERCASE */
}

/* Compact all tables: MUI defaults cells to 16px padding (very tall rows). !important is needed
 * to beat MUI's emotion rule. .characterDetails tightens further on top of this. */
.MuiTableCell-root {
    padding: 4px 8px !important;
}

.MuiTableCell-head {
    font-weight: 700;
    white-space: nowrap;
}

.MuiAccordionSummary-content {
    margin: 8px 0;
}

.MuiDialog-paper {
    padding: 4px;
}

/* ---- segments (Semantic Segment / Segment.Group) ------------------------------------------ */

.mui-segment {
    position: relative;
    /* dark-shell panel: a translucent overlay reads correctly on every game shell (see tables below) */
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    box-shadow: none;
    margin: 1rem 0;
    padding: 1em;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.mui-segment-group {
    margin: 1rem 0;
    border-radius: 0.28571429rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* segments inside a group share borders instead of stacking their own */
.mui-segment-group > .mui-segment {
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.mui-segment-group > .mui-segment:first-child {
    border-top: none;
}

.mui-segment-basic {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 1em 0;
    margin: 0.5rem 0;
}

.mui-segment-compact {
    display: inline-block;
    padding: 0.6em 0.8em;
}

.mui-segment-raised {
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
}

.mui-placeholder,
.mui-segment.mui-placeholder {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    color: inherit;
    opacity: 0.75;
}

/* ---- grid (Semantic 16-column grid) ------------------------------------------------------- */

.mui-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.mui-grid-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.mui-grid-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* fixed widths out of 16, matching Semantic's SemanticWIDTHS */
.mui-grid-col-1  { flex: 0 0 6.25%;   max-width: 6.25%;   }
.mui-grid-col-2  { flex: 0 0 12.5%;   max-width: 12.5%;   }
.mui-grid-col-3  { flex: 0 0 18.75%;  max-width: 18.75%;  }
.mui-grid-col-4  { flex: 0 0 25%;     max-width: 25%;     }
.mui-grid-col-5  { flex: 0 0 31.25%;  max-width: 31.25%;  }
.mui-grid-col-6  { flex: 0 0 37.5%;   max-width: 37.5%;   }
.mui-grid-col-7  { flex: 0 0 43.75%;  max-width: 43.75%;  }
.mui-grid-col-8  { flex: 0 0 50%;     max-width: 50%;     }
.mui-grid-col-10 { flex: 0 0 62.5%;   max-width: 62.5%;   }
.mui-grid-col-12 { flex: 0 0 75%;     max-width: 75%;     }
.mui-grid-col-16 { flex: 0 0 100%;    max-width: 100%;    }

/* "doubling"/"columns(N)" grids: N equal columns that wrap */
.mui-grid-2 > .mui-grid-col,
.mui-grid-2 > * { flex: 1 1 calc(50% - 1rem); }
.mui-grid-3 > .mui-grid-col,
.mui-grid-3 > * { flex: 1 1 calc(33.333% - 1rem); }
.mui-grid-2, .mui-grid-3 { gap: 0.5rem; }

.mui-grid-divided > .mui-grid-col:not(:first-child) {
    border-left: 1px solid rgba(34, 36, 38, 0.1);
}

@media (max-width: 767px) {
    .mui-grid-col-4, .mui-grid-col-6, .mui-grid-col-8, .mui-grid-col-10, .mui-grid-col-12,
    .mui-grid-2 > *, .mui-grid-3 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- forms (Semantic Form / Form.Group / Form.Field) -------------------------------------- */

.mui-form {
    width: 100%;
}

.mui-form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
    margin-bottom: 1em;
}

.mui-form-inline {
    align-items: center;
}

.field {
    margin-bottom: 1em;
    flex: 1 1 auto;
    min-width: 0;
}

.field > label {
    display: block;
    margin-bottom: 0.28571429rem;
    font-weight: 700;
    font-size: 0.92857143em;
    color: inherit;
}

/* ---- native <select> styled like Semantic's Dropdown -------------------------------------- */

.mui-select {
    min-height: 38px;
    padding: 0.5em 2em 0.5em 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.28571429rem;
    /* dark control to match the shell; the chevron is light so it shows on the dark background */
    background-color: rgba(0, 0, 0, 0.25);
    color: inherit;
    font-size: 1em;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='rgba(255,255,255,0.6)' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1.2em;
}

/* the dropdown list itself (works in Firefox; harmless elsewhere) */
.mui-select option {
    background-color: #2a1e33;
    color: rgb(230, 222, 209);
}

/* bare native <select>/<input> (not wrapped as .mui-select) render dark in both Chrome & Firefox */
select,
input {
    color-scheme: dark;
}

.mui-select:focus {
    border-color: rgba(255, 255, 255, 0.45);
    outline: none;
}

.mui-select:disabled {
    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(230, 222, 209, 0.4);
    cursor: default;
}

/* ---- menu / tabs (Semantic Menu.tabular / vertical) --------------------------------------- */

.mui-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid rgba(34, 36, 38, 0.15);
    margin: 0 0 1rem;
}

.mui-menu-item {
    padding: 0.85em 1.14em;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.87);
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

.mui-menu-item:hover {
    color: rgba(0, 0, 0, 0.95);
    background: rgba(0, 0, 0, 0.03);
}

.mui-menu-tabular .mui-menu-item.active {
    background: #fff;
    border-color: rgba(34, 36, 38, 0.15);
    border-radius: 0.28571429rem 0.28571429rem 0 0;
    font-weight: 700;
}

.mui-menu-header {
    font-weight: 700;
    cursor: default;
}

.mui-menu-right {
    margin-left: auto;
}

/* vertical menu (the app main menu) */
.mui-menu-vertical {
    flex-direction: column;
    /* .mui-menu sets flex-wrap:wrap; a tall vertical menu (e.g. D&D with its submenu expanded)
     * must NOT wrap into a second column -- that second column lands on top of the page content
     * and drags the dice roller with it ("dice box in the middle"). Keep it a single column. */
    flex-wrap: nowrap;
    border-bottom: none;
    align-items: stretch;
}

.mui-menu-vertical .mui-menu-item {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid rgba(34, 36, 38, 0.08);
    display: block;
}

.mui-menu-vertical .mui-menu-item.active {
    background: rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.mui-menu-vertical .submenu-item {
    padding-left: 2em;
    font-size: 0.95em;
}

.mui-menu-vertical .submenu-header {
    font-weight: 700;
}

/* ---- steps (Semantic Step.Group -- the wizards) ------------------------------------------- */

.mui-step-group {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 0.28571429rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.mui-step {
    flex: 1 1 auto;
    padding: 0.85em 1.14em;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    opacity: 0.75;
}

.mui-step:last-child { border-right: none; }

.mui-step:hover { background: rgba(255, 255, 255, 0.09); }

.mui-step.active {
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    opacity: 1;
    font-weight: 700;
}

.mui-step-title { font-weight: inherit; }

/* ---- statistics (Semantic Statistic.Group) ------------------------------------------------ */

.mui-statistic-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    margin: 0.5em 0;
}

.mui-statistic {
    text-align: center;
    flex: 0 0 auto;
}

.mui-statistic-value {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: inherit;
}

.mui-statistic-label {
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(230, 222, 209, 0.6);
    margin-top: 0.2em;
}

.mui-statistic-mini .mui-statistic-value { font-size: 1.4rem; }
.mui-statistic-2 { gap: 1em; }
.mui-statistic-4 { gap: 0.8em; }

/* ---- cards (Semantic Card / Card.Group) --------------------------------------------------- */

.mui-card-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1em 0;
}

.mui-card-group-2 > * { flex: 1 1 calc(50% - 1em); }

.mui-card-header {
    font-weight: 700;
    font-size: 1.1em;
    color: inherit;
}

.mui-card-meta {
    color: rgba(230, 222, 209, 0.55);
    font-size: 0.9em;
    margin: 0.2em 0;
}

.mui-card-description {
    color: rgba(230, 222, 209, 0.8);
    margin-top: 0.4em;
}

.mui-card-extra {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 0.6em;
    margin-top: 0.6em;
}

.mui-card-fluid { width: 100%; }

/* ---- labels (Semantic Label -- small status chips) ---------------------------------------- */

.mui-label {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: 0.28571429rem;
    background: #e8e8e8;
    color: rgba(0, 0, 0, 0.75);
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.mui-label-small { font-size: 0.72em; padding: 0.25em 0.5em; }
.mui-label-big   { font-size: 1em;   padding: 0.4em 0.8em; }

.mui-label-green { background: #21ba45; color: #fff; }
.mui-label-red   { background: #db2828; color: #fff; }
.mui-label-grey  { background: #767676; color: #fff; }

.mui-subheader {
    color: rgba(230, 222, 209, 0.5);
    font-weight: 400;
    margin-left: 0.4em;
}

/* ---- loader -------------------------------------------------------------------------------- */

.mui-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

/* ---- images -------------------------------------------------------------------------------- */

.mui-image-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.mui-image-small  img, img.mui-image-small  { max-width: 150px; height: auto; }
.mui-image-medium img, img.mui-image-medium { max-width: 300px; height: auto; }
.mui-image-large  img, img.mui-image-large  { max-width: 100%;  height: auto; }

/* ---- containers & text helpers ------------------------------------------------------------ */

.mui-container {
    max-width: 1127px;
    margin-left: auto;
    margin-right: auto;
}

.mui-text-center { text-align: center; }
.mui-text-right  { text-align: right; }

/* ---- app shell (Sidebar.Pushable / Pusher) ------------------------------------------------ */

.mui-sidebar-pushable {
    display: flex;
    min-height: 100vh;
    position: relative;
}

.mui-sidebar-pusher {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
}

/* The sidebar is `position: fixed; width: 220px` (sidebar-responsive.css), so it is out of
 * the flex flow and overlaps the left of the pusher. Offset the content past it on desktop.
 * On mobile the sidebar is off-canvas, so no offset (see sidebar-responsive.css media query). */
@media (min-width: 768px) {
    .mui-sidebar-pusher {
        margin-left: 220px;
    }
}

/* ---- responsive show/hide (Semantic "computer only" / "mobile only") ---------------------- */

@media (max-width: 767px) {
    .mui-computer-only { display: none !important; }
}

@media (min-width: 768px) {
    .mui-mobile-only { display: none !important; }
}

/* ============================================================================================
 * DARK-SHELL CORRECTIONS
 * Every game system renders a dark shell (default purple, D&D purple, CoC brown, LCARS near-black)
 * with light content panels floating on it -- the look Semantic produced before the MUI migration.
 * The .mui-* classes and MUI slots above default to Semantic's LIGHT look (dark text / transparent
 * surfaces), which is illegible on the dark shell. These rules restore it. They load before the
 * per-system mui-<game>.css, so game accents (LCARS pill menus, sepia/maroon tables) still win.
 * ==========================================================================================*/

/* ============================================================================================
 * CONTENT TEXT: light on the dark shell.
 * Instead of fixing dark text element-by-element, every MUI slot / rich-text container that
 * hard-codes dark text (rgba(0,0,0,.87), inherited by all its children incl. Quill/markdown notes)
 * is made to inherit -- which chains up to the body's cream (set by auth.css / the game themes).
 * We deliberately do NOT force a colour on .app-content: that would clobber the gold <h1>/<h2>
 * headings (and LCARS's own heading colour). LIGHT-surface exceptions set their own dark text.
 * ==========================================================================================*/
.MuiTypography-root,
.MuiAccordionDetails-root,
.MuiAccordionSummary-content,
.MuiCardContent-root,
.MuiCardHeader-title,
.MuiCardHeader-subheader,
.MuiList-root,
.MuiListItem-root,
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiDialogContent-root,
.MuiDialogContentText-root,
.MuiMenuItem-root,
.MuiTab-root,
.MuiChip-label,
.MuiPaginationItem-root,
.MuiFormControlLabel-label {
    color: inherit !important;
}
/* NB: table cells are intentionally NOT forced here. The dark ThemeProvider already gives them
 * light text by default, and components (e.g. the STA combat trackers) set inline cell colours
 * that a `!important` rule here would wrongly override (white-on-light = illegible). */

/* Quill / rich-text notes render dark by default (inherited from the MUI container above) */
.ql-editor,
.ql-editor * { color: inherit !important; }
.ql-snow .ql-stroke { stroke: rgba(230, 222, 209, 0.7); }
.ql-snow .ql-fill { fill: rgba(230, 222, 209, 0.7); }
.ql-snow .ql-picker,
.ql-snow .ql-picker-label { color: rgba(230, 222, 209, 0.7); }

/* Gold Cinzel headings (matches production) for D&D / CoC / default. LCARS overrides these with
 * its own Antonio/white style in mui-lcars.css. !important beats the .MuiTypography-root inherit
 * rule above (headings can be plain <h1>..<h3> or MUI Typography variants). */
.app-content h1,
.app-content h2,
.app-content h3,
.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3 {
    color: rgb(199, 167, 88) !important;
    font-family: 'Cinzel', serif;
}

/* --- menu: the sidebar is dark, so items must use light (inherited) text, not Semantic's dark --- */
.mui-menu-item { color: inherit; }
.mui-menu-item:hover { color: inherit; background: rgba(255, 255, 255, 0.08); }
.mui-menu-vertical .mui-menu-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
.mui-menu-vertical .mui-menu-item.active { background: rgba(255, 255, 255, 0.14); color: inherit; }

/* --- horizontal tabs (episode/session pages): the active tab defaulted to Semantic white,
 *     hiding its cream text. Make it a dark translucent panel with a visible underline. --- */
.mui-menu { border-bottom-color: rgba(255, 255, 255, 0.15); }
.mui-menu-tabular .mui-menu-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    border-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: transparent;
}

/* --- MUI data tables were transparent -> dark text on the dark shell. In the original the table
 *     was a dark panel with light text (e.g. D&D rgb(42,30,51) on the rgb(26,20,35) shell -- a
 *     subtle white overlay). Use a translucent overlay so it works on ANY shell (D&D/CoC purple,
 *     CoC brown, LCARS near-black), and light (inherited) text. mui-<game>.css recolours the
 *     header (D&D mauve, LCARS periwinkle, CoC sepia). --- */
.MuiTable-root,
.MuiTableContainer-root {
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    border-radius: 0.28571429rem;
}
.MuiTableCell-root {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
/* Cell text is left to the ThemeProvider (light by default) so component inline colours can win.
 * Only the header gets a translucent background; per-system CSS recolours it (mui-lcars periwinkle
 * header, dnd5e/coc parchment) with their own !important + later load. */
.MuiTableCell-head {
    background: rgba(255, 255, 255, 0.1);
}

/* --- default (uncoloured) icon buttons -- info/settings/edit/stop/arrow/add/hamburger etc. --
 *     MUI defaults them to rgba(0,0,0,.54) (invisible on the dark shell). Light them up, but leave
 *     colour-prop buttons (primary/error/inherit -> the blue row actions) alone via :not(). --- */
/* inherit the surrounding text colour so icons are light on the dark shell but DARK on light
 * surfaces (e.g. the STA combat cells set color:#000 -- their action icons must be dark too).
 * Colour-prop buttons (primary/error -> blue/red row actions) are excluded and keep their colour. */
.MuiIconButton-root:not([class*="MuiIconButton-color"]) {
    color: inherit;
}

/* --- compact PC / NPC character-detail cards. Each field is a MUI TableRow; MUI's 16px cell
 *     padding + full-size 53px inputs made every row ~71px tall. Tighten to the original density.
 *     Scoped to .characterDetails so other tables/forms are untouched. --- */
.characterDetails .MuiTableCell-root { padding: 1px 8px !important; }
.characterDetails .MuiInputBase-input,
.characterDetails .MuiOutlinedInput-input { padding-top: 3px !important; padding-bottom: 3px !important; }
.characterDetails .MuiInputLabel-root { font-size: 0.8em; }
.characterDetails .mui-select { min-height: 28px; padding-top: 0.2em; padding-bottom: 0.2em; }
.characterDetails .MuiCheckbox-root { padding: 2px; }
/* the top details table (class..Active) was content-width (~232px) via an inline width:auto,
 * leaving an odd gap; make it fill the card like the other sections. */
.characterDetails .MuiTable-root { width: 100% !important; }

/* PC/NPC cards live in a flex-wrap .pageContainer; each card wrapper was sizing to its content
 * (~416-563px) so only 3 fit. Cap them so 4-5 fit across like the original. */
.pageContainer { gap: 8px; align-items: flex-start; }
.pageContainer > div {
    flex: 0 0 300px;
    width: 300px;
    box-sizing: border-box;
}

/* --- MUI Paper / Card (e.g. the Player View Control panels) defaults to solid white. Make it a
 *     translucent dark panel like the segments/tables. Floating surfaces that overlay content
 *     (dialogs, menus, popovers, autocomplete lists, drawers) need an OPAQUE dark instead so the
 *     page behind them doesn't bleed through -- overridden below. !important beats MUI's emotion. */
.MuiPaper-root {
    background-color: rgba(255, 255, 255, 0.06) !important;
    background-image: none !important;
    color: inherit;
}
.MuiDialog-paper,
.MuiPopover-paper,
.MuiMenu-paper,
.MuiAutocomplete-paper,
.MuiDrawer-paper {
    background-color: #201b29 !important;
    /* Dialogs/menus are portaled to <body>, outside .app-content, so set an EXPLICIT light text
     * colour here -- everything inside then inherits it regardless of the portal root. */
    color: rgb(230, 222, 209) !important;
}

/* Belt-and-suspenders: force light on the dialog's text-bearing slots (title, inputs, labels,
 * selects, content text) -- but NOT buttons/icons, which keep their own colours. */
.MuiDialog-paper .MuiDialogTitle-root,
.MuiDialog-paper .MuiDialogContentText-root,
.MuiDialog-paper .MuiInputBase-input,
.MuiDialog-paper .MuiFormLabel-root,
.MuiDialog-paper .MuiInputLabel-root,
.MuiDialog-paper .field > label,
.MuiDialog-paper label,
.MuiDialog-paper .mui-select {
    color: rgb(230, 222, 209) !important;
}

/* --- ApexCharts (analytics dashboard): SVG labels use `fill`, not `color`, and default to a dark
 *     grey that's invisible on the dark shell. Recolour them + gridlines + tooltip. --- */
.apexcharts-text,
.apexcharts-text tspan,
.apexcharts-title-text,
.apexcharts-legend-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-xaxis-title-text,
.apexcharts-yaxis-title-text,
.apexcharts-datalabel,
.apexcharts-datalabels text {
    fill: rgb(230, 222, 209) !important;
}
.apexcharts-legend-text { color: rgb(230, 222, 209) !important; }
.apexcharts-gridline,
.apexcharts-grid-borders line { stroke: rgba(255, 255, 255, 0.12); }
.apexcharts-tooltip {
    background: #201b29 !important;
    color: rgb(230, 222, 209) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.apexcharts-tooltip-title { background: rgba(255, 255, 255, 0.08) !important; }

/* --- MUI text inputs (TextField): default text is rgba(0,0,0,.87) -> light on the dark shell.
 *     Also lighten the floating label and the outline so fields read on the dark background. --- */
.MuiInputBase-input { color: inherit !important; }
.MuiInputBase-input::placeholder { color: rgba(230, 222, 209, 0.5); opacity: 1; }
.MuiInputBase-root { color: inherit; }
.MuiFormLabel-root,
.MuiInputLabel-root { color: rgba(230, 222, 209, 0.6); }
.MuiFormLabel-root.Mui-focused,
.MuiInputLabel-root.Mui-focused { color: rgba(230, 222, 209, 0.9); }
.MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.23); }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255, 255, 255, 0.4); }
/* subtle lighter surround on inputs so the field reads against the dark shell (not white) */
.MuiOutlinedInput-root,
.MuiFilledInput-root { background-color: rgba(255, 255, 255, 0.05); }

/* checkboxes/radios: the unchecked box should read light on the dark shell (checked stays the
 * theme's primary blue). */
.MuiCheckbox-root:not(.Mui-checked):not(.Mui-disabled),
.MuiRadio-root:not(.Mui-checked):not(.Mui-disabled) { color: rgba(230, 222, 209, 0.6); }

/* --- Heal / Damage buttons: the migration kept the healButton/damageButton classNames but never
 *     ported their colours (they were Semantic Button color props). Restore green / red fills. --- */
.MuiButton-root.healButton {
    background-color: #21ba45;
    color: #fff;
}
.MuiButton-root.healButton:hover { background-color: #1a9c39; }
.MuiButton-root.damageButton {
    background-color: #db2828;
    color: #fff;
}
.MuiButton-root.damageButton:hover { background-color: #be2222; }
.MuiButton-root.healButton.Mui-disabled,
.MuiButton-root.damageButton.Mui-disabled {
    color: #fff;
    opacity: 0.4;
}