/* /my-dashboards/ — custom dashboard builder v2 (flipping panel + 12-col grid)
   Class prefix: mdb- (legacy /my-dash/ uses dash-; nothing is shared). */

:root {
    /* Set by my-dashboards.js: bottom edge of the sticky sport bar. */
    --mdb-sticky-top: 140px;
    --mdb-sticky-bottom: 40px;
    --mdb-panel-w: 264px;
    --mdb-accent: var(--tmb-blue);
}

/* layout-matchup.css (loaded for the reused matchup sections) forces
   .content-wrapper to padding-top:120px; the matchup page cancels that with
   a -50px header margin. Same here, or the sport bar sits 30px too low. */
.mdb-page .tmb-sport-bar {
    margin-top: -50px !important;
}
.mdb-app {
    display: flex;
    align-items: flex-start; /* REQUIRED for the sticky panel: stretch would make it full-height and sticky a no-op */
    gap: 16px;
    margin-top: 16px;
    margin-bottom: 32px;
}

.mdb-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------- The flipping panel ---------------- */

.mdb-panel {
    flex: 0 0 var(--mdb-panel-w);
    width: var(--mdb-panel-w);
    position: sticky;
    top: var(--mdb-sticky-top);
    /* Full remaining viewport height, its own scrollbar — the page behind
       never moves when the palette scrolls. --mdb-sticky-bottom is the
       fixed 40px .footer bar's height (measured by JS), so the panel stops
       above it instead of sliding under it. */
    max-height: calc(100vh - var(--mdb-sticky-top) - var(--mdb-sticky-bottom, 40px) - 12px);
    display: flex;
    flex-direction: column;
    background: var(--tmb-gray-100);
    border: 1px solid var(--tmb-gray-300);
    border-radius: 6px;
    overflow: hidden;
    /* Above the grid's stacking context (z 0) but well under page chrome (95+). */
    z-index: 5;
}

.mdb-panel-face {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.mdb-panel[data-face="browse"] .mdb-panel-face-edit,
.mdb-panel[data-face="edit"] .mdb-panel-face-browse {
    display: none;
}

.mdb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--tmb-gray-300);
    background: var(--tmb-gray-100);
    flex: 0 0 auto;
}

.mdb-panel-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent !important;
    color: var(--tmb-gray-900);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

.mdb-panel-back i {
    color: var(--mdb-accent);
    font-size: 0.8rem;
}

.mdb-panel-back:hover {
    color: var(--mdb-accent);
}

/* Dashboard list (browse face) */
.mdb-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
}

.mdb-dash-list li.mdb-dash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--tmb-gray-300);
    font-size: 0.9rem;
}

.mdb-dash-item-name {
    flex: 1 1 auto;   /* takes the middle; otherwise space-between centres it between grip and actions */
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdb-dash-list li.mdb-dash-item:hover {
    background: var(--tmb-gray-100);
}

.mdb-dash-list li.mdb-dash-item.active {
    background: var(--tmb-blue-200);
    font-weight: 600;
}

.mdb-dash-item-delete {
    background: transparent !important;
    border: none;
    color: var(--tmb-gray-500);
    font-size: 0.8rem;
    line-height: 1;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.mdb-dash-item-delete:hover {
    color: var(--tmb-red);
}

/* Widget palette (edit face) */
.mdb-palette-search-wrap {
    padding: 10px 12px 6px;
    flex: 0 0 auto;
}

.mdb-palette-hint {
    margin: 0 12px 8px;
    font-size: 0.72rem;
    color: var(--tmb-gray-700);
    flex: 0 0 auto;
}

.mdb-palette {
    list-style: none;
    margin: 0;
    padding: 0 10px 12px;
    overflow-y: auto;
    overscroll-behavior: contain; /* scrolling the list never scrolls the page */
    min-height: 0;
    flex: 1 1 auto;
}

.mdb-palette-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--tmb-blue-200);
    border-radius: 4px;
    background: var(--tmb-blue-100);
    font-size: 0.85rem;
    line-height: 1.25;
    user-select: none;
}

.mdb-palette-item-draggable {
    cursor: grab;
}

.mdb-palette-item-draggable:hover {
    background: var(--tmb-blue-200);
    border-color: color-mix(in srgb, var(--tmb-blue-alt-hover), white 63%);
}

