span.match-data-label {
    /* font-weight: bold; */
    margin-right: 8px;
    width: 120px;
}

.match-data-input {
    padding: 3px;
    width: 200px;
}

.event-data-input-label {
    width: 170px;
    margin: auto;
}

.event-data-input {
    padding: 3px;
    width: 200px;
    text-align: center;
}

.event-select-button {
    width: 150px;
    padding: 3px;
    margin: 5px;
}

.event-team-input {
    /* want the radio buttons consistently aligned */
    padding-left: 20px;
    text-align: left;
}

.viewable-field-label {
    margin-left: 5px;
}

/* Shot diagram */
.shots-diagram-wrapper { 
    max-width: 420px; 
    width: 100%; 
}
.shots-diagram { 
    width: 100%; 
    height: auto; 
    cursor: pointer; 
}
.shot-zone { 
    fill: #2563eb11; 
    stroke: #2563eb66; 
    stroke-width: 2; 
    transition: fill 0.15s, stroke 0.2s; 
}
.shot-zone:hover { 
    fill: #2563eb33; 
    stroke: #1e40af; 
}
.shot-zone.active { 
    fill: #2563eb77; 
    stroke: #1e3a8a; 
}
.shot-zone-label { 
    font-size: 10px; 
    text-anchor: middle; 
    pointer-events: none; 
    fill: #333; 
}
.shot-legend { 
    text-align: center; 
}

/* Goal grid (shotToLocation) */
.goal-grid-wrapper { 
    max-width: 200px; 
    width: 100%; 
}
.goal-grid { 
    width: 100%; 
    height: auto; 
    cursor: pointer; 
}
.goal-cell { 
    fill: #16a34a11; 
    stroke: #16a34a55; 
    stroke-width: 2; 
    transition: fill 0.15s, stroke 0.2s; 
}
.goal-cell:hover { 
    fill: #16a34a33; 
    stroke: #15803d; 
}
.goal-cell.active { 
    fill: #16a34a77; 
    stroke: #166534; 
}




/* events table */
.events-table.table td, .events-table.table th { 
    padding: .25rem .35rem; 
    white-space: normal; 
}
.events-table .btn { 
    padding: .125rem .35rem; 
    line-height: 1; 
}


@media (max-width: 767px) {
    .container {
        max-width: 90%;
    }

    .events-table td {
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .hide-600 { 
        display: none !important; 
    }
}

@media (max-width: 500px) {
    .container {
        max-width: 99%;
    }

    .hide-500 { 
        display: none !important; 
    }
}


.fields-selector-panel {
    max-height: 70vh;
    overflow: auto;
}
.fields-selector-item:hover { background: rgba(0,0,0,0.03); }
@media (max-width: 500px) {
    .fields-selector-panel { width: min(92vw, 520px); }
}



:root {
  --hx-bg:#041122; 
  --hx-surface:#0A223D; 
  --hx-border:#113b5e; 
  --hx-primary:#147DFF; 
  --hx-accent:#7BFF4D; 
  --hx-text:#E9F6FF; 
  --hx-muted:#7c8fa3;
}

.lx-header { background:var(--hx-bg); color:var(--hx-text); box-shadow:0 2px 6px rgba(0,0,0,.4); position:sticky; top:0; z-index:50; }
.lx-inner { display:flex; align-items:center; justify-content: space-around; gap:2rem; padding:.75rem 1.25rem; }
.lx-brand { font-size:1.35rem; font-weight:600; letter-spacing:.5px; cursor:pointer; user-select:none; }
.lx-brand .accent { color:var(--hx-primary); }
.lx-burger { display:none; flex-direction:column; gap:4px; background:none; border:none; padding:4px; cursor:pointer; }
.lx-burger span { width:22px; height:2px; background:var(--hx-text); transition:.3s; }

.lx-nav { display:flex; gap:1.25rem; font-size:.9rem; }
.lx-nav-link { position:relative; text-decoration:none; color:var(--hx-muted); padding:.3rem .2rem; transition:.25s; }
.lx-nav-link:hover { color:var(--hx-text); }
.lx-nav-link.active { color:var(--hx-primary); max-width:100px; }
.lx-nav-link.active::after, .lx-nav-link:hover::after { width: 75px; }
.lx-nav-link::after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--hx-primary); transition:.25s; border-radius:2px; }

