.dupr-history-page-shell {
    min-height: calc(100vh - var(--homepage-mobile-nav-height, 52px));
    padding: 1.25rem 0;
    background: rgb(var(--color-bg-subtle));
}

.dupr-history-brand-link {
    color: inherit;
    text-decoration: none;
}

.dupr-history-nav-shell {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.dupr-history-page-section {
    padding: 0;
}

#homepage-nav-row.dupr-history-nav-row {
    width: min(100% - 2rem, 80rem);
    margin-left: auto;
    margin-right: auto;
}

.dupr-history-content-width {
    width: min(100% - 2rem, 80rem);
    max-width: 80rem;
    margin: 0 auto;
}

.dupr-history-desktop-home-button {
    min-height: 2.25rem;
    min-width: 2.94rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dupr-history-mobile-home-button {
    min-width: 2.94rem;
}

@media (min-width: 768px) {
    .dupr-history-mobile-home-button {
        display: none !important;
    }
}

#dupr-history-page-nav {
    background: linear-gradient(
        135deg,
        rgb(var(--color-hero-gradient-start)) 0%,
        rgb(var(--color-hero-gradient-mid)) 52%,
        rgb(var(--color-ocean-blue)) 100%
    );
}

#dupr-history-page-nav .homepage-brand-text {
    color: rgb(var(--color-gray-50));
}


.dupr-history-access-panel {
    padding: clamp(2rem, 8vw, 5rem) 1rem;
}

.dupr-history-access-card {
    width: min(100%, 36rem);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.75rem;
    background: rgb(var(--color-bg-surface));
    box-shadow: 0 18px 42px rgb(15 23 42 / 0.08);
}

/* Create match form card — matches create-page-tool-card */
#dupr-match-form-wrap {
    border: 1px solid rgb(var(--color-border-default)) !important;
    border-radius: 0.95rem !important;
    background: rgb(var(--color-bg-canvas)) !important;
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    padding: 1.25rem !important;
    margin-bottom: 1.5rem;
}

/* Normalized height for all toggle-style buttons in the create form */
.dupr-create-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Keep create-match inputs/selects on a bright white surface. */
#dupr-match-form-wrap .dupr-create-field,
#create-dupr-match-form-wrap .dupr-create-field {
    background-color: rgb(255 255 255) !important;
    border-color: rgb(var(--color-border-default)) !important;
    color: rgb(var(--color-text-primary)) !important;
}

#dupr-match-form-wrap input.dupr-create-field,
#dupr-match-form-wrap select.dupr-create-field,
#create-dupr-match-form-wrap input.dupr-create-field,
#create-dupr-match-form-wrap select.dupr-create-field {
    background-color: rgb(255 255 255) !important;
}

/* Single-row form layout: text fields flex-grow, buttons auto-width */
.dupr-create-form-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: end;
}

/* Mobile column spans: 3/2 split for event name/date, full-width for location */
.dupr-create-col-event { grid-column: span 3; }
.dupr-create-col-date  { grid-column: span 2; }
.dupr-create-col-loc   { grid-column: span 5; }

/* Buttons wrapper: full-width on mobile with internal 3-col grid; dissolves into parent grid on desktop */
.dupr-create-buttons-row {
    grid-column: span 5;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .dupr-create-form-row {
        grid-template-columns: 1fr 0.7fr 1fr 7rem 7rem 7rem;
    }
    .dupr-create-col-event,
    .dupr-create-col-date,
    .dupr-create-col-loc { grid-column: auto; }
    .dupr-create-buttons-row { display: contents; }
}

/* Runtime-style score section */
.dupr-create-games-grid {
    display: grid;
    gap: 0.75rem;
}

.dupr-create-games-grid.dupr-create-games-1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 21.25rem;
}

.dupr-create-games-grid.dupr-create-games-3 {
    grid-template-columns: minmax(0, 1fr);
    max-width: 21.25rem;
}

.dupr-create-game-block {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.6rem;
    background: rgb(var(--color-bg-subtle));
    padding: 0.62rem;
}

.dupr-create-game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.dupr-create-game-row + .dupr-create-game-row {
    margin-top: 0.25rem;
}

.dupr-create-team-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    color: rgb(var(--color-text-primary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dupr-create-score-cell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.dupr-create-score-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 2.9rem;
    gap: 0.45rem;
    align-items: center;
}

.dupr-create-score-group.dupr-create-score-group-single {
    grid-auto-columns: 3rem;
}

.dupr-score-input {
    width: 100%;
    border: 1px solid rgb(var(--color-ocean-blue));
    border-radius: 0.45rem;
    text-align: center;
    padding: 0.15rem 0.25rem;
    font-size: 0.9rem;
    color: rgb(var(--color-ocean-blue));
    background: rgb(var(--color-surface-2));
    box-shadow: inset 0 0 0 1px rgb(var(--color-ocean-blue) / 0.14);
}

.dupr-score-input:focus {
    outline: 2px solid rgb(var(--color-focus-ring));
    outline-offset: 1px;
}

.dupr-score-input::placeholder {
    color: rgb(var(--color-gray-400));
    font-weight: 400;
}

/* Score block container */
.dupr-create-score-block {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.6rem;
    background: rgb(var(--color-bg-subtle));
    padding: 0.62rem;
    max-width: 20rem;
}

.dupr-create-score-block.dupr-create-score-block-bo3 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 40rem;
}