.mdb-palette-item-grip {
    color: var(--tmb-blue-300);
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.mdb-palette-item-placed .mdb-palette-item-grip {
    visibility: hidden;
}

.mdb-palette-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Already on the dashboard: shown for clarity, not draggable (widgets are
   dashboard-wide singletons — one date/game context per dashboard). */
.mdb-palette-item.mdb-palette-item-placed {
    cursor: default;
    opacity: 0.6;
    background: var(--tmb-gray-100);
    border-color: var(--tmb-gray-300);
    font-style: italic;
}

.mdb-palette-item.mdb-palette-item-suboption {
    margin-left: 14px;
    border-left: 3px solid color-mix(in srgb, var(--tmb-blue-alt-hover), white 63%);
    font-size: 0.8rem;
}

.mdb-palette-empty {
    padding: 10px;
    font-size: 0.85rem;
}

/* The drag helper is a CLONE of the row appended to <body> (GridStack's
   dragIn with helper:'clone') — it must look right outside the panel. */
.mdb-palette-item.ui-draggable-dragging {
    width: 240px;
    box-shadow: 0 8px 24px var(--tmb-black-20);
    background: var(--tmb-blue-200);
    border-color: var(--mdb-accent);
    z-index: 3000;
    opacity: 0.95;
    cursor: grabbing;
}

.mdb-palette-item-info,
.mdb-palette-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.mdb-palette-item-info {
    color: var(--tmb-blue-300);
    font-size: 0.95rem;
    cursor: help;
}

.mdb-palette-item-info,
.mdb-palette-item-info:hover,
.mdb-palette-item-info:focus,
.mdb-palette-item-info:active,
.mdb-palette-item-remove,
.mdb-palette-item-remove:focus {
    -webkit-appearance: none;
    appearance: none;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.mdb-palette-item-info:hover {
    color: var(--mdb-accent);
}

.mdb-palette-item-remove {
    color: var(--tmb-gray-600);
    font-size: 1.15rem;
    border-radius: 4px;
}

.mdb-palette-item-remove:hover {
    background: var(--tmb-bad-1) !important;
    color: var(--tmb-red-700);
}

/* Floating ⓘ card — body-appended + fixed so the scrolling panel can't clip it. */
.mdb-widget-preview {
    position: fixed;
    z-index: 2100;
    width: 320px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid var(--tmb-blue-200);
    border-radius: 6px;
    box-shadow: 0 6px 24px var(--tmb-black-20);
    padding: 12px;
    pointer-events: none;
}

.mdb-widget-preview-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.mdb-widget-preview-desc {
    font-size: 0.82rem;
    color: var(--tmb-gray-700);
    line-height: 1.35;
}

.mdb-widget-preview-img {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--tmb-gray-300);
    border-radius: 4px;
}

/* ---------------- Toolbar ---------------- */

.mdb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px;
    background: var(--tmb-gray-100);
    border-radius: 6px;
    margin-bottom: 12px;
    /* Pin the toolbar directly below the sticky breadcrumb bar so the name +
       date/game/Edit controls stay visible and are never clipped as the page
       scrolls (the breadcrumb bar is sticky; a static toolbar slid under it
       and got cut off at the top). --mdb-sticky-top = the bar's bottom edge. */
    position: sticky;
    top: var(--mdb-sticky-top, 140px);
    z-index: 40;
    /* Opaque cover for widgets scrolling underneath; a soft edge when stuck. */
    box-shadow: 0 2px 6px var(--tmb-black-5);
}

.mdb-notice {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: var(--tmb-warning-text);
    background: var(--tmb-warning-bg);
    border: 1px solid var(--tmb-warning-bg);
    border-radius: 4px;
    padding: 4px 8px;
}

.mdb-toolbar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mdb-current-name {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
}

.mdb-app-view #mdb-current-name {
    cursor: default;
}

#mdb-current-name:hover {
    border-bottom-color: var(--tmb-gray-500);
}

.mdb-name-input {
    font-size: inherit;
    font-weight: inherit;
    border: 1px solid color-mix(in srgb, var(--tmb-blue-alt-hover), white 63%);
    border-radius: 3px;
    padding: 0 4px;
    max-width: 240px;
}

