/* =============================================================================
   Admin Panel Styles
   ============================================================================= */

.admin-layout {
    display:   grid;
    grid-template-columns: 0px 1fr;
    gap:       0;
    min-height: calc(100vh - var(--header-height));
    width:     60%;
    margin:    0 auto;
}

.admin-layout2 {
/*
    display:   grid;
    grid-template-columns: 0px 1fr;
    gap:       0;
    min-height: calc(100vh - var(--header-height));
*/
}

/* ---------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------- */
.admin-sidebar {
    background: var(--color-primary);
    padding:    1.5rem 0;
    position:   sticky;
    top:        var(--header-height);
    height:     calc(100vh - var(--header-height));
    overflow-y: auto;
}

.admin-sidebar__section-label {
    font-size:      .68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          rgba(255,255,255,.35);
    padding:        1rem 1.25rem .4rem;
}

.admin-sidebar__nav-link {
    display:    block;
    padding:    .6rem 1.25rem;
    font-size:  .875rem;
    color:      rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .12s, color .12s;
    border-left: 3px solid transparent;
}

.admin-sidebar__nav-link:hover,
.admin-sidebar__nav-link.active {
    background:  rgba(255,255,255,.08);
    color:       #fff;
    text-decoration: none;
    border-left-color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   Main content area
   --------------------------------------------------------------------------- */
.admin-content {
/*    padding:    2rem;*/
    overflow:   auto;
    display:    flex;
/*    width:      100%;*/
    margin:      0 auto;
}

.admin-section {
    margin-bottom: 2.5rem;
    padding: 0 1rem 0 1rem;
}

.admin-section__title {
    font-family:    var(--font-display);
    font-size:      1.35rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          var(--color-primary);
    margin-bottom:  1rem;
    padding-bottom: .5rem;
    border-bottom:  2px solid var(--color-border);
}

/* Collapsible section via <details>/<summary> */
.admin-collapsible { border: none; }

summary.admin-section__title {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    cursor:          pointer;
    list-style:      none;
    user-select:     none;
    margin-bottom:   0;
}
summary.admin-section__title::-webkit-details-marker { display: none; }

summary.admin-section__title::after {
    content:     '';
    display:     inline-block;
    width:       .55em;
    height:      .55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform:   rotate(-45deg);
    transition:  transform .2s ease;
    flex-shrink: 0;
    margin-left: .5rem;
}

details[open] > summary.admin-section__title {
    margin-bottom: 1rem;
}
details[open] > summary.admin-section__title::after {
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
   Stat cards row
   --------------------------------------------------------------------------- */
.admin-stats {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   1rem;
    margin-bottom:         1.5rem;
}

.admin-stat-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       1rem 1.25rem;
    text-align:    center;
}

.admin-stat-card__value {
    font-family: var(--font-display);
    font-size:   2rem;
    font-weight: 700;
    color:       var(--color-primary);
    line-height: 1;
}

.admin-stat-card__label {
    font-size:   .78rem;
    color:       var(--color-text-muted);
    margin-top:  .3rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------------------------------------------------------------------------
   Toggle switch
   --------------------------------------------------------------------------- */
.toggle-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    padding:     .85rem 1rem;
}

.toggle-row__label {
    flex:        1;
    font-size:   .9rem;
    font-weight: 500;
}

.toggle-row__hint {
    font-size: .78rem;
    color:     var(--color-text-muted);
}

/* Champion columns — region tints (mirrors bracket.css region header palette) */
.admin-table th.champ-col--east,
.admin-table td.champ-col--east    { background: #eff6ff; color: #1d4ed8; }
.admin-table th.champ-col--west,
.admin-table td.champ-col--west    { background: #f0fdfa; color: #0f766e; }
.admin-table th.champ-col--south,
.admin-table td.champ-col--south   { background: #fffbeb; color: #92400e; }
.admin-table th.champ-col--midwest,
.admin-table td.champ-col--midwest { background: #faf5ff; color: #7e22ce; }
.admin-table th.champ-col--overall,
.admin-table td.champ-col--overall { background: #f3f4f6; color: #4b5563; }

/* Icon button overlaid on the right side of a form field */
.profile-field-btn {
    position:         absolute;
    right:            .5rem;
    top:              50%;
    transform:        translateY(-50%);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       none;
    border:           none;
    padding:          .2rem;
    cursor:           pointer;
    color:            var(--color-text-muted);
    border-radius:    var(--radius-sm);
    transition:       color .15s, background .15s;
}
.profile-field-btn:hover {
    color:       var(--color-text);
    background:  var(--color-surface);
}

/* HTML checkbox styled as a toggle */
.toggle-switch { float: left; position: relative; display: inline-block; width: 22px; height: 12px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch__slider {
    position:   absolute;
    inset:      0;
    background: #d1d5db;
    border-radius: 12px;
    cursor:     pointer;
    transition: background .2s;
}
.toggle-switch__slider::before {
    content:    '';
    position:   absolute;
    left:       1.5px;
    top:        1.5px;
    width:      9px;
    height:     9px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 .5px 1.5px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-switch__slider { background: var(--color-accent); }
.toggle-switch input:checked + .toggle-switch__slider::before { transform: translateX(10px); }

/* ---------------------------------------------------------------------------
   Admin entries table
   --------------------------------------------------------------------------- */
.admin-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .85rem;
}

.admin-table th {
    text-align:     left;
    padding:        .6rem .9rem;
    font-size:      .72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--color-text-muted);
    background:     var(--color-surface-alt);
    border-bottom:  2px solid var(--color-border);
}

.admin-table td {
    padding:      .65rem .9rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.admin-table tbody tr:hover { background: var(--color-surface-alt); }

.admin-table .actions { display: flex; gap: .4rem; }

/* ---------------------------------------------------------------------------
   Login page
   --------------------------------------------------------------------------- */
.admin-login-wrap {
    min-height:      calc(100vh - var(--header-height) - 80px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2rem;
}

.admin-login-card {
    width:     100%;
    max-width: 380px;
}

.admin-login-card__title {
    font-family:    var(--font-display);
    font-size:      1.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          var(--color-primary);
    text-align:     center;
    margin-bottom:  1.5rem;
}

/* ---------------------------------------------------------------------------
   Admin content sizing variants
   --------------------------------------------------------------------------- */
.admin-content--60 { width: 60%; }
.admin-content--full { width: 100%; }

/* ---------------------------------------------------------------------------
   Admin section collapsible toggle (JS-powered, not <details>)
   --------------------------------------------------------------------------- */
.admin-section__title--collapsible {
    cursor:      pointer;
    user-select: none;
}

/* ---------------------------------------------------------------------------
   Admin table wrapper (horizontal scroll)
   --------------------------------------------------------------------------- */
.admin-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------------------
   Inline action bar inside a stat card
   --------------------------------------------------------------------------- */
.admin-stat-card__action-bar {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}

.admin-stat-card__action-bar-end {
    margin-left: auto;
    display:     flex;
    gap:         .5rem;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Tile grid (League Settings)
   --------------------------------------------------------------------------- */
.admin-tile-grid {
    display:    flex;
    flex-wrap:  wrap;
    gap:        1rem;
}

.admin-tile {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       1.5rem 1.75rem;
    display:       flex;
    flex-direction: column;
    gap:           1.1rem;
}

.admin-tile__header {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}

.admin-tile__body {
    display:   flex;
    flex-wrap: wrap;
    gap:       .6rem;
    align-items: center;
}

.btn--sm {
    font-size: .85rem;
    padding:   .5rem .9rem;
}

/* ---------------------------------------------------------------------------
   Deadline input row
   --------------------------------------------------------------------------- */
.admin-deadline-row {
    display:     flex;
    justify-content: center;
    align-items: center;
}

.admin-deadline-label {
    display:     flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   Scoring mode select row
   --------------------------------------------------------------------------- */
.admin-scoring-row {
    display:     flex;
    align-items: center;
    gap:         .75rem;
}

.admin-scoring-row__select { width: 300px; }

.admin-scoring-row__save-btn { margin-left: auto; }

/* ---------------------------------------------------------------------------
   Textarea save row (right-aligned save button)
   --------------------------------------------------------------------------- */
.admin-textarea-footer {
    display:         flex;
    justify-content: flex-end;
    margin-top:      .5rem;
}

/* ---------------------------------------------------------------------------
   Collapsible section body (hidden by default, toggled by JS)
   --------------------------------------------------------------------------- */
.admin-collapsible-body { display: none; }

/* =============================================================================
   Dashboard — dash-* component system
   ============================================================================= */

/* ---- Stat strip ---- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 80%;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
.dash-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-left: 4px solid var(--accent, var(--color-border));
}
.dash-stat__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: .85;
}
.dash-stat__body { min-width: 0; }
.dash-stat__value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}
.dash-stat__label {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: .25rem;
}
.dash-stat__sub {
    font-size: .7rem;
    color: var(--color-text-muted);
    margin-top: .1rem;
}

/* ---- Two-column settings grid ---- */
.dash-grid {
    display: flex;
    gap: 1.5rem;
    width: 100%;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

/* ---- Full-width sections ---- */
.dash-full {
    width: 100%;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

/* ---- Section card ---- */
.dash-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex:1;
}
.dash-card__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    user-select: none;
}
.dash-card__header .collapse-arrow {
    margin-left: auto;
    transition: transform .2s;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.dash-card__header--static { cursor: default; }
.dash-card__body { padding: .25rem 0; }
.dash-card__section { padding: .6rem 1.1rem 1rem; }
.dash-card__divider {
    height: 1px;
    background: var(--color-border);
    margin: .25rem 0;
}

/* ---- Toggle rows inside dash-card ---- */
.dash-toggle-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
}
.dash-card__body > *:last-child { border-bottom: none; }
.dash-toggle-row__body { flex: 1; min-width: 0; }
.dash-toggle-row__label { font-size: .88rem; font-weight: 500; }
.dash-toggle-row__hint { font-size: .75rem; color: var(--color-text-muted); margin-top: .1rem; }

/* ---- Textarea blocks ---- */
.dash-textarea-block { padding: .75rem 1.1rem 1rem; }
.dash-textarea-block + .dash-textarea-block { border-top: 1px solid var(--color-border); }
.dash-textarea-block__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .4rem;
    display: block;
}
.dash-textarea-footer { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* ---- Alternating row colors ---- */
.dash-card__body > :nth-child(odd)  { background: color-mix(in srgb, #0f766e 26%, var(--color-surface)); }
.dash-card__body > :nth-child(even) { background: color-mix(in srgb, #6b7280 12%, var(--color-surface)); }
.dash-card__body > * { border-bottom: 1px solid var(--color-border); }

/* ---- Control rows (deadline, scoring) ---- */
.dash-control { padding: .75rem 1.1rem; }
.dash-control__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dash-control__label-badge {
    font-size: .65rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dash-control__label-badge--open   { background: #d1fae5; color: #065f46; }
.dash-control__label-badge--closed { background: #fee2e2; color: #991b1b; }
.dash-control__label-badge--none   { background: var(--color-surface-alt); color: var(--color-text-muted); }
.dash-control__row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.dash-control__row .form-control { flex: 1; min-width: 0; }

/* ---- Button flash states ---- */
.btn--flash-ok  { background: var(--color-success, #16a34a) !important; color: #fff !important; border-color: transparent !important; }
.btn--flash-err { background: var(--color-danger,  #dc2626) !important; color: #fff !important; border-color: transparent !important; }

/* ---- Collapsible body ---- */
.dash-collapsible { display: none; }

/* ---- Inline status ---- */
.toggle-status { font-size: .75rem; margin-left: .4rem; }

/* ---- Badge ---- */
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.badge--success { background: #d1fae5; color: #065f46; }
.badge--warning { background: #fef3c7; color: #92400e; }
.badge--danger  { background: #fee2e2; color: #991b1b; }

/* ---- Flash container ---- */
#flash-container { width: 80%; margin: 0 auto 1rem; padding: 0 1rem; }

/* ---- Table polish ---- */
.admin-table tbody tr:last-child td { border-bottom: none; }

/* =============================================================================
   Results Entry — result-card component
   ============================================================================= */

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: .875rem;
    margin-top: 1rem;
}

.result-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding:       .875rem;
    display:       flex;
    flex-direction: column;
    gap:           .5rem;
}

.result-card__header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       .68rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .07em;
    color:           var(--color-text-muted);
}

.result-card__team {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    padding:     .3rem .35rem;
    border-radius: var(--radius-sm);
    transition:  background .15s;
}

.result-card__team--winner { background: rgba(16, 185, 129, .13); }
.result-card__team--loser  { opacity: .4; }

.result-card__seed {
    font-size:   .7rem;
    font-weight: 700;
    color:       var(--color-text-muted);
    min-width:   1.3rem;
    text-align:  right;
    flex-shrink: 0;
}

.result-card__name {
    flex:          1;
    font-size:     .88rem;
    font-weight:   500;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.result-card__score {
    width:      52px;
    text-align: center;
    font-size:  .88rem;
    padding:    .2rem .3rem;
    flex-shrink: 0;
    -moz-appearance: textfield;
}
.result-card__score::-webkit-inner-spin-button,
.result-card__score::-webkit-outer-spin-button { -webkit-appearance: none; }

.result-card__divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     .05rem 0;
}

.result-card__actions {
    display:         flex;
    gap:             .5rem;
    justify-content: flex-end;
    margin-top:      .15rem;
}

.round-heading {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   0;
}

.round-progress {
    font-size:   .8rem;
    font-weight: 400;
    color:       var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   Email campaigns
   --------------------------------------------------------------------------- */
.campaign-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

.campaign-field {
    min-width: 0;
}

.campaign-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

.campaign-preview {
    min-width: 140px;
    padding: .75rem .9rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.campaign-preview__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.campaign-preview__value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: .2rem;
}

.campaign-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    color: var(--color-text);
}

.campaign-test-row {
    display: flex;
    gap: .75rem;
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .campaign-grid {
        grid-template-columns: 1fr;
    }

    .campaign-test-row {
        flex-direction: column;
    }
}