/* White sub-container for each game in Best of 3 */
.dupr-create-game-inner {
    flex: 1;
    min-width: 0;
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.45rem;
    background: rgb(var(--color-bg-surface));
    padding: 0.5rem;
}

/* Game rows section inside best-of-3 score block */
.dupr-create-match-games {
    margin-top: 0.5rem;
    border-top: 1px solid rgb(var(--color-border-default));
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Game label column */
.dupr-create-game-label {
    flex: 1 1 auto;
    font-size: 0.8rem;
    color: rgb(var(--color-text-secondary));
}

.dupr-create-game-optional {
    color: rgb(var(--color-gray-400));
    font-weight: 400;
}

/* Paired score inputs */
.dupr-create-score-pair {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Match history header: h2 + reconcile share a row on mobile; filters wrap below.
   On desktop, h2 is left, filters + reconcile are right via ordering. */
.dupr-history-match-header-filters {
    width: 100%;
}

/* Mobile: increase row-gap between header row and filters row to match create-match spacing */
.dupr-history-match-header {
    row-gap: 0.875rem;
}

@media (max-width: 767px) {
    /* Reduce gap between create-match header row and the form content below.
       ID selector needed to beat space-y-4's specificity. */
    #dupr-match-form-wrap .dupr-create-header-row + * {
        margin-top: 0.875rem;
    }
}

/* Mobile: event filter expands to fill its row */
.dupr-history-event-filter-wrap { width: 100%; }
.dupr-history-event-filter-wrap .dupr-history-filter-picker { width: 100%; }

@media (min-width: 768px) {
    .dupr-history-match-header { flex-wrap: nowrap; align-items: center; column-gap: 0.5rem; }
    .dupr-history-match-header-h2 { flex: none; }
    .dupr-history-match-header-filters { order: 1; width: auto; margin-left: auto; flex-wrap: nowrap; }
    .dupr-history-match-header-reconcile { order: 2; }
    .dupr-history-event-filter-wrap { width: auto; }
    .dupr-history-event-filter-wrap .dupr-history-filter-picker { width: auto; }
}

/* Match history card — matches #dupr-match-form-wrap */
.dupr-history-match-history-card {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.95rem;
    background: rgb(var(--color-bg-canvas));
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    padding: 1.25rem;
}

/* Webhook panel is a top-level sibling card — same level as match form / history */
#dupr-webhook-panel {
    background: rgb(var(--color-bg-canvas)) !important;
    border-color: rgb(var(--color-border-default)) !important;
}

/* Match format / game format / scoring toggle buttons sit inside the canvas card */
[id="create-dupr-match-reset"],
[id="dupr-create-format"],
[id="dupr-create-game-format"],
[id="dupr-create-match-type"],
[data-toggle-create-dupr-match-format],
[data-toggle-create-dupr-game-format],
[data-toggle-create-dupr-match-type] {
    background-color: rgb(var(--color-sand) / 0.32) !important;
    border-color: rgb(var(--color-border-default)) !important;
}

[id="create-dupr-match-reset"]:hover,
[id="dupr-create-format"]:hover,
[id="dupr-create-game-format"]:hover,
[id="dupr-create-match-type"]:hover,
[data-toggle-create-dupr-match-format]:hover,
[data-toggle-create-dupr-game-format]:hover,
[data-toggle-create-dupr-match-type]:hover {
    background-color: rgb(var(--color-sand) / 0.46) !important;
}

/* Match history rows and webhook event rows inside their canvas-colored parent cards */
#dupr-match-history-list > div,
#dupr-webhook-list > div {
    background-color: rgb(var(--color-bg-subtle)) !important;
}

/* Mobile score block: thin divider between team rows, matching homepage round-inner-divider style */
.dupr-history-score-divider {
    height: 1px;
    background-color: rgb(var(--color-accent-deep-blue) / 0.5);
    margin: 0.25rem 0;
}

/* Filter pickers in the match history header should always be bright white */
.dupr-history-filter-picker {
    background-color: rgb(255 255 255) !important;
    color: rgb(var(--color-text-primary));
}

/* ─── 1080px breakpoint ────────────────────────────────────────────────────────
   6-column grid replacing the auto-placed desktop layout.
   Row 1: Event Name (2) | Date (2) | Location (2)
   Row 2: Match Format (2) | Game Format (2) | Scoring (2)
   Rows 3–4: each player select spans 3 → 2 per row
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1079px) {
    .dupr-create-form-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .dupr-create-col-event { grid-column: span 2; }
    .dupr-create-col-date  { grid-column: span 2; }
    .dupr-create-col-loc   { grid-column: span 2; }

    /* Row 2: buttons-row spans full width and keeps its internal 3-col grid */
    .dupr-create-buttons-row {
        grid-column: span 6;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    /* Rows 3–4: each player cell spans 3 of 6 cols → 2 per row */
    #create-dupr-match-form-wrap .grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #create-dupr-match-form-wrap .grid > * {
        grid-column: span 3;
        min-width: 0;
    }
}