/* Never wider than the toolbar. At flex: 0 0 auto with nowrap the block was
   its content's width on ONE line and nothing held it to the toolbar, which
   beside the 264px panel is 414px at a 768px window: the NFL editor's
   controls were 544px there, the Edit button past the window's edge up to
   860px and past the toolbar's up to 896px; in edit mode (Undo, Cancel,
   Done) up to 1078px, and 1172px with "Not saved Retry" showing. While the
   controls fit, max-width does nothing and the block is where it was, beside
   the name or under it. When they do not, the block is the toolbar's width
   under the name and the controls go onto further lines, each at its own
   width (the select is never narrowed: its rows are read closed). */
.mdb-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    max-width: 100%;
}

.mdb-toolbar-controls input#mdb-date-input {
    width: 132px;
    font-size: 0.8rem;
    padding: 2px 6px;
    height: calc(1.5em + 0.5rem + 2px);
}

.mdb-toolbar-controls select#mdb-game-select {
    width: 210px;
    font-size: 0.8rem;
    padding: 2px 6px;
    height: calc(1.5em + 0.5rem + 2px);
}

/* NFL: the list is a week and each row starts with its day and time
   ("Sun, 10/11, 1:00 p.m. - Bills @ Jets"; my-dashboards.js sets the class
   before the toolbar is shown). Not at phone width, where the control takes
   the toolbar's whole width. */
@media (min-width: 768px) {
    .mdb-toolbar-controls select#mdb-game-select.mdb-game-select-week {
        width: 320px;
    }
}

/* Toolbar controls that only make sense while editing */
.mdb-edit-only { display: none; }
.mdb-editing .mdb-edit-only { display: inline-block; }
/* Undo and Cancel are front.css's .tmb-pill, whose display (two classes) outranks
   .mdb-edit-only's: hidden here at the same weight, later in the cascade, and a
   flex box while editing, so the icon keeps its gap. */
.tmb-pill.mdb-edit-only { display: none; }
.mdb-editing .tmb-pill.mdb-edit-only { display: inline-flex; }

/* Auto-save state: blank when idle, so it only draws the eye when it matters. */
.mdb-save-status {
    font-size: 0.75rem;
    color: var(--tmb-gray-700);
    white-space: nowrap;
    min-width: 0;
}
.mdb-save-status.is-saved { color: var(--tmb-green); }
.mdb-save-status.is-failed { color: var(--tmb-red-700); font-weight: 600; }
.mdb-save-status button {
    background: none !important;
    border: none;
    color: var(--mdb-accent);
    text-decoration: underline;
    font-size: inherit;
    padding: 0 0 0 4px;
    cursor: pointer;
}

/* ---------------- The grid ---------------- */

.mdb-grid-wrap {
    position: relative;
    /* Own stacking context: widgets reuse whole pages' stylesheets, several of
       which layer frozen table headers / tooltips at z 10..100+; contain them
       below the page chrome (sport bar 95, header 96, panel 5). */
    z-index: 0;
}

.grid-stack#mdb-grid {
    min-height: 120px;
}

/* GridStack insets every item by its 8px margin — including the OUTER edges —
   so widget content sat 8px inside the toolbar/header, which spans the full
   width. Cancel just the outer inset (desktop only) so the left/right edges of
   the widgets line up with the toolbar. The .container-fluid's own side padding
   absorbs the overhang, so the page never scrolls sideways. Mobile already
   drops the inset (.gs-1 sets inset:auto), so scope this to ≥768px. */
@media (min-width: 768px) {
    .grid-stack#mdb-grid { margin-left: -8px; margin-right: -8px; }
}

/* Edit mode: a faint column guide so drops read as snapping to something. */
.mdb-editing .grid-stack#mdb-grid {
    background-image: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--tmb-blue-alt-hover) 6%, transparent) 0,
        color-mix(in srgb, var(--tmb-blue-alt-hover) 6%, transparent) calc(100% / 12 - 1px),
        transparent calc(100% / 12 - 1px),
        transparent calc(100% / 12)
    );
    border-radius: 6px;
}

.mdb-grid-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 120px;
    margin-top: 8px;
    border: 2px dashed var(--tmb-gray-400);
    border-radius: 8px;
    color: var(--tmb-gray-600);
    font-size: 0.9rem;
}

