html, body, #app { min-height: 100%; }
body { margin: 0; }
.app-container { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.main-content { width: 100%; margin: 0; }
.header-image {
    min-height: 50px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(0deg, rgba(125,125,255,1) 0%, rgba(94,94,255,1) 21%, rgba(0,0,130,1) 100%);
}
.icongroup { height: 100%; text-align: center; }
.iconbutton { border: none; background: transparent; padding: 8px; border-radius: 4px; margin: 0; outline: none; }
.routerlink { display: inline-flex; }
.routerlink.active .iconbutton { background-color: antiquewhite; }
.download-button { background-color: lavenderblush; padding: 2px; display: inline-flex; }
.loading-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(255,255,255,.75); }
.loading-spinner { width: 36px; height: 36px; margin: auto; border: 4px solid #ddd; border-top-color: #000082; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert-message { position: fixed; top: 58px; left: 50%; z-index: 1100; transform: translateX(-50%); padding: 10px 18px; border-radius: 5px; color: #fff; background: #2563eb; box-shadow: 0 3px 12px #0003; }
.alert-message.success { background: #16803c; } .alert-message.error { background: #c62828; }
.actionbutton-add,.actionbutton-cancel,.actionbutton-edit,.actionbutton-save,.actionbutton-email,.actionbutton-calculate { min-width: 40px; }
.actionbutton-info { background-image:url('../icons/info-24.png'); background-color:blue; background-repeat:no-repeat; background-position:center; background-size:20px 20px; width:24px; height:24px; border:0; border-radius:5px; cursor:pointer; }
.team-info-modal { min-width:280px; }
.team-info-name { padding-left:0; }
.team-info-close { display:block; margin:18px auto 0; padding:6px 18px; }
.actionbutton-add { background-image: url('../icons/add-48.png'); background-color: green; }
.actionbutton-cancel { background-image: url('../icons/cancel-48.png'); background-color: red; }
.actionbutton-edit { background-image: url('../icons/edit-48.png'); background-color: blue; }
.actionbutton-save { background-image: url('../icons/save-48.png'); background-color: green; }
.actionbutton-email { background-image: url('../icons/email-48.png'); background-color: green; }
.actionbutton-calculate { background-image: url('../icons/calculate-48.png'); background-color: darkorange; }
.actionbutton-add,.actionbutton-cancel,.actionbutton-edit,.actionbutton-save,.actionbutton-email,.actionbutton-calculate {
    background-repeat: no-repeat; background-position: center; background-size: 28px; height: 40px; border: 0; border-radius: 5px; cursor: pointer; margin: 4px;
}
.actionbutton-logout {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-weight: bold;
}
.actionbutton-up,.actionbutton-down { width: 32px; height: 32px; background-position: center; background-repeat: no-repeat; border: 0; border-radius: 10px; }
.actionbutton-up { background-image: url('../icons/addscore-36.png'); background-color: green; }
.actionbutton-down { background-image: url('../icons/minusscore-36.png'); background-color: red; }
.fullwidth { width: 100%; }
.home-actions,.admin-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin: 20px 0; }
.home-action,.admin-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; text-decoration: none; border-radius: 8px; background: #f5f5ff; color: #000082; }
.leaderboard { max-width: 680px; margin: 12px auto; }
.leaderboard-row { display: grid; grid-template-columns: 52px 1fr 80px; padding: 12px; border-bottom: 1px solid #ddd; }
.leaderboard-position,.leaderboard-points { font-weight: 700; text-align: center; }
.leaderboard-tabs { display: flex; justify-content: center; gap: 8px; }
.leaderboard-tabs .active { background: #000082; color: #fff; }
.filter-dropdown-container,.filter-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.filter-dropdown-container { margin:0 8px; }
.filter-tag { display:flex; align-items:center; gap:5px; padding:4px 8px; border-radius:10px; background:khaki; font-size:11px; }
.filter-tag-remove { border:0; background:transparent; color:#b00020; cursor:pointer; font-size:18px; line-height:1; padding:0; }
.form-field-date,.form-field-time { font-family:inherit; display:block; width:100%; border-radius:4px; padding:4px; overflow:visible; }
.form-field-date { max-width:180px; }
.form-field-time { max-width:120px; }
.actionbutton-add.disabled { cursor:not-allowed; opacity:.4; filter:grayscale(100%) brightness(.8); }
.leaderboard-container { margin:10px auto; display:flex; flex-direction:column; width:min(900px,95%); font-size:14px; }
.leaderboard-headerrow,.leaderboard-player { display:flex; flex-direction:row; }
.leaderboard-header { font-weight:bold; padding:4px; }
.leaderboard-header.rank,.current-leaderboard-rank { width:8%; text-align:center; }
.leaderboard-header.player,.current-leaderboard-name { width:47%; }
.leaderboard-header.scores,.current-leaderboard-scores { width:20%; text-align:center; }
.leaderboard-header.points,.current-leaderboard-points { width:15%; text-align:center; }
.leaderboard-header.gd,.current-leaderboard-goaldiff,.overall-leaderboard-goaldiff { width:10%; text-align:center; }
.current-leaderboard-rank,.current-leaderboard-name,.current-leaderboard-points,.current-leaderboard-goaldiff,.overall-leaderboard-rank,.overall-leaderboard-name,.overall-leaderboard-points,.overall-leaderboard-goaldiff { padding:4px; }
.current-leaderboard-scores { padding:6px; font-size:12px; }
.leaderboard-header.overall-rank,.overall-leaderboard-rank { width:7%; text-align:center; }
.leaderboard-header.change,.overall-leaderboard-change-up,.overall-leaderboard-change-down,.overall-leaderboard-change-same { width:15%; text-align:center; }
.leaderboard-header.overall-player,.overall-leaderboard-name { width:50%; }
.leaderboard-header.overall-points,.overall-leaderboard-points { width:18%; text-align:center; }
.overall-leaderboard-change-up { color:green; }
.overall-leaderboard-change-down { color:red; }
.overall-leaderboard-change-up::before,.overall-leaderboard-change-down::before,.overall-leaderboard-change-same::before { content:""; display:inline-block; width:24px; height:24px; background-size:contain; background-repeat:no-repeat; vertical-align:middle; }
.overall-leaderboard-change-up::before { background-image:url('../icons/arrow-up-green-36.png'); }
.overall-leaderboard-change-down::before { background-image:url('../icons/arrow-down-red-36.png'); }
.overall-leaderboard-change-same::before { background-image:url('../icons/arrow-left-blue-36.png'); }
.toggle-tabs { display:flex; justify-content:center; margin:10px 0; }
.toggle-tab { background:#f0f0f0; border:0; padding:10px 20px; margin:0 4px; cursor:pointer; font-weight:bold; border-radius:4px; }
.toggle-tab.active { background:#007bff; color:#fff; }
.points-badge,.status-pill { display: inline-block; margin: 8px; padding: 4px 9px; border-radius: 99px; background: #eeeeff; color: #000082; font-weight: 700; }
.link-button { border: 0; background: none; color: #06c; text-decoration: underline; cursor: pointer; }
.button-row { display: flex; gap: 10px; margin-top: 12px; }
.settings-note { color: #666; font-size: .9rem; }
.settings-container { width:70%; margin:0 auto; display:flex; flex-direction:row; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:60px; }
.settings-section { display:flex; flex-direction:column; margin:10px; min-width:220px; }
.section-header { margin-top:10px; margin-bottom:10px; font-size:18px; font-weight:bold; color:#0a3d62; text-align:center; }
.notification-toggle { display:flex; align-items:center; gap:12px; margin:10px 0; font-size:16px; }
.switch { position:relative; display:inline-block; width:50px; height:28px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:2px; background-color:#ccc; transition:.4s; border-radius:34px; }
.slider::before { position:absolute; content:""; height:22px; width:22px; left:1px; bottom:1px; background-color:white; transition:.4s; border-radius:50%; box-shadow:0 0 0 1px #bbb; }
.switch input:checked + .slider { background-color:#0a3d62; }
.switch input:checked + .slider::before { transform:translateX(22px); }
.label-text { min-width:200px; }
.notification-toggle.disabled { opacity:.5; pointer-events:none; }
.notification-toggle.disabled .slider { background-color:#aaa; }
.notification-toggle.disabled .slider::before { background-color:#eee; }
.account-settings-warning { width:min(700px,90%); margin:12px auto; color:#9b1c1c; text-align:center; }
@media (max-width:768px) { .settings-container { flex-direction:column; width:100%; gap:0; align-items:center; } .settings-section { width:min(320px,100%); margin:0 auto; padding:10px; box-sizing:border-box; } }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; padding: 10px; background: #fff3cd; z-index: 2000; }
@media (max-width: 600px) {
    .main-content { padding: 0 8px; }
    .page-header { left: 0; }
    .datacard-fullwidth { width: 100%; }
}