/* Sports Network • UX upgrade / isolated enhancements on public and role portals */
:root{--ux-ink:#15324a;--ux-green:#0d785c;--ux-sky:#2369bc;--ux-orange:#de623f;--ux-violet:#7651c6;--ux-stroke:#dde8eb;--ux-shadow:0 16px 34px rgba(19,49,72,.075)}
/* Home quick-access strip: rich editorial heading rather than a plain label */
body.public-site.page-index .sport-hub-section{position:relative;padding-top:18px!important}
body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 26px!important;margin-bottom:18px!important;border:1px solid #d8eae9;border-radius:23px;background:linear-gradient(110deg,#e7f7f1 0%,#edf6ff 55%,#f8efff 100%);box-shadow:var(--ux-shadow)}
body.public-site.page-index .sport-hub-hero-heading:before{content:"";position:absolute;inset:-30px;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.75),rgba(255,255,255,.76));filter:blur(13px);opacity:.24}
body.public-site.page-index .sport-hub-hero-heading h2{color:#123147!important;margin:3px 0 0!important;font-size:clamp(21px,2.5vw,30px)!important;line-height:1.25!important}
body.public-site.page-index .sport-hub-hero-heading h2 span{color:#087f65!important}
body.public-site.page-index .sport-hub-hero-heading p{font-size:13px!important;font-weight:700!important;color:#35596c!important;margin:0!important}
body.public-site.page-index .sport-hub-grid{gap:13px!important;align-items:stretch}
body.public-site.page-index .sport-hub-link{border:1px solid #e0e9f0!important;border-top:4px solid var(--hub-accent,#087f65)!important;border-radius:19px!important;box-shadow:0 9px 19px rgba(19,49,72,.07)!important;transition:transform .18s ease,box-shadow .18s ease!important}
body.public-site.page-index .sport-hub-link:hover,body.public-site.page-index .sport-hub-link:focus-visible{transform:translateY(-5px)!important;box-shadow:0 16px 30px rgba(19,49,72,.15)!important;outline-color:var(--hub-accent)}
body.public-site.page-index .sport-hub-icon{background:color-mix(in srgb,var(--hub-accent) 10%,white)!important;color:var(--hub-accent)!important}
/* Event start countdown: no date is fabricated; shows placeholder until configured */
.event-countdown-section{padding:18px 0 3px!important}
.event-countdown{max-width:1380px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border:1px solid #d8e9e7;border-radius:22px;background:linear-gradient(110deg,#fff,#f3faf9 67%,#f5f3fd);box-shadow:var(--ux-shadow)}
.countdown-intro{min-width:0;display:flex;align-items:center;gap:14px}
.countdown-icon{flex:0 0 50px;width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#dff4ed;color:#0c7d61;font-size:30px;font-weight:800}
.countdown-intro small{display:block;font-size:10px;font-weight:850;letter-spacing:.12em;color:#08765e}
.countdown-intro strong{display:block;color:#173348;font-size:clamp(15px,2vw,20px);line-height:1.4;margin:3px 0}
.countdown-intro div>span{font-size:12px;color:#617587}
.countdown-numbers{display:grid;grid-template-columns:repeat(4,minmax(55px,1fr));gap:8px;flex:0 0 auto}
.countdown-numbers>div{min-width:70px;text-align:center;background:#fff;border:1px solid #e0e8ef;border-radius:13px;padding:8px 12px}
.countdown-numbers b{display:block;color:#0c755d;font-size:clamp(20px,2.4vw,30px);font-variant-numeric:tabular-nums;line-height:1.2}
.countdown-numbers span{font-size:11px;color:#687989;font-weight:700}
.countdown-cta{flex:0 0 auto;padding:11px 16px;border-radius:12px;color:#fff!important;-webkit-text-fill-color:#fff!important;background:#08765a;font-size:13px;font-weight:800;text-decoration:none}
/* Registration uses steps and hides optional reference legend until needed */
body.public-site .registration-form-compact{max-width:1050px!important;background:#fff!important;box-shadow:0 16px 38px rgba(20,49,72,.08)!important;border-radius:24px!important}
.registration-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 12px}
.registration-steps span{display:grid;place-items:center;min-height:40px;padding:7px;text-align:center;background:#edf6f3;border:1px solid #cce6db;border-radius:11px;color:#155c48;font-size:12px;font-weight:800}
body.public-site .registration-form-compact .registration-guidance{display:block!important;margin:14px 0!important;padding:0!important;background:#f8fafc!important;border:1px solid #e0e9ee!important;border-radius:14px!important}
body.public-site .registration-form-compact .registration-guidance>summary{list-style:none;cursor:pointer;padding:13px 17px;font-size:13px;font-weight:800;color:#286657}
body.public-site .registration-form-compact .registration-guidance>summary::before{content:"ⓘ ";color:#0e8869}
body.public-site .registration-form-compact .registration-guidance>summary::-webkit-details-marker{display:none}
body.public-site .registration-form-compact .registration-guidance .registration-guidance-head,body.public-site .registration-form-compact .registration-guidance .participant-code-grid{margin-left:16px!important;margin-right:16px!important}
body.public-site .registration-form-compact .registration-guidance .participant-code-grid{margin-bottom:16px!important}
body.public-site .registration-form-compact .registration-block{border:1px solid #e0e8ed!important;background:#f9fbfc!important;padding:18px!important;border-radius:17px!important;margin-top:13px!important}
body.public-site .registration-form-compact .registration-block-title{margin-bottom:11px!important}
body.public-site .registration-form-compact .athlete-member-card,body.public-site .registration-form-compact .staff-registration-card{background:#fff!important;border:1px solid #dde9ec!important;box-shadow:0 3px 12px rgba(20,50,70,.04)!important}
body.public-site .registration-form-compact .registration-field input,body.public-site .registration-form-compact .registration-field select{font-size:14px!important;min-height:44px!important;border-color:#d2e1e7!important;background:#fff!important}
body.public-site .registration-form-compact .registration-field.is-invalid input,body.public-site .registration-form-compact .registration-field.is-invalid select,body.public-site .registration-form-compact .registration-field.is-invalid textarea{border:2px solid #d82739!important;background:#fff2f4!important;box-shadow:0 0 0 3px rgba(216,39,57,.1)!important;color:#7b1222!important}
.registration-field.is-invalid label{color:#bc2032!important;font-weight:900!important}
.registration-field.is-invalid::after{content:"กรุณากรอกข้อมูลช่องนี้ให้ครบ";display:block;color:#bb1d31;font-size:11px;font-weight:750;margin-top:5px}
.registration-validation-dialog{border:0;padding:0;border-radius:23px;max-width:min(430px,calc(100vw - 32px));width:100%;box-shadow:0 25px 70px rgba(12,28,49,.3);background:#fff;color:#243547}
.registration-validation-dialog::backdrop{background:rgba(13,28,43,.54);backdrop-filter:blur(3px)}
.registration-validation-inner{padding:25px 25px 20px}
.registration-validation-icon{width:52px;height:52px;border-radius:15px;background:#ffedf0;color:#cf263e;font-size:30px;display:grid;place-items:center;margin-bottom:10px}
.registration-validation-inner h2{font-size:21px;color:#ad1d31;margin:8px 0}
.registration-validation-inner p{color:#536478;line-height:1.6;font-size:14px}
.registration-validation-inner .missing-count{background:#fff2f4;border:1px solid #ffd0d8;border-radius:12px;padding:10px;margin:12px 0;color:#9f2636;font-size:13px;font-weight:700}
.registration-validation-inner button{border:0;background:#c8223c;color:#fff;-webkit-text-fill-color:#fff;border-radius:12px;padding:12px 18px;font-size:14px;font-weight:800;cursor:pointer;width:100%}
/* School/admin/committee portals: accessible menu and consistently readable logout */
.portal-menu-caption{font-size:10px;font-weight:900;letter-spacing:.11em;color:#cbd9ec;margin:15px 8px 5px;padding:7px 8px 3px;border-top:1px solid rgba(255,255,255,.16)}
body.committee-body .portal-menu-caption,body.user-body .portal-menu-caption{color:#d4c9f4}
body.admin-body .admin-menu a,body.user-body .user-menu a{min-height:41px!important;font-size:12.5px!important;padding:9px 12px!important;line-height:1.45!important}
body.admin-body .admin-menu a.active,body.user-body .user-menu a.active{outline:1px solid rgba(255,255,255,.21);box-shadow:inset 3px 0 #ffd17a!important}
body.admin-body .portal-topbar-logout,body.user-body .portal-topbar-logout,body.committee-body .portal-topbar-logout{color:#fff!important;-webkit-text-fill-color:#fff!important;background:#bd3449!important;border:1px solid #a9273b!important;box-shadow:0 5px 15px rgba(110,25,45,.16)!important;opacity:1!important}
body.admin-body .portal-topbar-logout span,body.user-body .portal-topbar-logout span,body.committee-body .portal-topbar-logout span{color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;visibility:visible!important}
body.admin-body .portal-topbar-logout:hover,body.user-body .portal-topbar-logout:hover{background:#9f2038!important}
body.user-body .user-menu .portal-nav-highlight{background:#e2f7e8!important;color:#174e35!important;-webkit-text-fill-color:#174e35!important;font-weight:900!important;border-radius:12px!important;box-shadow:inset 3px 0 #32a16b}
/* Athlete images: preview with click and keyboard; larger on phones */
img[data-photo-zoom]{cursor:zoom-in;object-fit:cover!important;border-radius:11px!important;border:2px solid #d6e6ed!important;min-width:62px;width:62px!important;height:76px!important;box-shadow:0 5px 12px rgba(26,43,64,.13)!important;transition:transform .17s}
img[data-photo-zoom]:hover{transform:scale(1.05)}
.athlete-photo-dialog{border:0;padding:14px;border-radius:22px;max-width:min(95vw,620px);background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.32)}
.athlete-photo-dialog::backdrop{background:rgba(8,25,42,.75)}
.athlete-photo-dialog img{display:block;width:auto;max-width:100%;max-height:75vh;object-fit:contain;border-radius:13px;margin:auto}
.athlete-photo-dialog button{border:0;background:#0d6954;color:#fff;border-radius:10px;padding:8px 18px;margin-bottom:10px;cursor:pointer}
/* Sport directory filter controls */
.sport-directory-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px;margin:10px 0 18px;background:#f3f8fb;border:1px solid #dfecf0;border-radius:17px}
.sport-filter{cursor:pointer;border:1px solid #cfdee7;background:#fff;color:#31566c;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:800}
.sport-filter:hover,.sport-filter:focus-visible{background:#e1f3eb}
.sport-filter.is-active{background:#0b765b!important;border-color:#0b765b;color:#fff!important;-webkit-text-fill-color:#fff!important}
.sport-directory-search{margin-left:auto;min-width:190px!important;max-width:260px;width:100%;height:41px!important;padding:8px 12px!important;border-radius:11px!important;border:1px solid #cbdce8!important;background:#fff!important;font-size:13px!important}
.sport-event-row[hidden],.sport-manage-row[hidden],.sport-menu-card[hidden],.admin-sport-group[hidden],.sport-filter-empty[hidden]{display:none!important}
.sport-filter-empty{color:#536f80;padding:22px;text-align:center}
.sport-event-row{align-items:center}
.sport-event-badges{gap:7px}
.competition-setting{margin-top:16px;padding:16px;border-radius:15px;background:#edf6f5;border:1px solid #cee6df}
.competition-setting label{display:block!important;font-weight:900;color:#144c42}
.competition-setting input{width:100%;margin-top:8px}
.competition-setting small{display:block;font-size:12px;color:#526b76;line-height:1.5;margin-top:7px}
/* illustrated step-by-step guide */
.guide-page{max-width:1050px!important}
.guide-page-hero{padding:32px;background:linear-gradient(135deg,#e6f7ef,#eaf4ff);border:1px solid #d8e9ea;border-radius:24px;margin-bottom:18px}
.guide-page-hero h1{margin:5px 0;font-size:clamp(25px,4vw,38px);color:#13394e}
.guide-page-hero p{color:#526b7d;line-height:1.7}
.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.guide-step-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.guide-step{border-radius:19px;overflow:hidden;background:white;border:1px solid #e0e9ef;box-shadow:var(--ux-shadow)}
.guide-step img{display:block;aspect-ratio:16 / 9;width:100%;height:auto;object-fit:cover;background:#ecf5f5}
.guide-step>div{padding:18px 20px}
.guide-step span{font-size:12px;color:#0c8163;font-weight:900;letter-spacing:.07em}
.guide-step h2{font-size:19px;color:#13394e;margin:7px 0}
.guide-step p,.guide-help p{line-height:1.7;color:#536a7a;margin:5px 0;font-size:14px}
.guide-help{background:#f4f8fb;border:1px solid #e0e9ef;border-radius:18px;padding:20px 24px;margin:20px 0}
.guide-help h2{font-size:20px;color:#173747}
@media(max-width:900px){.countdown-numbers>div{min-width:58px;padding:8px}.event-countdown{padding:14px 16px}.sport-directory-search{max-width:none!important;flex:1 1 100%;margin:3px 0 0}}
@media(max-width:640px){body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading{padding:16px!important;display:block!important}body.public-site.page-index .sport-hub-hero-heading p{margin-top:8px!important}.event-countdown{flex-direction:column;align-items:stretch!important;padding:14px}.countdown-intro{gap:9px}.countdown-icon{width:40px;height:40px;flex-basis:40px;font-size:24px}.countdown-numbers{width:100%;gap:5px}.countdown-numbers>div{min-width:0;padding:8px 5px}.countdown-numbers b{font-size:22px}.countdown-cta{text-align:center}.registration-steps{grid-template-columns:1fr 1fr 1fr;gap:4px}.registration-steps span{font-size:10px;padding:6px 3px}.guide-step-grid{grid-template-columns:1fr}.guide-page-hero{padding:23px 18px}body.public-site .registration-form-compact .registration-block{padding:13px!important}img[data-photo-zoom]{width:88px!important;height:108px!important;min-width:88px!important}.user-body .user-table-photo{max-width:none!important}.admin-body .admin-athlete-photo.small{max-width:none!important}.portal-topbar-logout{min-height:37px!important}.sport-filter{flex:1 1 auto;font-size:12px;padding:8px}.sport-directory-filters{padding:9px}}
@media(prefers-reduced-motion:reduce){.sport-hub-link,img[data-photo-zoom]{transition:none!important}}

/* Registration list visual clarity */
.user-body .user-registration-card{padding:17px 19px!important;border-radius:17px!important;background:#fff!important;border:1px solid #dce8ec!important;box-shadow:0 5px 14px rgba(18,59,72,.045)!important}
.user-body .user-registration-card h3{font-size:17px!important;color:#0d604e!important}
.user-body .user-registration-meta{gap:7px!important;margin:12px 0!important}
.user-body .user-registration-meta>div{background:#f3f8fb!important;padding:9px 11px!important;border-color:#e1e9ed!important}
.user-body .user-registration-meta strong{font-size:14px!important}
.user-body .user-athlete-chips{gap:5px!important}
.user-body .user-athlete-chips>span{background:#ebf6f1!important;color:#125a49!important}
.user-guide-inline{font-size:12px;color:#0e7256;font-weight:800;text-decoration:none;display:inline-block;margin-top:4px}
.admin-registration-search{padding:12px 14px;margin:15px 0 10px;background:#f2f8f9;border:1px solid #dce9eb;border-radius:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-registration-search label{font-size:13px;font-weight:850;color:#284d57}
.admin-registration-search input{min-width:240px;width:min(480px,100%);height:40px;padding:8px 13px!important;border:1px solid #d2e2e6!important;border-radius:10px!important;background:#fff!important}
.admin-registration-search small{font-size:11px;color:#69808b}
.admin-registration-sport-group[hidden],tr[data-registration-search][hidden]{display:none!important}
@media(max-width:640px){.user-body .user-registration-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}.user-body .user-registration-card-head{display:flex!important;flex-wrap:wrap}.admin-registration-search input{min-width:0;flex-basis:100%}}