.mdb-grid-empty i {
    font-size: 1.4rem;
}

/* GridStack's drop target preview */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
    background: color-mix(in srgb, var(--tmb-blue-alt-hover) 12%, transparent);
    border: 2px dashed var(--mdb-accent);
    border-radius: 6px;
}

/* Live pair-split preview (see applyPairPreview in my-dashboards.js): the
   partner widget that just shrank to its half gets an outline so the pair
   reads as one proposed row; the placeholder shows the dragged half. */
.grid-stack-item.mdb-pair-preview-partner > .grid-stack-item-content {
    outline: 2px dashed var(--mdb-accent);
    outline-offset: -2px;
    border-radius: 6px;
    transition: outline-color 0.15s;
}

/* Item content: GridStack absolutely positions it to the cell minus margin;
   our shell sits inside as the ONE child it measures for auto height. */
.grid-stack-item-content {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Outside edit mode, let tooltips/dropdowns inside widgets spill over the
   item bounds like they do on the real pages. Edit mode keeps overflow
   contained so the card stays a card while dragging. */
.mdb-app:not(.mdb-editing) .grid-stack-item-content {
    overflow: visible;
}

.mdb-widget-shell {
    background: #fff;
    display: flex;
    flex-direction: column;
}

.mdb-editing .mdb-widget-shell {
    border: 1px solid var(--tmb-gray-300);
    border-radius: 6px;
    /* No overflow:hidden — it clipped the Tables dropdown on short widgets.
       The toolbar's own background carries the rounded top; the cell's
       overflow rules handle everything else. */
}
.mdb-editing .mdb-widget-toolbar { border-radius: 5px 5px 0 0; }

.mdb-editing .grid-stack-item.ui-draggable-dragging .mdb-widget-shell {
    box-shadow: 0 10px 30px var(--tmb-black-20);
}

/* Pinned-height (capped) items: the shell stays content-sized — that is
   what the ResizeObserver measures, so a section opening/closing inside
   re-applies the cap — and the CELL scrolls when content exceeds it. */
.grid-stack-item.mdb-fixed-h .grid-stack-item-content {
    overflow-x: hidden;
    overflow-y: auto;
}

.mdb-drop-placeholder {
    min-height: 40px;
}

.mdb-widget-toolbar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--tmb-gray-100);
    border-bottom: 1px solid var(--tmb-gray-300);
    flex: 0 0 auto;
    cursor: grab;
}

.mdb-editing .mdb-widget-toolbar {
    display: flex;
}

/* View mode: widgets whose content has no heading of its own keep a slim
   title bar (set by markOwnHeading in my-dashboards.js). */
.mdb-app:not(.mdb-editing) .mdb-widget-shell.mdb-show-title .mdb-widget-toolbar {
    display: flex;
    cursor: default;
    padding: 4px 10px;
    background: var(--tmb-gray-100);
}
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-widget-grip,
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-widget-rows-control,
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-widget-tables-control,
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-widget-autoheight,
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-widget-remove,
.mdb-app:not(.mdb-editing) .mdb-show-title .mdb-edit-only {
    display: none !important;
}

.mdb-widget-toolbar:active {
    cursor: grabbing;
}

.mdb-widget-grip {
    color: var(--tmb-gray-500);
    flex: 0 0 auto;
}

.mdb-widget-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tmb-gray-700);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdb-widget-rows-control {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--tmb-gray-600);
}

.mdb-widget-rows-btn {
    background: transparent !important;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 3px;
    color: var(--tmb-gray-600);
    width: 18px;
    height: 18px;
    line-height: 1;
    padding: 0;
    font-size: 0.8rem;
    cursor: pointer;
}

.mdb-widget-rows-btn:hover {
    color: var(--mdb-accent);
    border-color: var(--mdb-accent);
}

.mdb-widget-rows-count {
    min-width: 1.4em;
    text-align: center;
}

.mdb-widget-tables-control {
    position: relative;
    flex: 0 0 auto;
}

.mdb-widget-tables-btn {
    background: transparent !important;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 3px;
    color: var(--tmb-gray-600);
    font-size: 0.7rem;
    padding: 2px 6px;
    cursor: pointer;
}

.mdb-widget-tables-btn:hover {
    color: var(--mdb-accent);
    border-color: var(--mdb-accent);
}

