/* =============================================================================
   March Madness Bracket Pool — Global Styles
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Custom Properties
   --------------------------------------------------------------------------- */
:root {
    --color-primary:        #0d2f59;
    --color-primary-light:  #1b5eb1;
    --color-primary-pale:   #EDF4FC;
    --color-accent:         #e8872a;
    --color-accent-dark:    #c36800;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f5f6f8;
    --color-border:         #dde1e9;
    --color-text:           #111827;
    --color-text-muted:     #52596e;
    --color-text-inverse:   #ffffff;
    --color-success:        #16a34a;
    --color-danger:         #a40000;
    --color-warning:        #d97706;
    --color-info:           #2563eb;

    /* Pick colours — filled when a team is selected */
    --color-pick:           #0d2f59;
    --color-pick-text:      #fff;

    --font-display:         'Barlow Condensed', sans-serif;
    --font-body:            'Inter', sans-serif;

    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;

    --shadow-sm:            0 1px 3px rgba(0,0,0,.08);
    --shadow-md:            0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:            0 8px 24px rgba(0,0,0,.16);

    --header-height:        40px;
    --container-max:        1400px;
}

/* ---------------------------------------------------------------------------
   Reset & Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family:     var(--font-body);
    color:           var(--color-text);
    background:      var(--color-surface-alt);
    line-height:     1.6;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
}

a { color: var(--color-accent); text-decoration: none; }
/*a:hover { text-decoration: underline; }*/

img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------------
   Site Header
   --------------------------------------------------------------------------- */
.site-header {
    background:      var(--color-primary);
    height:          var(--header-height);
    position:        sticky;
    top:             0;
    z-index:         100;
    box-shadow:      var(--shadow-md);
}

.site-header__inner {
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 1.5rem;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        relative;
}

.site-header__logo {
    display:         flex;
    align-items:     center;
    gap:             .5rem;
    text-decoration: none;
}

.site-header__logo-icon { font-size: 1.4rem; }

.site-header__logo-text {
    font-family:     var(--font-display);
    font-size:       1.5rem;
    font-weight:     700;
    color:           var(--color-text-inverse);
    letter-spacing:  .03em;
    text-transform:  uppercase;
}

.site-header__nav { display: flex; gap: 1.5rem; }

.site-header__countdown {
    position:    absolute;
    left:        50%;
    transform:   translateX(-50%);
    text-align:  center;
    line-height: 1.25;
    pointer-events: none;
}

.site-header__countdown-label {
    font-size:      .55rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          rgba(255,255,255,.55);
}

.site-header__countdown-value {
    font-family:    var(--font-display);
    font-size:      .95rem;
    font-weight:    600;
    letter-spacing: .03em;
    color:          var(--color-accent);
}

.site-header__nav-link {
    font-family:     var(--font-body);
    font-size:       .875rem;
    font-weight:     500;
    color:           var(--color-text-inverse);
    text-decoration: none;
    transition:      color .15s;
    padding:         0 10px 0 10px;
}

.site-header__nav-link:hover { color: var(--color-accent); text-decoration: none; }
.nav-dropdown__trigger:  { color: var(--color-accent); text-decoration: none; }

.site-header__signout { display: flex; align-items: center; padding: 0 6px; }

/* ---------------------------------------------------------------------------
   Site Main & Footer
   --------------------------------------------------------------------------- */
.site-main { flex: 1; }

.site-footer {
    background:  var(--color-primary);
    padding:     1rem 1.5rem;
/*    margin-top:  2.2rem;*/
}

/* ---------------------------------------------------------------------------
   Shared disabled-button tooltip (used on multiple pages)
   --------------------------------------------------------------------------- */
.ui-tooltip {
    position:       fixed;
    z-index:        10000;
    max-width:      220px;
    padding:        .55rem .8rem;
    background:     var(--color-surface);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    box-shadow:     var(--shadow-lg);
    font-size:      .8rem;
    font-weight:    400;
    color:          var(--color-text-muted);
    line-height:    1.45;
    text-align:     center;
    pointer-events: none;
}

.ui-tooltip--interactive {
    pointer-events: auto;
}

.ui-tooltip--interactive:hover {
    color:  var(--color-accent);
}

.ui-tooltip a {
    color:           inherit;
    font:            inherit;
    text-decoration: inherit;
}

.ui-tooltip::before {
    content:    '';
    position:   absolute;
    top:        -5px;
    left:       50%;
    width:      8px;
    height:     8px;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    border-top:  1px solid var(--color-border);
    transform:   translateX(-50%) rotate(45deg);
}

