/*
Theme Name: Club Suite Portal
Author: Club Suite
Description: Responsive, lightweight sports club management portal with role-aware sidebar and optimized image sizes.
Version: 0.6.0
Requires PHP: 7.4
Text Domain: club-suite-portal
*/
:root{--cs-ink:#203048;--cs-muted:#8592a4;--cs-accent:#08a6a3;--cs-card:#fff;--cs-line:#e4eaf0;--cs-soft:#eef5f7;--cs-bg:#f7f9fc;--cs-chart-grid:#eef1f5;--cs-sidebar-start:#05aaa6;--cs-sidebar-end:#2374bf;--cs-shadow:0 6px 24px #102d4612;color-scheme:light}
html[data-cs-theme="dark"]{--cs-ink:#e9effb;--cs-muted:#a1afc1;--cs-card:#19263a;--cs-line:#304258;--cs-soft:#25364e;--cs-bg:#0f1a2b;--cs-chart-grid:#32445b;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cs-bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--cs-ink);font-size:14px;line-height:1.56;-webkit-font-smoothing:antialiased}
a{color:#009e9b}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img,video,iframe{max-width:100%;height:auto}
img{display:block;object-fit:contain}
svg{max-width:100%}
:focus-visible{outline:3px solid #ffb83d!important;outline-offset:3px}
[hidden]{display:none!important}
.cs-icon{flex-shrink:0;display:block}
.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}
/* Authenticated app shell */
.cs-app{min-height:100dvh;display:grid;grid-template-columns:246px minmax(0,1fr)}
.cs-sidebar{position:sticky;align-self:start;top:0;height:100vh;height:100dvh;min-width:0;padding:22px 14px 15px;background:linear-gradient(162deg,var(--cs-sidebar-start) 0%,#088fbe 44%,var(--cs-sidebar-end) 100%);color:white;display:flex;flex-direction:column;z-index:90;overflow-x:hidden}
.cs-sidebar:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 0 0,#ffffff23 0,transparent 38%);z-index:-1}
.cs-sidebar-head{display:flex;align-items:center;min-height:55px;padding:0 11px;margin-bottom:22px;justify-content:space-between;gap:6px}
.cs-brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none;min-width:0;font-weight:850;letter-spacing:-.025em;font-size:17px;line-height:1.18}
.cs-brand>span:not(.cs-brand-emblem){display:block;white-space:normal;overflow-wrap:anywhere}
.cs-brand-image{width:44px!important;height:44px!important;object-fit:contain;flex:none;border-radius:12px;background:#fff;padding:4px}
.cs-brand-emblem{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:#ffffff21;border:1px solid #ffffff3b;color:white}
.cs-sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 10px;scrollbar-color:#ffffff70 transparent;scrollbar-width:thin}
.cs-sidebar-caption{font-size:10px;font-weight:800;letter-spacing:.16em;color:#ffffffa1;padding:0 14px;margin:0 0 11px}
.cs-side-nav{display:grid;gap:4px}
.cs-side-link{display:flex;align-items:center;gap:13px;min-height:43px;padding:11px 14px;border-radius:11px;color:#f8ffffed;text-decoration:none;font-size:13px;font-weight:600;position:relative;transition:background .16s,color .16s}
.cs-side-link:hover,.cs-side-link:focus,.cs-side-link.is-active{background:#ffffff26;color:#fff}
.cs-side-link.is-active{font-weight:800;box-shadow:inset 3px 0 0 #fff}
.cs-nav-empty{font-size:12px;color:#fff;padding:10px 14px}
.cs-sidebar-foot{padding:14px 6px 4px;border-top:1px solid #ffffff30}
.cs-sidebar-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#ffffff16;border-radius:12px;padding:12px 10px;margin-bottom:16px}
.cs-sidebar-theme>span{display:flex;align-items:center;gap:10px;font-weight:650;font-size:12px}
.cs-theme-switch{border:0;background:#d6ecf0;border-radius:99px;width:43px;height:24px;min-width:43px;padding:3px;display:flex;align-items:center;transition:background .2s}
.cs-theme-switch span{display:block;width:18px;height:18px;background:#fff;box-shadow:0 1px 3px #0002;border-radius:50%;transition:transform .2s}
.cs-theme-switch[aria-checked="true"]{background:#27c79b}.cs-theme-switch[aria-checked="true"] span{transform:translateX(19px)}
.cs-logout{background:#fff;color:#1188ae;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border-radius:11px;font-size:12px;font-weight:800;box-shadow:0 4px 10px #033e6726}
.cs-logout:hover{background:#eefcff;color:#00799f}
.cs-sidebar-signature{display:block;text-align:center;font-size:9px;letter-spacing:.12em;color:#ffffffa5;margin-top:14px}
.cs-sidebar-close,.cs-sidebar-backdrop{display:none}
.cs-app-content{min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.cs-app-topbar{min-width:0;background:var(--cs-card);border-bottom:1px solid var(--cs-line);height:75px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(19px,2.6vw,42px);position:relative;z-index:3}
.cs-topbar-start,.cs-topbar-tools{display:flex;align-items:center;gap:17px;min-width:0}
.cs-breadcrumb{display:flex;flex-direction:column;line-height:1.2;min-width:0}.cs-breadcrumb small{font-size:10px;color:var(--cs-muted);font-weight:600;margin-bottom:5px}.cs-breadcrumb small span{color:#09b0a7;margin-left:3px}.cs-breadcrumb strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-topbar-date{font-weight:650;color:var(--cs-muted);font-size:12px;white-space:nowrap}
.cs-small-avatar{flex:none;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;background:#09aca9;color:white;font-weight:800;font-size:15px}
.cs-search-box{background:var(--cs-bg);border:1px solid var(--cs-line);display:flex;align-items:center;gap:8px;border-radius:11px;padding:0 12px;color:var(--cs-muted);width:clamp(145px,15vw,234px);min-height:38px}
.cs-search-box input{border:0;outline:0!important;width:100%;min-width:0;background:none!important;color:var(--cs-ink);font-size:12px;padding:8px 0}.cs-search-box:focus-within{border-color:var(--cs-accent);box-shadow:0 0 0 2px #07b4a721}
.cs-app-page{flex:1;width:100%;min-width:0;padding:clamp(20px,2.7vw,38px)}
.cs-dashboard-main,.cs-inner-main{max-width:1500px;margin:0 auto;width:100%;min-width:0}
.cs-app-footer{padding:12px 35px 19px;text-align:center;font-size:10px;color:var(--cs-muted)}
.cs-menu-button{display:none}
.cs-icon-button{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:10px;color:inherit}
.cs-icon-button:hover{background:var(--cs-soft)}
/* Inner plugin pages share the dashboard shell */
.cs-page-intro{margin:0 0 20px}.cs-page-intro h1{font-size:clamp(24px,2.7vw,32px);font-weight:800;letter-spacing:-.025em;margin:0;line-height:1.25}.csd-kicker{letter-spacing:.15em;font-size:11px;font-weight:800;color:#079d9d;margin:0 0 7px}
.cs-content-page{min-width:0}.cs-page-content{min-width:0}
.cs-panel,.cs-entry,.cs-event,.cs-club,.cs-service-card{background:var(--cs-card);border:1px solid var(--cs-line);border-radius:16px;padding:clamp(16px,2.2vw,25px);margin:0 0 17px;box-shadow:var(--cs-shadow);min-width:0}
.cs-panel .cs-panel{box-shadow:none}
.cs-page-content .cs-panel>h2:first-child{margin-top:0}
.cs-panel h2,.cs-entry h3{line-height:1.3}
.cs-page-content table,.cs-main table{border-collapse:collapse;max-width:100%;width:100%;font-size:13px}
.cs-page-content th,.cs-page-content td{padding:11px 12px;border-bottom:1px solid var(--cs-line);text-align:left;white-space:normal}
.cs-page-content th{background:var(--cs-soft);font-size:11px;font-weight:800}
.cs-page-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),.cs-page-content select,.cs-page-content textarea{border:1px solid var(--cs-line);background:var(--cs-card);color:var(--cs-ink);border-radius:9px;padding:10px;min-height:41px;max-width:100%}
.cs-page-content label{display:inline-block;margin:5px 7px 5px 0;font-weight:600;font-size:13px}
.cs-page-content textarea{display:block;min-height:96px;width:100%;max-width:650px}
.cs-page-content button,.cs-card-link,.cs-hero-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;background:#05a5a5;color:#fff;text-decoration:none;border-radius:10px;padding:10px 16px;min-height:42px;font-weight:750;font-size:12px;max-width:100%}
.cs-page-content button:hover,.cs-card-link:hover{background:#087f91;color:white}
.cs-page-content form{max-width:100%;min-width:0}
.cs-page-content details{padding:12px 16px;border:1px solid var(--cs-line);border-radius:12px;background:var(--cs-card);margin:12px 0;min-width:0}
.cs-page-content summary{cursor:pointer;font-weight:700}
.cs-page-content .csl-score{background:var(--cs-card)}
.cs-page-content .csl-score,.cs-page-content .csl-alert{max-width:100%}
.cs-page-content p{overflow-wrap:anywhere}
.cs-page-content table{display:block;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.cs-page-content table thead,.cs-page-content table tbody{width:100%}
.cs-page-content pre,.cs-page-content code{max-width:100%;overflow-wrap:anywhere}
.cs-page-content .csl-inline{gap:12px;display:flex;flex-wrap:wrap}
/* Signed out landing */
.cs-public-container{max-width:1190px;padding:0 24px;margin:auto}
.cs-public-header{background:#fff;border-bottom:1px solid #e5ebf0}
.cs-public-header .cs-brand{color:#173349}
.cs-public-header .cs-brand-emblem{background:linear-gradient(145deg,#02aaa7,#1c77bc);color:white}
.cs-public-header .cs-public-container{min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.cs-public-nav{display:flex;align-items:center;gap:24px}.cs-public-nav a{text-decoration:none;color:#20374c;font-weight:700}.cs-public-nav a.cs-public-login{background:#00a7a7;color:#fff;padding:10px 15px;border-radius:10px}
.cs-public-hero{background:radial-gradient(circle at 84% 16%,#36c7be85,transparent 33%),linear-gradient(125deg,#063d65,#079eaa 64%,#1b7cb7);color:white;padding:clamp(65px,7vw,105px) 0}
.cs-hero-inner{position:relative}.cs-hero-chip{color:#c6fffa;letter-spacing:.17em;font-size:11px;font-weight:800}.cs-public-hero h1{font-size:clamp(40px,5.8vw,76px);line-height:1.08;max-width:820px;letter-spacing:-.04em;margin:15px 0}.cs-public-hero h1 span{color:#ffbd4d}.cs-public-hero p{font-size:clamp(15px,1.5vw,19px);max-width:630px;color:#ebf9ff;line-height:1.65}.cs-hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.cs-primary-link,.cs-secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 19px;border-radius:11px;text-decoration:none;font-weight:800;font-size:13px}.cs-primary-link{background:#ffb737;color:#223248}.cs-secondary-link{border:1px solid #ffffff9c;color:#fff}
.cs-public-main{padding-top:45px;padding-bottom:65px}.cs-public-section-head span{font-size:11px;letter-spacing:.16em;color:#019e9e;font-weight:800}.cs-public-section-head h2{font-size:30px;margin:4px 0 21px}.cs-public-feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.cs-public-feature{background:#fff;border:1px solid #e5ecf0;padding:22px;border-radius:15px;text-decoration:none;color:#1e3145;box-shadow:0 5px 22px #133d5410}.cs-public-feature h3{margin:0;font-size:17px}.cs-public-feature p{color:#697d8f;font-size:13px;line-height:1.6}.cs-public-feature span{color:#06a4a1;font-size:12px;font-weight:800}.cs-public-scores{margin-top:35px}.cs-public-scores h2{font-size:22px}.cs-public-footer{padding:20px 0;background:#fff;border-top:1px solid #e5ecf0;color:#708395;font-size:12px}
/* WordPress admin toolbar + desktop scaling */
.admin-bar .cs-sidebar{top:32px;height:calc(100dvh - 32px)}
@media(max-width:1180px){.cs-app{grid-template-columns:216px minmax(0,1fr)}.cs-sidebar{padding-left:10px;padding-right:10px}.cs-side-link{font-size:12px;gap:11px;padding:10px 12px}.cs-public-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .cs-app{display:block}.cs-sidebar{position:fixed;inset:0 auto 0 0;top:0;height:100dvh;width:min(280px,88vw);transform:translateX(-104%);transition:transform .2s ease;box-shadow:0 0 40px #14314f37;z-index:100}
  .cs-menu-open .cs-sidebar{transform:translateX(0)}
  .cs-sidebar-backdrop{display:block;position:fixed;inset:0;background:#0b263b8c;opacity:0;pointer-events:none;z-index:99;transition:opacity .2s ease}
  .cs-menu-open .cs-sidebar-backdrop{opacity:1;pointer-events:auto}.cs-sidebar-close,.cs-menu-button{display:inline-flex}
  .cs-sidebar-close{color:white}.cs-sidebar-close:hover{background:#ffffff22}
  .cs-app-topbar{padding:0 20px;height:68px}.cs-app-page{padding:23px 21px}.cs-scroll-locked{overflow:hidden}
  .admin-bar .cs-sidebar{top:0;height:100dvh}
}
@media(max-width:680px){.cs-search-box{width:135px}.cs-topbar-date{display:none}.cs-topbar-tools{gap:10px}.cs-app-topbar{gap:9px}.cs-public-nav{gap:9px}.cs-public-nav>a:not(.cs-public-login){display:none}}
@media(max-width:520px){
  .cs-app-page{padding:16px 12px 23px}.cs-app-topbar{height:60px;padding:0 12px}.cs-topbar-start{gap:8px}.cs-breadcrumb small{font-size:9px}.cs-breadcrumb strong{font-size:13px}.cs-search-box{width:40px;min-height:40px;justify-content:center;padding:0 10px;transition:width .2s}.cs-search-box:focus-within{width:min(175px,42vw)}.cs-search-box input{width:0;padding:0}.cs-search-box:focus-within input{width:100%;padding:6px 0}.cs-topbar-tools{gap:7px}.cs-small-avatar{width:32px;height:32px;font-size:12px}.cs-page-intro{padding:2px 3px 0;margin-bottom:15px}.cs-page-content .cs-panel{padding:15px}.cs-page-content label{margin:6px 4px 7px 0}.cs-page-content input,.cs-page-content select{width:100%;max-width:100%!important}.cs-page-content input[type="number"]{width:auto;max-width:100%!important}.cs-page-content form{min-width:0}.cs-page-content table{font-size:12px}.cs-page-content th,.cs-page-content td{min-width:85px;padding:10px 9px;white-space:nowrap}.cs-page-content td:first-child{min-width:110px}.cs-public-container{padding:0 16px}.cs-public-header .cs-public-container{min-height:65px}.cs-public-nav a.cs-public-login{padding:8px 11px}.cs-public-hero{padding:65px 0}.cs-public-feature-grid{grid-template-columns:1fr}.cs-public-main{padding:34px 16px 45px}
}
@media(max-width:380px){.cs-breadcrumb small{display:none}.cs-breadcrumb strong{font-size:12px}.cs-app-topbar{gap:5px}.cs-small-avatar{width:29px;height:29px}.cs-menu-button{width:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cs-sidebar,.cs-sidebar-backdrop,.cs-side-link,.cs-theme-switch,.cs-theme-switch span,.cs-search-box{transition:none!important}}
@media print{.cs-sidebar,.cs-app-topbar,.cs-app-footer,.cs-public-header,.cs-public-footer,.cs-sidebar-backdrop,button{display:none!important}.cs-app{display:block}.cs-app-page{padding:0}.cs-panel{box-shadow:none}.cs-page-content table{display:table;overflow:visible}}

/* Explicitly hide off-canvas controls on desktop; shared button styles must not override this. */
@media(min-width:901px){.cs-sidebar-head .cs-sidebar-close,.cs-app-topbar .cs-menu-button{display:none}}
/* Version 0.5: Dar-style information architecture with VLegend sports identity. */
body{background:#f1f5fa}
.cs-sidebar{background:linear-gradient(166deg,#0b3152 0%,#087f91 52%,#1665a5 100%);box-shadow:3px 0 25px #071f3e10}
.cs-sidebar-head{border-bottom:1px solid #ffffff2e;padding-bottom:15px;margin-bottom:14px;min-height:67px}
.cs-sidebar-caption{color:#d8f1f4bc;letter-spacing:.15em}
.cs-side-link{font-weight:680;border-radius:12px;min-height:43px;color:#ffffffdf}
.cs-side-link.is-active{box-shadow:inset 3px 0 0 #ffc05b;background:#ffffff20}
.cs-app-topbar{box-shadow:0 4px 22px #15395908}
.cs-brand{font-weight:850}.cs-brand-image{border-radius:14px;border:1px solid #ffffff48}
.cs-app-page{background:#f2f6fb}
html[data-cs-theme="dark"] .cs-app-page{background:var(--cs-bg)}
.cs-panel,.cs-entry,.cs-event,.cs-club,.cs-service-card{border-radius:19px;box-shadow:0 7px 30px #142f4f0c}
.cs-public-hero{background:radial-gradient(circle at 87% 18%,#38ded28f,transparent 31%),linear-gradient(126deg,#0c274f,#0b7793 62%,#1766a5)}
.cs-primary-link{background:#ffb843;color:#172e48}
.cs-sidebar-foot{border-top-color:#ffffff3b}
.cs-app-footer{color:#8090a1}
@media(max-width:520px){.cs-app-topbar{box-shadow:0 2px 13px #0e285310}}