.mdb-widget-tables-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--tmb-black-15);
    padding: 6px 0;
    min-width: 210px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 0.75rem;
    text-transform: none;
    font-weight: 400;
    cursor: default;
}

.mdb-widget-tables-dropdown.show {
    display: block;
}

.mdb-widget-tables-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    color: var(--tmb-gray-900);
    cursor: pointer;
    margin: 0;
}

.mdb-widget-tables-option:hover {
    background: var(--tmb-gray-100);
}

.mdb-widget-tables-actions {
    display: flex;
    gap: 10px;
    padding: 2px 10px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--tmb-gray-300);
}

.mdb-widget-tables-actions button {
    color: var(--mdb-accent);
    cursor: pointer;
    font-size: 0.7rem;
    background: none;
    border: none;
    padding: 0;
}

.mdb-widget-tables-actions button:hover {
    text-decoration: underline;
}

.mdb-widget-autoheight,
.mdb-widget-remove {
    background: none !important;
    border: none;
    color: var(--tmb-gray-600);
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 2px;
}

.mdb-widget-autoheight {
    font-size: 0.8rem;
}

.mdb-widget-autoheight:hover {
    color: var(--mdb-accent);
}

.mdb-widget-remove {
    font-size: 1rem;
}

.mdb-widget-remove:hover {
    color: var(--tmb-red);
}

/* No side padding in view mode: every widget's content spans the full widget
   width, flush with the toolbar edges (the reused page content carries its own
   inner spacing). Edit mode keeps a small inset below. */
.mdb-widget-body {
    padding: 0;
}

.mdb-editing .mdb-widget-body {
    padding: 10px;
}

.mdb-widget-body .game-container {
    margin-bottom: 0 !important;
}

/* The three Query & System Builder widgets reuse the real page's fragments
   verbatim, and each of those opens with <div class="card mt-4"> — page-level
   spacing that reads as dead air once the card is the widget's whole content:
   24px of top margin above the title, a 24px-font h5 with 11px of padding
   under it, and 20px card-body padding, stacked three times down the
   dashboard. Trim the page-scale spacing to widget scale (~100px back across
   the three) without touching the type or the borders. Scoped by
   data-widget-type (set in my-dashboards.js) so no other widget's cards move.
   query_systems' body carries .p-0, whose !important keeps it at zero. */
.mdb-widget-shell[data-widget-type="query_builder"] .mdb-widget-body > .card,
.mdb-widget-shell[data-widget-type="query_save"] .mdb-widget-body > .card,
.mdb-widget-shell[data-widget-type="query_systems"] .mdb-widget-body > .card {
    margin-top: 0;
}
.mdb-widget-shell[data-widget-type="query_builder"] .mdb-widget-body > .card > .card-header,
.mdb-widget-shell[data-widget-type="query_save"] .mdb-widget-body > .card > .card-header,
.mdb-widget-shell[data-widget-type="query_systems"] .mdb-widget-body > .card > .card-header {
    padding: 10px 14px;
}
.mdb-widget-shell[data-widget-type="query_builder"] .mdb-widget-body > .card > .card-header h5,
.mdb-widget-shell[data-widget-type="query_save"] .mdb-widget-body > .card > .card-header h5,
.mdb-widget-shell[data-widget-type="query_systems"] .mdb-widget-body > .card > .card-header h5 {
    padding-bottom: 0;
}
.mdb-widget-shell[data-widget-type="query_builder"] .mdb-widget-body > .card > .card-body,
.mdb-widget-shell[data-widget-type="query_save"] .mdb-widget-body > .card > .card-body,
.mdb-widget-shell[data-widget-type="query_systems"] .mdb-widget-body > .card > .card-body {
    padding: 12px 14px;
}

/* Resize handles: only visible in edit mode (GridStack hides them on a
   static grid anyway); make the side handles a little easier to find. */
.mdb-editing .grid-stack-item > .ui-resizable-e,
.mdb-editing .grid-stack-item > .ui-resizable-w {
    width: 10px;
}