.site-footer__inner {
    max-width:       var(--container-max);
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.site-footer__copy {
    font-size:   .8rem;
    color:       rgba(255,255,255,.5);
}

.site-footer__admin-link {
    font-size:   .8rem;
    color:       rgba(255,255,255,.4);
}

.site-footer__admin-link:hover { color: rgba(255,255,255,.8); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Page Hero
   --------------------------------------------------------------------------- */
.page-hero {
    background:      var(--color-primary);
    padding:         1rem .5rem;
    text-align:      center;
    color:           var(--color-text-inverse);
    margin-bottom:   2.2rem;
}

.page-hero__title {
    font-family:     var(--font-display);
    font-size:       clamp(2rem, 5vw, 3.5rem);
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    line-height:     1.1;
}

.page-hero__subtitle {
    font-size:       1rem;
    color:           rgb(255,255,255,.75);
    margin-top:      .5rem;
}

/* ---------------------------------------------------------------------------
   Container
   --------------------------------------------------------------------------- */
.container {
    /*max-width: var(--container-max);*/
    margin:    0 auto;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.card {
    background:    var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-sm);
    border:        1px solid var(--color-border);
    padding:       1.5rem;
    width:         60%;
}

.card__title {
    font-family: var(--font-display);
    font-size:   1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
    display:         inline-flex;
    align-items:     center;
/*    gap:             .4rem;*/
    padding:         .58rem 1.2rem;
    border-radius:   var(--radius-sm);
    font-family:     var(--font-display);
    font-size:       .9rem;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    transition:      background .15s, transform .1s;
    text-decoration: none;
    line-height:     1.2;
    color: yellow;
}

.btn:active { transform: scale(.98); }

.btn--primary {
    background: var(--color-accent);
    color:      var(--color-text-inverse);
}
.btn--primary:hover { background: var(--color-accent-dark); text-decoration: none; color: #fff; }

.btn--secondary {
    background: var(--color-primary);
    color:      var(--color-text-inverse);
}
.btn--secondary:hover { background: var(--color-primary-light); text-decoration: none; color: #fff; }

.btn--ghost {
    background: transparent;
    color:      var(--color-text-muted);
    border:     1px solid var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-alt); }

.btn--danger {
    background: var(--color-danger);
    color:      var(--color-text-inverse);
}
.btn--danger:hover { background: #b91c1c; text-decoration: none; color: #fff; }

.btn--sm { padding: .2rem .6rem; font-size: .75rem; }
.btn--lg { padding: 1rem 1.2rem; font-size: .9rem; }
.btn--full { width: 100%; justify-content: center; }

.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Button loading spinner — hides text, shows centered spinner */
.btn--loading {
    position:       relative !important;
    pointer-events: none;
    color:          transparent !important;
}
.btn--loading::after {
    content:      '';
    position:     absolute;
    width:        1em;
    height:       1em;
    top:          50%;
    left:         50%;
    margin:       -0.5em 0 0 -0.5em;
    border:       2px solid rgba(255,255,255,.3);
    border-top-color: rgba(255,255,255,.9);
    border-radius: 50%;
    animation:    _btn-spin .65s linear infinite;
}
@keyframes _btn-spin { to { transform: rotate(360deg); } }

/* Brief flash after action completes */
.btn--flash-ok  { background-color: var(--color-success) !important; opacity: 1 !important; }
.btn--flash-err { background-color: #7f1d1d             !important; opacity: 1 !important; }

#submit-btn{
    padding:    7.5px 20px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Form Elements
   --------------------------------------------------------------------------- */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display:       block;
    font-family:   var(--font-display);
    margin-bottom: -.1rem;
    font-size:     10pt;
}

.form-control {
    padding:       .45rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family:   var(--font-body);
    font-size:     .8rem;
    color:         var(--color-text);
    background:    var(--color-surface);
    transition:    border-color .15s, box-shadow .15s;
    appearance:    none;
    width:         100%;
    line-height:   1.2;
}

.form-control:focus {
    outline:      none;
    border-color: var(--color-accent);
    box-shadow:   0 0 0 1px rgba(232,135,42,.15);
}

.form-hint {
    font-size:  .65rem;
    color:      var(--color-text-muted);
    margin-top: .3rem;
}

/* ---------------------------------------------------------------------------
   Alerts / Flash Messages
   --------------------------------------------------------------------------- */
.alert {
    padding:       .85rem 1.1rem;
    width:         100%;
    border-radius: var(--radius-md);
    font-size:     .9rem;
    margin:        20px auto 1.25rem;
    border:        1px solid transparent;
}

.alert--success { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }
.alert--error   { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.alert--warning { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.alert--info    { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }

/* ---------------------------------------------------------------------------
   Leaderboard Table
   --------------------------------------------------------------------------- */
.leaderboard-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       .8rem;
}

.leaderboard-table th {
    text-align:   left;
    padding:      .65rem 1rem;
    font-weight:  600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:        var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    background:   var(--color-primary-pale);
}

.leaderboard-table th[data-sort-col],
.leaderboard-table .champ-col--overall {
    padding-left:  .4rem;
    padding-right: .4rem;
}

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

.leaderboard-table tbody tr:hover { background: var(--color-surface-alt); }
.leaderboard-table tbody tr.league-row--enrolled { background: #fff4eb; }
.leaderboard-table tbody tr.league-row--enrolled:hover { background: #fde0c8; }

.leaderboard-table__champ-super {
    text-align:   center;
    padding-bottom: .1rem;
    font-size:    .7rem;
    letter-spacing: .08em;
    opacity:      .7;
    border-bottom: none !important;
}

#my-brackets-table{
    font-size: .8rem;
}

/* Champion column tints — shared palette with admin.css */
/*
.leaderboard-table th.champ-col--east,
.leaderboard-table td.champ-col--east    { background: #eff6ff; color: #1d4ed8; }
.leaderboard-table th.champ-col--west,
.leaderboard-table td.champ-col--west    { background: #f0fdfa; color: #0f766e; }
.leaderboard-table th.champ-col--south,
.leaderboard-table td.champ-col--south   { background: #fffbeb; color: #92400e; }
.leaderboard-table th.champ-col--midwest,
.leaderboard-table td.champ-col--midwest { background: #faf5ff; color: #7e22ce; }
.leaderboard-table th.champ-col--overall,
.leaderboard-table td.champ-col--overall { background: #f3f4f6; color: #4b5563; }
*/

/*
.leaderboard-table th.champ-col--east,
.leaderboard-table td.champ-col--east    { background: grey; color: darkslategrey; }
.leaderboard-table th.champ-col--west,
.leaderboard-table td.champ-col--west    { background: grey; color: darkslategrey; }
.leaderboard-table th.champ-col--south,
.leaderboard-table td.champ-col--south   { background: grey; color: darkslategrey; }
.leaderboard-table th.champ-col--midwest,
.leaderboard-table td.champ-col--midwest { background: grey; color: darkslategrey; }
.leaderboard-table th.champ-col--overall,
.leaderboard-table td.champ-col--overall { background: grey; color: darkslategrey; }
*/

.rank-badge {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    width:          28px;
    height:         28px;
    border-radius:  50%;
    font-weight:    700;
    font-size:      .8rem;
    background:     var(--color-surface-alt);
    color:          var(--color-text-muted);
}

.rank-badge--gold   { background: #fbbf24; color: #78350f; }
.rank-badge--silver { background: #9ca3af; color: #1f2937; }
.rank-badge--bronze { background: #d97706; color: #fff; }

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger  { color: var(--color-danger); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }

.badge {
    display:       inline-block;
    padding:       .2rem .6rem;
    border-radius: 20px;
    font-size:     .72rem;
    font-weight:   600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.badge--success { background: #dcfce7; color: #14532d; }
.badge--danger  { background: #fee2e2; color: #7f1d1d; }
.badge--warning { background: #fef3c7; color: #78350f; }
.badge--info    { background: #dbeafe; color: #1e3a8a; }
.badge--neutral { background: var(--color-surface-alt); color: var(--color-text-muted); }

/* Info icon button (inline, next to setting labels) */
.info-icon-btn {
    display:    inline-flex;
    align-items: center;
    background: none;
    border:     none;
    padding:    0;
    font-size:  .8rem;
    line-height: 1;
    color:      var(--color-text-muted);
    cursor:     pointer;
    opacity:    .7;
    transition: opacity .15s, color .15s;
}
.info-icon-btn:hover {
    opacity: 1;
    color:   var(--color-primary);
}

.divider{
      border: none;
      border-top: 6px double #ccc;
      margin: 24px auto;
    width: 60%;
}

.leaderboard-username-link:hover{
     text-decoration: underline;
}

.league-admin a {
    color: var(--color-text-muted);
}
.league-admin a:hover {
    color: var(--color-accent);
}