.lx-right { margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.lx-user { font-size:.8rem; background:var(--hx-surface); padding:.35rem .65rem; border-radius:18px; border:1px solid var(--hx-border); }
.btn-login { background:var(--hx-primary); color:#fff; border:none; padding:.4rem .9rem; font-size:.75rem; border-radius:5px; cursor:pointer; }
.btn-login:hover { filter:brightness(1.1); }
.theme-toggle { background:var(--hx-surface); color:var(--hx-accent); border:1px solid var(--hx-border); padding:.4rem .6rem; border-radius:6px; cursor:pointer; font-size:.85rem; line-height:1; }
.theme-toggle:hover { color:var(--hx-primary); }

/* Mobile */
@media (max-width: 900px) {
  .lx-inner { gap:1rem; }
  .lx-burger { display:flex; margin:auto; }
    /* Mobile dropdown nav: match header background and animate height */
    .lx-nav { 
        position:absolute; top:100%; left:0; right:0; 
        background:var(--hx-bg); 
        flex-direction:column; gap:.25rem; 
        box-shadow:0 4px 12px rgba(0,0,0,.4);
        /* animated reveal */
        max-height:0; overflow:hidden; opacity:0; pointer-events:none;
        padding:0 1rem; 
        transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
    }
    .lx-nav.open { 
        display:flex; 
        max-height:300px; opacity:1; pointer-events:auto; 
        padding:.75rem 1rem;
    }
  .lx-nav-link { padding:.5rem .25rem; }
  /* .lx-right { display:flex; align-items:center; gap:.75rem; } */
}

/* Sport energy pulse accent on active */
:root[data-theme='sport'] .lx-nav-link.active { text-shadow:0 0 6px rgba(20,125,255,.6); }

.lx-inline-login { display:flex; gap:.5rem; align-items:center; }
.lx-input { background:var(--hx-surface); color:var(--hx-text); border:1px solid var(--hx-border); padding:.35rem .55rem; border-radius:5px; font-size:.8rem; min-width:160px; }
.lx-input::placeholder { color:var(--hx-muted); }

/* Auth panel responsive layout */
.lx-auth-panel { max-width:640px; margin:0 auto; }
.lx-auth-tabs button.disabled { pointer-events:none; opacity:.85; }
.lx-auth-form { }
.lx-auth-fields { display:flex; gap:1rem; align-items:flex-end; flex-wrap:nowrap; }
.lx-auth-field { flex:1 1 0; min-width:160px; }
@media (max-width: 600px) {
    .lx-auth-fields { flex-direction:column; align-items:stretch; }
}

/* Footer */
.lx-footer { background: var(--hx-bg); color: var(--hx-text); border-top: 1px solid var(--hx-border); margin-top: 2rem; }
.lx-foot-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; padding: 1.25rem; }
.lx-foot-brand { display:flex; flex-direction:column; gap:.35rem; }
.lx-foot-logo { font-size: 1.1rem; font-weight: 600; letter-spacing: .4px; }
.lx-foot-logo .accent { color: var(--hx-primary); }
.lx-foot-tag { font-size: .8rem; color: var(--hx-muted); }
.lx-foot-col { }
.lx-foot-title { font-size: .85rem; font-weight: 600; margin-bottom: .35rem; color: var(--hx-text); }
.lx-foot-list { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap:.25rem; }
.lx-foot-link { color: var(--hx-muted); text-decoration: none; font-size: .9rem; }
.lx-foot-link:hover { color: var(--hx-text); text-decoration: underline; }
.lx-foot-text { color: var(--hx-muted); font-size: .9rem; }
.lx-foot-bottom { display:flex; justify-content:space-around; align-items:center; gap:1rem; border-top: 1px solid var(--hx-border); padding: .75rem 1.25rem; font-size: .85rem; color: var(--hx-muted); }
.lx-foot-bottom .sep { opacity:.5; margin: 0 .35rem; }