/* CourtVivo visual branding – centralized, presentation only. */
:root{
  --brand-ink:#0E3D2E;
  --brand-primary:#0E8F4E;
  --brand-accent:#C6FF2E;
  --brand-teal:#00BFAE;
  --brand-header:#F3F7F5;
  --brand-header-line:#D8E5DF;
  --navy:#F3F7F5;
  --blue:#0E8F4E;
  --green:#0E8F4E;
}
header{
  background:var(--brand-header)!important;
  color:var(--brand-ink)!important;
  border-bottom:3px solid var(--brand-primary);
  box-shadow:0 1px 0 #0e3d2e12;
}
header .sub,header .small,header [style*="font-size:12px"]{color:#46665b!important;opacity:1!important}
header select{border:1px solid #b9cec5!important;background:#fff!important;color:var(--brand-ink)!important}
header .language label{color:#46665b!important;opacity:1!important}
header .btn.ghost,header .navbtn{
  color:var(--brand-ink)!important;
  border-color:#aac6ba!important;
  background:#fff!important;
}
header .btn.secondary{background:#e5f2ec!important;color:var(--brand-ink)!important}
.brand-name{
  display:inline-flex!important;
  align-items:center;
  gap:9px;
  color:var(--brand-ink)!important;
  letter-spacing:-.01em;
}
.brand-logo{
  width:36px;
  height:36px;
  flex:0 0 36px;
  object-fit:cover;
  border-radius:9px;
  box-shadow:0 1px 4px #0e3d2e24;
  vertical-align:middle;
}
h1.brand-name .brand-logo{width:40px;height:40px;flex-basis:40px;border-radius:10px}
.brand-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 5px;
  color:var(--brand-ink);
  font-weight:900;
  font-size:18px;
  line-height:1;
}
.brand-kicker .brand-logo{width:32px;height:32px;flex-basis:32px;border-radius:8px}
/* Keep primary actions sporty and consistent while retaining existing home/guest scoring colours. */
.btn.primary{background:var(--brand-primary)!important;color:#fff!important}
.btn.ok{background:var(--brand-primary)!important;color:#fff!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #00bfae55;outline-offset:2px}
@media(max-width:560px){
  .brand-logo{width:30px;height:30px;flex-basis:30px;border-radius:8px}
  h1.brand-name .brand-logo{width:32px;height:32px;flex-basis:32px}
  .brand-kicker{font-size:16px}
  .brand-kicker .brand-logo{width:28px;height:28px;flex-basis:28px}
}

/* V9.23 responsive header + password usability */
header .head{max-width:100%;flex-wrap:wrap}
header .head>*{min-width:0}
header .head-actions,header .actions{max-width:100%}
.brand-title-line{
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap;
  column-gap:.34em;
  row-gap:.16em;
  max-width:100%;
  min-width:0;
  line-height:1.15;
}
.brand-title-line .brand-name{flex:0 0 auto;white-space:nowrap}
.brand-title-line .brand-context{min-width:0;white-space:nowrap}
.brand-title-line .brand-context::before{content:'·';margin-right:.34em;font-weight:700}
.password-field{position:relative;width:100%}
.password-field>input{padding-right:48px!important}
.password-toggle{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--brand-ink);
  cursor:pointer;
  padding:0;
}
.password-toggle:hover{background:#e7f1ed}
.password-toggle:focus-visible{outline:3px solid #00bfae55;outline-offset:1px}
.password-toggle svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){
  header .head{align-items:flex-start!important}
  header .head-actions,header .actions{flex-wrap:wrap}
  .season-admin-header .head{display:grid!important;grid-template-columns:minmax(0,1fr);gap:12px!important}
  .season-admin-header .head-actions{order:-1;width:100%;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
  .season-admin-header .head-actions select{width:100%!important;min-width:0!important}
  .season-admin-header .head-actions .btn{white-space:nowrap;text-align:center}
}
@media(max-width:640px){
  .brand-title-line{flex-wrap:wrap!important}
  .brand-title-line .brand-context{
    flex:0 0 100%;
    width:100%;
    padding-left:39px;
    white-space:normal;
    margin-top:2px;
  }
  .brand-title-line .brand-context::before{content:none}
}
@media(max-width:380px){
  .brand-title-line .brand-context{padding-left:0}
}