.mdb-editing .grid-stack-item:hover > .ui-resizable-e,
.mdb-editing .grid-stack-item:hover > .ui-resizable-w {
    background: linear-gradient(to right, transparent 3px, color-mix(in srgb, var(--tmb-blue-alt-hover) 35%, transparent) 3px, color-mix(in srgb, var(--tmb-blue-alt-hover) 35%, transparent) 7px, transparent 7px);
}

/* The Player Selector strip's own date/game controls are redundant here —
   the toolbar's are the single source of game context. Hidden, not removed
   (ps-core.js still reads/writes them). */
.mdb-widget-body .ps-selector-row #date-picker,
.mdb-widget-body .ps-selector-row .selector-game {
    display: none;
}

/* ---------------- Modal (new dashboard) ---------------- */

.mdb-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--tmb-black-45);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8vh;
}

.mdb-modal {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 420px;
    max-height: 78vh;
    overflow-y: auto;
}

/* Wide enough for three templates across, and tall enough to need no
   scroll on a laptop screen (Zach, 2026-10-17). */
.mdb-modal-backdrop:has(.mdb-modal-new) { padding-top: 4vh; }
.mdb-modal-new { max-width: 820px; max-height: 92vh; }

/* Starter-template picker (New dashboard modal) */
.mdb-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 767px) {
    .mdb-template-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .mdb-template-grid { grid-template-columns: 1fr; }
}
.mdb-template {
    display: block;
    border: 1px solid var(--tmb-gray-400);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    background: #fff;
}
.mdb-template:hover { border-color: color-mix(in srgb, var(--tmb-blue-alt-hover), white 63%); background: var(--tmb-blue-50); }
.mdb-template.is-selected { border-color: var(--mdb-accent); background: var(--tmb-blue-100); box-shadow: inset 0 0 0 1px var(--mdb-accent); }
.mdb-template input {
    /* Visually hidden but still focusable/reachable by keyboard (display:none
       would drop it from the Tab order and block keyboard template choice). */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.mdb-template:focus-within {
    outline: 2px solid var(--mdb-accent);
    outline-offset: 2px;
}
.mdb-template-title { font-weight: 600; font-size: 0.9rem; }
.mdb-template-desc { font-size: 0.76rem; color: var(--tmb-gray-600); margin-top: 2px; line-height: 1.3; }

.mdb-dash-item-grip {
    color: var(--tmb-gray-400);
    cursor: grab;
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding-right: 2px;
}
.mdb-dash-item-grip:hover { color: var(--mdb-accent); }
.mdb-dash-item.is-dragging { opacity: 0.5; }
.mdb-dash-item.is-over { box-shadow: inset 0 3px 0 var(--mdb-accent); }
.mdb-dash-item.active .mdb-dash-item-name { cursor: text; }
.mdb-dash-item .mdb-name-input { width: 100%; }

/* Hover actions on a dashboard row: star / duplicate / delete */
.mdb-dash-item-actions { display: flex; gap: 2px; flex: 0 0 auto; opacity: 0.25; }
.mdb-dash-item:hover .mdb-dash-item-actions, .mdb-dash-item.active .mdb-dash-item-actions, .mdb-dash-item:focus-within .mdb-dash-item-actions { opacity: 1; }
.mdb-dash-item-actions button {
    background: transparent !important;
    border: none;
    color: var(--tmb-gray-500);
    font-size: 0.8rem;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.mdb-dash-item-actions button:hover { color: var(--mdb-accent); }
.mdb-dash-item-actions .mdb-dash-item-delete:hover { color: var(--tmb-red); }

/* Palette group headers */
.mdb-palette-group {
    list-style: none;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tmb-gray-700);
    padding: 10px 4px 4px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}
.mdb-palette-group i { font-size: 0.6rem; margin-right: 4px; transition: transform 0.15s; }
.mdb-palette-group.is-collapsed i { transform: rotate(-90deg); }
.mdb-palette-item.mdb-palette-item-hidden { display: none; }

/* Star = default dashboard for this sport */
.mdb-dash-item-star {
    background: transparent !important;
    border: none;
    color: var(--tmb-gray-500);
    font-size: 0.8rem;
    padding: 2px 6px 2px 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.mdb-dash-item-star:hover, .mdb-dash-item-star.is-on { color: color-mix(in srgb, var(--tmb-yellow), black 10%); }

/* A dashboard as the member's Matchup page (/matchup/ shows it for the sport).
   The pin in a row's actions sets it; the row that holds it carries a pin
   beside its name, which stays visible while the actions are dimmed. */
.mdb-dash-item-actions .mdb-dash-item-matchup.is-on { color: var(--mdb-accent); }
.mdb-dash-item-flag {
    flex: 0 0 auto;
    color: var(--mdb-accent);
    font-size: 0.7rem;
}
/* The standard Matchup page, the list's last row while a dashboard stands in for it */
.mdb-dash-list li.mdb-dash-item-original { cursor: default; font-size: 0.82rem; }
.mdb-dash-item-original a {
    flex: 1 1 auto;
    color: var(--tmb-gray-700);
}
.mdb-dash-item-original a:hover { color: var(--mdb-accent); text-decoration: none; }
.mdb-dash-item-original i { font-size: 0.7rem; margin-right: 4px; }
/* Toolbar: "Matchup page" beside the name; and, when the page IS /matchup/,
   the way into the editor and the way to the standard page */
.mdb-matchup-badge {
    background: var(--tmb-blue-100);
    color: var(--tmb-blue);
    font-weight: 600;
}
.mdb-matchup-customize { white-space: nowrap; }
.mdb-original-link {
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--tmb-gray-700);
}
.mdb-original-link:hover { color: var(--mdb-accent); }
/* New Dashboard modal: "Use as my Matchup page" */
.mdb-new-matchup-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin: 0 0 2px;
    cursor: pointer;
}
.mdb-new-matchup-label input { margin: 0; }

