/* /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: #4285f4;
}

/* 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: #f8f9fa;
    border: 1px solid #e0e0e0;
    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 #e0e0e0;
    background: #eef1f4;
    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: #333;
    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 #eee;
    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: #eef1f4;
}

.mdb-dash-list li.mdb-dash-item.active {
    background: #dce8ff;
    font-weight: 600;
}

.mdb-dash-item-delete {
    background: transparent !important;
    border: none;
    color: #aaa;
    font-size: 0.8rem;
    line-height: 1;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.mdb-dash-item-delete:hover {
    color: #dc3545;
}

/* 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: #595959;
    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 #c7d9ff;
    border-radius: 4px;
    background: #eaf1ff;
    font-size: 0.85rem;
    line-height: 1.25;
    user-select: none;
}

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

.mdb-palette-item-draggable:hover {
    background: #dbe8ff;
    border-color: #a9c2ff;
}

.mdb-palette-item-grip {
    color: #9db6e4;
    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: #f4f4f4;
    border-color: #e0e0e0;
    font-style: italic;
}

.mdb-palette-item.mdb-palette-item-suboption {
    margin-left: 14px;
    border-left: 3px solid #a9c2ff;
    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 rgba(0, 0, 0, 0.25);
    background: #dbe8ff;
    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: #9db6e4;
    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: #999;
    font-size: 1.15rem;
    border-radius: 4px;
}

.mdb-palette-item-remove:hover {
    background: #fdecea !important;
    color: #c0392b;
}

/* 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 #c7d9ff;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    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: #555;
    line-height: 1.35;
}

.mdb-widget-preview-img {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

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

.mdb-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px;
    background: #f8f9fa;
    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 rgba(0, 0, 0, 0.06);
}

.mdb-notice {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: #856404;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    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: #999;
}

.mdb-name-input {
    font-size: inherit;
    font-weight: inherit;
    border: 1px solid #a9c2ff;
    border-radius: 3px;
    padding: 0 4px;
    max-width: 240px;
}

.mdb-toolbar-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.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);
}

/* Toolbar controls that only make sense while editing */
.mdb-edit-only { display: none; }
.mdb-editing .mdb-edit-only { display: inline-block; }

/* Auto-save state: blank when idle, so it only draws the eye when it matters. */
.mdb-save-status {
    font-size: 0.75rem;
    color: #595959;
    white-space: nowrap;
    min-width: 0;
}
.mdb-save-status.is-saved { color: #28a745; }
.mdb-save-status.is-failed { color: #c0392b; 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,
        rgba(66, 133, 244, 0.06) 0,
        rgba(66, 133, 244, 0.06) 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 #d0d0d0;
    border-radius: 8px;
    color: #999;
    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: rgba(66, 133, 244, 0.12);
    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 #e0e0e0;
    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 rgba(0, 0, 0, 0.25);
}

/* 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: #f2f2f2;
    border-bottom: 1px solid #e0e0e0;
    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: #fafafa;
}
.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: #aaa;
    flex: 0 0 auto;
}

.mdb-widget-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #555;
    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: #777;
}

.mdb-widget-rows-btn {
    background: transparent !important;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    color: #777;
    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 #d0d0d0;
    border-radius: 3px;
    color: #777;
    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 #d0d0d0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .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: #333;
    cursor: pointer;
    margin: 0;
}

.mdb-widget-tables-option:hover {
    background: #f5f5f5;
}

.mdb-widget-tables-actions {
    display: flex;
    gap: 10px;
    padding: 2px 10px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
}

.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: #999;
    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: #dc3545;
}

/* 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;
}

/* Odds Tracker's controls row is the widget's first element and .mdb-widget-body
   has no padding in view mode, so the dropdowns sit flush against the top edge.
   (On the real page the row is inside .content-wrapper, which supplies this.) */
.mdb-widget-shell[data-widget-type="odds_tracker"] .mdb-widget-body .odds-controls {
    padding-top: 10px;
}

/* 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, rgba(66, 133, 244, 0.35) 3px, rgba(66, 133, 244, 0.35) 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: rgba(0, 0, 0, 0.5);
    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;
}

.mdb-modal-new { max-width: 520px; }

/* Starter-template picker (New dashboard modal) */
.mdb-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.mdb-template {
    display: block;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    background: #fff;
}
.mdb-template:hover { border-color: #a9c2ff; background: #f5f8ff; }
.mdb-template.is-selected { border-color: var(--mdb-accent); background: #eaf1ff; 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: #666; margin-top: 2px; line-height: 1.3; }

.mdb-dash-item-grip {
    color: #c5c5c5;
    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: #aaa;
    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: #dc3545; }

/* Palette group headers */
.mdb-palette-group {
    list-style: none;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #595959;
    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: #bbb;
    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: #f0a500; }

/* 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: #999;
    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 #ccc; 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. */
.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: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
}
#mdb-app .btn-primary:hover:not(:disabled),
.mdb-modal .btn-primary:hover:not(:disabled) {
    background-color: #0069d9 !important;
    border-color: #0062cc !important;
}
#mdb-app .btn-secondary,
.mdb-modal .btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}
#mdb-app .btn-secondary:hover:not(:disabled),
.mdb-modal .btn-secondary:hover:not(:disabled) {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
}
#mdb-app .btn-outline-secondary.active {
    background-color: #6c757d !important;
    border-color: #6c757d !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;
    }
    .mdb-toolbar-controls {
        flex-wrap: wrap;
    }
    .mdb-toolbar-controls select#mdb-game-select {
        width: 100%;
    }
    .mdb-widget-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}