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

.create-page-nav-shell,
.create-page-state-card,
#create-page-content {
    width: min(100% - 2rem, 72rem);
    margin: 0 auto;
}

.create-page-nav-shell {
    box-sizing: border-box;
}

.create-page-state-card {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.85rem;
    background: rgb(var(--color-bg-subtle));
    box-shadow: 0 18px 42px rgb(15 23 42 / 0.08);
}

.create-page-kicker,
.create-page-tool-kicker {
    margin: 0 0 0.45rem;
    color: rgb(var(--color-ocean-teal));
    font-size: 0.78rem;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.create-page-tool-header h2 {
    margin: 0;
    color: rgb(var(--color-ocean-blue));
    font-weight: 800;
    line-height: 1.05;
}

.create-page-flash {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
}

.create-page-flash-error {
    background: rgb(254 242 242);
    border-color: rgb(254 202 202);
}

.create-page-flash-error p {
    color: rgb(153 27 27);
}

.create-page-flash-success {
    background: rgb(240 253 244);
    border-color: rgb(187 247 208);
}

.create-page-flash-success p {
    color: rgb(22 101 52);
}

.create-page-tools-grid {
    display: grid;
    gap: 1rem;
}

.create-page-tool-card {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.95rem;
    background: rgb(var(--color-bg-subtle));
    box-shadow: 0 18px 40px rgb(15 23 42 / 0.08);
    padding: 1rem;
}

.create-page-tool-header {
    margin-bottom: 0.9rem;
}

.create-page-tool-header h2 {
    font-size: 1.5rem;
}

.create-page-tool-surface {
    border: 1px solid rgb(var(--color-border-default));
    border-radius: 0.8rem;
    background: rgb(var(--color-bg-canvas));
    padding: 1rem;
}

.create-page-league-surface {
    margin-top: 0;
}

#create-page-content .create-event-field,
#create-page-content input[type="text"],
#create-page-content input[type="date"],
#create-page-content input[type="number"],
#create-page-content select {
    background-color: rgb(var(--color-surface-2)) !important;
    border-color: rgb(var(--color-border-default)) !important;
    box-sizing: border-box;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 1.2;
    min-width: 0;
}

/* Suppress browser-specific chrome that alters rendered height */
#create-page-content input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}


#create-page-content #league-management-player-categories {
    background-color: rgb(var(--color-bg-subtle)) !important;
    border-color: rgb(var(--color-border-default)) !important;
}

.create-page-note {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgb(191 219 254);
    border-radius: 0.75rem;
    background: rgb(239 246 255);
    color: rgb(30 64 175);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Normalized button base — 14px font, 36px height */
.create-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.create-page-btn-primary {
    background: rgb(var(--color-ocean-blue));
    color: #fff;
}
.create-page-btn-primary:hover {
    background: rgb(var(--color-ocean-teal));
}

.create-page-btn-secondary {
    background: rgb(var(--color-bg-canvas));
    color: rgb(var(--color-ocean-blue));
    border-color: rgb(var(--color-ocean-blue));
}
.create-page-btn-secondary:hover {
    background: rgb(var(--color-seafoam-light) / 0.45);
}

.create-page-btn-danger {
    background: rgb(var(--color-bg-canvas));
    color: rgb(220 38 38);
    border-color: rgb(248 113 113);
}
.create-page-btn-danger:hover {
    background: rgb(254 242 242);
}

.create-page-btn-neutral {
    background: rgb(var(--color-bg-canvas));
    color: rgb(55 65 81);
    border-color: rgb(209 213 219);
}
.create-page-btn-neutral:hover {
    background: rgb(var(--color-bg-subtle));
}

.create-page-btn.hidden {
    display: none;
}


@media (min-width: 768px) {
    .create-page-nav-shell,
    .create-page-state-card,
    #create-page-content {
        width: min(100% - 3rem, 72rem);
    }

    .create-page-tools-grid {
        gap: 1.25rem;
    }

    .create-page-tool-card {
        padding: 1.25rem;
    }
}

/* ─── 1080px breakpoint ────────────────────────────────────────────────────────
   Below 1080px, replace the Tailwind md:grid-cols-12 layout with an explicit
   4-column grid. :has() selectors target each wrapper div by the ID of its
   direct-child input/select, so placement is precise and independent of the
   base Tailwind col-span classes. The (2,1,0) specificity of these rules beats
   Tailwind's (0,1,0) class-only md: rules without needing !important.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1079px) {
    .create-page-nav-shell,
    .create-page-state-card,
    #create-page-content {
        width: min(100% - 2rem, 72rem);
    }

    .create-page-tools-grid {
        gap: 1rem;
    }

    /* 4-column grid replaces md:grid-cols-12 */
    #create-event-tools .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Allow every grid item to shrink with the container */
    #create-event-tools .grid > * {
        min-width: 0;
    }

    /* Row 1: Title (2) | Date (1) | Time (1) */
    #create-event-tools .grid > *:has(> #create-event-title-input)    { grid-column: span 2; }
    #create-event-tools .grid > *:has(> #create-event-date-input),
    #create-event-tools .grid > *:has(> #create-event-time-input)     { grid-column: span 1; }

    /* Row 2: Location (2) | Event Type (1) | Format (1) */
    #create-event-tools .grid > *:has(> #create-event-location-input) { grid-column: span 2; }
    #create-event-tools .grid > *:has(> #create-event-type-input),
    #create-event-tools .grid > *:has(> #create-event-format-input)   { grid-column: span 1; }

    /* Row 3: Gender (1) | DUPR (1) | Entitlements (1) | Max Teams (1) */
    #create-event-tools .grid > *:has(> #create-event-gender-input),
    #create-event-tools .grid > *:has(> #create-event-dupr-mode-input),
    #create-event-tools .grid > *:has(> #create-event-dupr-entitlement-input),
    #create-event-tools .grid > *:has(> #create-event-max-teams-input) { grid-column: span 1; }

    /* Row 4: Floor (1) | Cap (1) | Entry Fee (1) | Prize Split (1) */
    #create-event-tools .grid > *:has(> #create-event-skill-floor-input),
    #create-event-tools .grid > *:has(> #create-event-skill-cap-input),
    #create-event-tools .grid > *:has(> #create-event-entry-fee-input),
    #create-event-tools .grid > *:has(> #create-event-prize-split-input) { grid-column: span 1; }
}