/* Keyboard-selected widget */
.mdb-editing .grid-stack-item.mdb-selected > .grid-stack-item-content {
    outline: 2px solid var(--mdb-accent);
    outline-offset: 1px;
    border-radius: 6px;
}
/* Keyboard focus: visible ring for keyboard users (mouse focus stays quiet
   via :focus-visible). The grid item, palette rows, list name/grip, group
   headers and toolbar controls all opt in. */
.grid-stack-item:focus { outline: none; }
.mdb-app .grid-stack-item:focus-visible,
.mdb-palette-item-draggable:focus-visible,
.mdb-palette-group:focus-visible,
.mdb-dash-item-name:focus-visible,
.mdb-widget-toolbar button:focus-visible,
.mdb-dash-item-actions button:focus-visible,
.mdb-widget-tables-actions button:focus-visible,
#mdb-current-name:focus-visible {
    outline: 2px solid var(--mdb-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Respect the OS "reduce motion" setting: kill transitions/animations and
   the smooth-scroll used by the drag auto-scroll. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
.mdb-widget-resetsize {
    background: none !important;
    border: none;
    color: var(--tmb-gray-600);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0 2px;
}
.mdb-widget-resetsize:hover { color: var(--mdb-accent); }

.mdb-banner {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 0.85rem;
}
.mdb-banner a { margin-left: 8px; }

/* Read-only list (admin view-as): plain rows, no handles or actions */
.mdb-app-readonly .mdb-dash-item { cursor: pointer; }
.mdb-app-readonly #mdb-current-name { cursor: default; }
.mdb-app-readonly #mdb-current-name:hover { border-bottom-color: transparent; }

/* ---------------- Print ---------------- */
@media print {
    .header, #sidebarMenu, #sbFlyout, .sidebarIconToggle, .tmb-sport-bar,
    .mdb-panel, .mdb-toolbar-controls, .mdb-banner, .footer, .mdb-widget-toolbar,
    .explore-dock, #explore-dock { display: none !important; }
    .content-wrapper { padding: 0 !important; }
    .mdb-app { display: block; margin: 0; }
    .mdb-toolbar { background: none; padding: 0 0 8px; border-bottom: 1px solid var(--tmb-gray-400); border-radius: 0; }
    /* Stack the grid like the phone layout: every widget full width, in order */
    .grid-stack#mdb-grid { display: flex; flex-direction: column; gap: 14px; height: auto !important; }
    .grid-stack#mdb-grid > .grid-stack-item {
        position: static !important; width: 100% !important; height: auto !important;
        top: auto !important; left: auto !important; margin: 0 !important; transform: none !important;
        break-inside: avoid;
    }
    .grid-stack#mdb-grid > .grid-stack-item > .grid-stack-item-content { position: static !important; inset: auto !important; overflow: visible !important; }
    .grid-stack-item.mdb-fixed-h .grid-stack-item-content { overflow: visible !important; }
    .ui-resizable-handle { display: none !important; }
}

/* Logged-out teaser card (markup mirrors /matchup/'s locked game) */
.mdb-teaser { min-height: 360px; }
.mdb-teaser .game-content-area { padding: 16px; }

/* The real pages' scope classes (odds-tracker.css / schedule-grid.css key
   their controls on them) carry page padding we don't want inside a widget.
   A descendant, not a child: since the widgets got a collapsible heading
   (2026-10-15) the page div sits inside the section's wrapper, and the child
   selector let .odds-page's 80px top padding back in under the heading. */
.mdb-widget-body .odds-page,
.mdb-widget-body .schedule-page {
    padding: 0 !important;
    max-width: none !important;
}

/* ---------------- front.css button-fill stomp ---------------- */
/* front.css has a site-wide `button { background-color: #edeced !important }`
   that blanks Bootstrap's filled buttons (see feedback_button_color_override). */
#mdb-app .btn-primary,
.mdb-modal .btn-primary {
    background-color: var(--tmb-blue) !important;
    border-color: var(--tmb-blue) !important;
    color: #fff !important;
}
#mdb-app .btn-primary:hover:not(:disabled),
.mdb-modal .btn-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--tmb-blue), black 15%) !important;
    border-color: var(--tmb-blue-alt-hover) !important;
}
#mdb-app .btn-secondary,
.mdb-modal .btn-secondary {
    background-color: var(--tmb-gray-600) !important;
    border-color: var(--tmb-gray-600) !important;
    color: #fff !important;
}
#mdb-app .btn-secondary:hover:not(:disabled),
.mdb-modal .btn-secondary:hover:not(:disabled) {
    background-color: var(--tmb-gray-700) !important;
    border-color: var(--tmb-gray-700) !important;
}
#mdb-app .btn-outline-secondary.active {
    background-color: var(--tmb-gray-600) !important;
    border-color: var(--tmb-gray-600) !important;
    color: #fff !important;
}

/* ---------------- View mode (/my-dashboards/?sport=X&dash=Y) ---------------- */

.mdb-app-view {
    display: block;
}

/* ---------------- Mobile ---------------- */

@media (max-width: 767px) {
    /* One-column mode: a plain stacked flow, not GridStack's absolute
       positioning. GridStack's column(1) merely scales the desktop y's, so
       every side-by-side gap on desktop became vertical whitespace here.
       Items are ordered by desktop position via inline `order`
       (my-dashboards.js applyMobileOrder); heights are just content. */
    .grid-stack#mdb-grid.gs-1 {
        display: flex;
        flex-direction: column;
        gap: 18px;
        height: auto !important;
        min-height: 0 !important;
    }
    .grid-stack#mdb-grid.gs-1 > .grid-stack-item {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    .grid-stack#mdb-grid.gs-1 > .grid-stack-item > .grid-stack-item-content {
        position: static !important;
        inset: auto !important;
        overflow: visible !important;
    }
    .grid-stack#mdb-grid.gs-1 > .grid-stack-placeholder {
        display: none;
    }
    .mdb-app {
        flex-direction: column;
        align-items: stretch;
        padding: 0 10px;
    }
    /* Stacked above the grid, no longer sticky/full-height. Editing is
       disabled at this width (my-dashboards.js), so only the browse face
       ever shows here. */
    .mdb-panel {
        position: static;
        width: 100%;
        flex: 0 0 auto;
        max-height: 40vh;
    }
    #mdb-edit-toggle {
        display: none;
    }
    /* Held to the toolbar's width, on a line of its own under the name. Left
       at flex: 0 0 auto the block is as wide as its content on ONE line (the
       date, the select at its longest option and the links: 494px on an MLB
       dashboard and 661px on an NFL one in a 355px toolbar), so the select's
       100% below was 100% of something wider than the screen and its right
       end, arrow included, was cut. */
    .mdb-toolbar-controls {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }
    .mdb-toolbar-controls select#mdb-game-select,
    .mdb-toolbar-controls .mdb-game-search { /* TMB.searchSelect's wrapper */
        width: 100%;
    }
    .mdb-widget-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}