/* =====================================================================
Default theme - modern styles
Loaded automatically on every page that uses Theme="Default".
ASP.NET adds theme stylesheets after the tags in the master
page, so at equal specificity these rules win over ADMIN.CSS and
Common.CSS. Those two files are left untouched; anything in them
that clashes with this theme is overridden here.
Palette matches the Member Documents admin page.
===================================================================== */
:root {
--sp-ink: #1F2A44; /* text, primary buttons */
--sp-ink-hover: #2B3A5C;
--sp-muted: #5F6B7E; /* secondary text, grid headings */
--sp-line: #DCE1E8; /* borders (cards, grids, dividers) */
--sp-control-line: #AEB8C6; /* borders of inputs, dropdowns and secondary buttons: must stand out on white */
--sp-control-line-hover: #7C889B;
--sp-line-soft: #EDF0F4; /* row dividers */
--sp-surface: #FFFFFF; /* header, cards, inputs, grids */
--sp-page: #F3F5F8; /* page background */
--sp-head: #F8F9FB; /* grid header and footer rows */
--sp-accent: #2F6FEB; /* links, focus, active menu item */
--sp-accent-soft: #EAF0FD; /* selected rows, menu hover */
--sp-success: #1E7F4F;
--sp-success-soft: #E6F4EC;
--sp-danger: #B42318;
--sp-radius: 6px;
--sp-radius-lg: 8px;
--sp-shadow: 0 8px 24px rgba(31, 42, 68, .16);
--sp-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
--sp-row-alt: #F3F6FA; /* alternate grid rows */
--sp-row-hover: #E8EFFB; /* row under the mouse */
--sp-row-selected: #D9E5FB; /* selected row */
--sp-text: 14px; /* base size; lower to 13px if pages feel too spread out */
--sp-text-sm: 12px;
}
/* =====================================================================
Base elements
Plain element selectors: they replace the Verdana rules in ADMIN.CSS
and Common.CSS without outranking any class a page sets.
===================================================================== */
a { color: var(--sp-accent); font-family: inherit; font-size: inherit; }
a:hover { color: var(--sp-ink); }
pre { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--sp-font); color: var(--sp-ink); font-weight: 600; line-height: 1.25; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: var(--sp-text); }
hr {
height: 0;
border: 0;
border-top: 1px solid var(--sp-line);
background: none;
color: var(--sp-line);
}
fieldset {
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
background: var(--sp-surface);
padding: 12px 16px 16px;
margin: 0 0 16px;
}
legend { padding: 0 6px; color: var(--sp-muted); font-weight: 500; }
/* =====================================================================
Page shell (master page)
===================================================================== */
body.sp-body {
margin: 0;
padding: 0; /* Common.CSS adds 50px left and right */
background: var(--sp-page);
color: var(--sp-ink);
font-family: var(--sp-font);
font-size: var(--sp-text);
line-height: 1.45;
}
/* BlankMasterPage (popups, print views): white page, no header or footer */
body.sp-body.sp-blank { background: var(--sp-surface); }
body.sp-body.sp-blank .sp-blank-content { padding: 16px; }
@media print {
body.sp-body { background: #FFFFFF; }
body.sp-body .sp-header,
body.sp-body .twoTone,
body.sp-body .footer { display: none; }
body.sp-body .PageBody,
body.sp-body.sp-blank .sp-blank-content { padding: 0; min-height: 0; }
table.sp-grid tr.sp-grid-row:hover > td { background: var(--sp-surface); }
}
/* Header: white bar holding everything MainMenu renders */
body.sp-body .sp-header {
background: var(--sp-surface);
border-bottom: 1px solid var(--sp-line);
padding: 0;
}
/* Content area (replaces the old ) */
body.sp-body .PageBody {
padding: 24px;
box-sizing: border-box;
min-height: calc(100vh - 160px);
}
/* Divider above the footer */
body.sp-body .twoTone {
height: 0;
margin: 0 24px;
border-top: 1px solid var(--sp-line);
border-bottom: 0;
}
body.sp-body .footer {
padding: 16px 24px 24px;
text-align: center;
color: var(--sp-muted);
font-size: var(--sp-text-sm);
font-style: normal;
}
body.sp-body .footer p { margin: 0 0 4px; }
body.sp-body .footer img { display: block; margin: 0 auto 8px; border: 0; }
/* Error message area above page content (AdminMasterPage ltlErrorMessage) */
body.sp-body .sp-page-message { margin: 0 0 16px; }
body.sp-body .sp-page-message:empty { display: none; }
body.sp-body .footer a { color: var(--sp-muted); text-decoration: none; }
body.sp-body .footer a:hover { color: var(--sp-ink); text-decoration: underline; }
/* =====================================================================
Header built by SportsTech.WebControls.MainMenu:
td.HeaderBackground
table.MainMenu.HeaderTable: org logo | org name | app logo + icon tabs
table.MainMenuBG: application menu | SpacerStart | SpacerMain
table.SiteMapBar: breadcrumb | user name and login status
===================================================================== */
.sp-header td.HeaderBackground,
.sp-header table.HeaderBackground {
border-bottom: 0;
background-position: 50% calc(100% - 46px); /* banner photo above the menu bar */
}
.sp-header td.HeaderOrgLogo { padding: 8px 0 8px 16px; }
.sp-header td.HeaderAppLogo { padding: 8px 16px 8px 0; }
.sp-header td.HeaderOrgLogo img,
.sp-header td.HeaderAppLogo img { vertical-align: middle; border: 0; }
.sp-header td.HeaderOrgName {
color: var(--sp-ink);
font-family: var(--sp-font);
font-size: 20px;
font-weight: 600;
letter-spacing: 0;
}
/* Icon tabs (Home, ISIS, Facilities, Scheduler, Help) */
.sp-header table.MainMenuArea td { padding: 0 2px; }
/* Row holding the application menu */
.sp-header table.MainMenuBG {
width: 100%;
background: var(--sp-ink);
border-bottom: 3px solid var(--sp-accent);
height: auto;
font-family: var(--sp-font);
font-size: var(--sp-text);
}
/* Old bar graphics drawn beside the menu */
.sp-header td.SpacerStart { display: none; }
.sp-header td.SpacerMain { background: transparent none; height: auto; }
.sp-header table.MainMenuBG > tbody > tr > td:first-child { padding-left: 8px; }
/* Site map / user bar */
table.SiteMapBar {
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid var(--sp-line-soft);
height: auto;
font-size: var(--sp-text-sm);
font-weight: 500;
color: var(--sp-muted);
}
td.UserBar, td.SiteMapPath { font-size: var(--sp-text-sm); color: var(--sp-muted); padding: 8px 16px; }
a.SitePath, a.SitePath:visited, a.SitePath:active,
td.UserBar a, td.UserBar a:visited, td.UserBar a:active {
font-size: var(--sp-text-sm);
color: var(--sp-accent);
text-decoration: none;
}
a.SitePath:hover, td.UserBar a:hover { font-size: var(--sp-text-sm); color: var(--sp-ink); text-decoration: underline; }
/* =====================================================================
Main menu (mainmenu.skin, SkinID="SchedulerMenu")
MainMenu builds the menu in code and sets these class names itself
(mainmenu.skin is not applied to it). Rules cover both render modes:
in Table mode the class lands on each item's and its .
===================================================================== */
.sp-header .MenuStaticCell,
.sp-header .MenuStaticItemCell { height: auto; background: transparent; border: 0; }
.sp-header ul.MenuStaticCell,
.sp-header ul.MenuStaticCell li { margin: 0; padding: 0; list-style: none; }
.sp-header table.MenuStaticItem,
.sp-header table.MenuStaticItemSelected,
.sp-header li.MenuStaticItem {
background: transparent none;
width: auto;
height: auto;
padding: 0;
border: 0;
}
.sp-header a.MenuStaticItem,
.sp-header a.MenuStaticItemSelected,
.sp-header table.MenuStaticItem a,
.sp-header table.MenuStaticItemSelected a {
display: block;
font-family: var(--sp-font) !important;
font-size: var(--sp-text) !important;
font-weight: 500 !important;
color: #C9D2E3;
text-decoration: none;
padding: 0 14px;
line-height: 44px;
white-space: nowrap;
}
.sp-header a.MenuStaticItem:hover,
.sp-header a.MenuStaticItemSelected,
.sp-header table.MenuStaticItemSelected a {
color: #FFFFFF;
background: rgba(255, 255, 255, .10);
box-shadow: inset 0 -3px 0 #FFFFFF;
}
.sp-header a.MenuStaticItem:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
/* The full admin menu has 11 top-level items (Web.sitemap). A table-rendered
menu can't wrap, so tighten it on narrower windows instead. */
@media (max-width: 1280px) {
.sp-header a.MenuStaticItem,
.sp-header a.MenuStaticItemSelected,
.sp-header table.MenuStaticItem a,
.sp-header table.MenuStaticItemSelected a { padding: 0 9px; font-size: 13px !important; }
body .MenuDynamic, body .MenuDynamic td, body .MenuDynamic a { font-size: 13px !important; }
}
@media (max-width: 1080px) {
.sp-header a.MenuStaticItem,
.sp-header a.MenuStaticItemSelected,
.sp-header table.MenuStaticItem a,
.sp-header table.MenuStaticItemSelected a { padding: 0 6px; }
}
/* Dropdowns. Stacked above all page content, including Telerik controls (the scheduler's
toolbar and appointments drew over the open menu), but below dialogs and their backdrop
(10000+). !important beats the small z-index asp:Menu's script sets inline. */
.MenuDynamic,
.sp-menu-dropdown,
.sp-header div[id$="Items"] {
z-index: 9000 !important;
}
.MenuDynamic,
.sp-menu-dropdown {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
padding: 4px 0;
min-width: 200px;
}
.MenuDynamic table.MenuDynamicItem,
.MenuDynamic table.MenuDynamicItemSelected {
background: transparent;
padding: 0;
width: 100%;
}
/* Same typeface as the menu bar. !important beats the inline
font-size:1em asp:Menu writes on each link and the Arial/Verdana
the dropdown's container picks up from Common.CSS. */
.MenuDynamic,
.MenuDynamic td,
.MenuDynamic a {
font-family: var(--sp-font) !important;
font-size: var(--sp-text) !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0 !important;
}
a.MenuDynamicItem,
a.MenuDynamicItemSelected,
.MenuDynamic table.MenuDynamicItem a,
.MenuDynamic table.MenuDynamicItemSelected a {
display: block;
color: var(--sp-ink);
text-decoration: none;
padding: 8px 14px;
white-space: nowrap;
}
a.MenuDynamicItem:hover,
a.MenuDynamicItemSelected,
.MenuDynamic table.MenuDynamicItemSelected a {
background: var(--sp-accent-soft);
color: var(--sp-ink);
}
/* =====================================================================
Form controls
===================================================================== */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="date"], select, textarea {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background-color: var(--sp-surface);
border: 1px solid var(--sp-control-line);
border-radius: var(--sp-radius);
padding: 6px 10px;
min-height: 34px;
box-sizing: border-box;
box-shadow: inset 0 1px 2px rgba(31, 42, 68, .06);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover,
input[type="search"]:hover, input[type="tel"]:hover, input[type="date"]:hover, select:hover, textarea:hover {
border-color: var(--sp-control-line-hover);
}
select[multiple], select[size] { min-height: 0; padding: 4px; }
textarea { min-height: 72px; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="date"]:focus, select:focus, textarea:focus {
outline: 2px solid var(--sp-accent);
outline-offset: 1px;
border-color: var(--sp-accent);
}
input:disabled, select:disabled, textarea:disabled {
background-color: var(--sp-page);
color: var(--sp-muted);
cursor: not-allowed;
}
/* Native checkboxes and radios (the form decorator no longer replaces them) */
input[type="checkbox"], input[type="radio"] {
accent-color: var(--sp-accent);
width: 16px;
height: 16px;
vertical-align: -3px;
margin: 0 6px 0 0;
}
/* Buttons (skin sets CssClass="Mediumbtn").
The [type] selectors make these more specific than the generic secondary-button rule
below; with equal specificity that later rule won and primary buttons rendered white. */
input[type="submit"].Mediumbtn, input[type="button"].Mediumbtn,
input.Mediumbtn, button.Mediumbtn {
font-family: var(--sp-font);
font-size: var(--sp-text);
font-weight: 500;
color: #FFFFFF;
background: var(--sp-ink);
background-image: none;
border: 1px solid var(--sp-ink);
border-radius: var(--sp-radius);
padding: 0 16px;
height: 34px;
line-height: 32px;
cursor: pointer;
box-shadow: none;
}
input[type="submit"].Mediumbtn:hover, input[type="button"].Mediumbtn:hover,
input.Mediumbtn:hover, button.Mediumbtn:hover { background: var(--sp-ink-hover); border-color: var(--sp-ink-hover); color: #FFFFFF; }
input.Mediumbtn:focus-visible, button.Mediumbtn:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
input.Mediumbtn:disabled, button.Mediumbtn:disabled { opacity: .55; cursor: not-allowed; }
/* Buttons without a class: secondary style */
input[type="submit"], input[type="button"], input[type="reset"], button {
font-family: var(--sp-font);
font-size: var(--sp-text);
font-weight: 500;
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-control-line);
border-radius: var(--sp-radius);
padding: 0 14px;
height: 34px;
cursor: pointer;
box-shadow: 0 1px 2px rgba(31, 42, 68, .08);
}
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover {
border-color: var(--sp-control-line-hover);
background: var(--sp-head);
}
/* =====================================================================
Grid (SkinID="Default")
===================================================================== */
table.sp-grid a { font-family: inherit; font-size: inherit; }
table.sp-grid {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
/* GridView writes style="border-collapse:collapse" inline; !important
is the only way a stylesheet can override it, and the rounded
corners need "separate". */
border-collapse: separate !important;
border-spacing: 0;
border-radius: var(--sp-radius-lg);
overflow: hidden;
}
table.sp-grid > tbody > tr > th,
table.sp-grid > tbody > tr.sp-grid-head > td {
background: var(--sp-head);
color: var(--sp-muted);
font-size: var(--sp-text-sm);
font-weight: 500;
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--sp-line);
white-space: nowrap;
}
/* Headings follow HeaderStyle-HorizontalAlign when a column sets it */
table.sp-grid > tbody > tr > th[align="center"] { text-align: center; }
table.sp-grid > tbody > tr > th[align="right"] { text-align: right; }
table.sp-grid > tbody > tr > th a { color: var(--sp-muted); text-decoration: none; }
table.sp-grid > tbody > tr > th a:hover { color: var(--sp-ink); text-decoration: underline; }
table.sp-grid tr.sp-grid-row > td {
padding: 8px 12px;
border-bottom: 1px solid var(--sp-line-soft);
vertical-align: middle;
background: var(--sp-surface);
}
table.sp-grid tr.sp-grid-alt > td { background: var(--sp-row-alt); }
table.sp-grid tr.sp-grid-row > td.sp-grid-sorted { background: #F0F4FA; }
table.sp-grid tr.sp-grid-alt > td.sp-grid-sorted { background: #EAEFF7; }
table.sp-grid tr.sp-grid-row:hover > td { background: var(--sp-row-hover); }
table.sp-grid tr.sp-grid-selected > td { background: var(--sp-row-selected); font-weight: 500; }
/* Compact buttons inside grid rows, so action columns don't make rows tall */
table.sp-grid tr.sp-grid-row input[type="submit"],
table.sp-grid tr.sp-grid-row input[type="button"],
table.sp-grid tr.sp-grid-row button,
table.sp-grid tr.sp-grid-row input.Mediumbtn,
table.sp-grid tr.sp-grid-row a.sp-grid-btn {
height: 28px;
line-height: 26px;
padding: 0 10px;
font-size: 13px;
}
table.sp-grid tr.sp-grid-foot > td { background: var(--sp-head); padding: 10px 12px; font-weight: 500; border-top: 1px solid var(--sp-line); }
table.sp-grid tr.sp-grid-pager > td { background: var(--sp-head); padding: 10px 12px; border-top: 1px solid var(--sp-line); }
table.sp-grid tr.sp-grid-pager table { margin-left: auto; border-collapse: separate; border-spacing: 4px 0; }
table.sp-grid tr.sp-grid-pager table td { padding: 0; border: 0; background: transparent; }
table.sp-grid tr.sp-grid-pager a,
table.sp-grid tr.sp-grid-pager span {
display: inline-block; min-width: 30px; height: 30px; line-height: 28px; padding: 0 8px;
text-align: center; border-radius: var(--sp-radius); text-decoration: none; box-sizing: border-box;
}
table.sp-grid tr.sp-grid-pager a { color: var(--sp-ink); background: var(--sp-surface); border: 1px solid var(--sp-line); }
table.sp-grid tr.sp-grid-pager a:hover { border-color: var(--sp-ink); }
table.sp-grid tr.sp-grid-pager span { background: var(--sp-ink); color: #FFFFFF; border: 1px solid var(--sp-ink); font-weight: 500; }
/* Older pages that set CssClass="HeaderRow" / "RegularRow" by hand */
.HeaderRow { background: var(--sp-head); color: var(--sp-muted); font-weight: 500; }
.RegularRow { background: var(--sp-surface); font-weight: normal; }
.AlternatingRow, .AltRow { background: var(--sp-row-alt); }
/* =====================================================================
Tables (SkinID="Default" and "TemplateSkinID")
===================================================================== */
table.sp-table { font-family: var(--sp-font); font-size: var(--sp-text); color: var(--sp-ink); }
table.sp-table-template {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
border: 1px dashed var(--sp-muted);
border-radius: var(--sp-radius-lg);
border-collapse: separate;
background: var(--sp-surface);
}
/* =====================================================================
Wizard (SkinID="Default")
===================================================================== */
table.sp-wizard {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
border-collapse: separate !important;
border-spacing: 0;
overflow: hidden;
}
table.sp-wizard td.sp-wizard-sidebar {
background: var(--sp-head);
border-right: 1px solid var(--sp-line);
padding: 12px 8px;
vertical-align: top;
}
table.sp-wizard td.sp-wizard-sidebar a,
table.sp-wizard a.sp-wizard-step {
display: block;
color: var(--sp-muted);
text-decoration: none;
padding: 8px 10px;
border-radius: var(--sp-radius);
font-weight: 500;
}
table.sp-wizard td.sp-wizard-sidebar a:hover { background: var(--sp-accent-soft); color: var(--sp-ink); }
table.sp-wizard .sp-wizard-head {
font-size: 16px;
font-weight: 600;
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid var(--sp-line);
}
table.sp-wizard .sp-wizard-body { padding: 16px; vertical-align: top; }
table.sp-wizard .sp-wizard-nav {
padding: 12px 16px;
border-top: 1px solid var(--sp-line);
background: var(--sp-head);
}
/* =====================================================================
Labels (SkinIDs Error, StaticLabel, Labelbtn, Success)
===================================================================== */
.sp-label { font-family: var(--sp-font); font-size: var(--sp-text); }
.sp-label-error { color: var(--sp-danger); font-weight: 500; }
.sp-label-success { color: var(--sp-success); font-weight: 500; }
.sp-label-muted { color: var(--sp-muted); }
.sp-label-btn {
display: inline-block;
color: var(--sp-ink);
background: var(--sp-head);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
padding: 4px 10px;
}
/* Used as a field label ("Select Sport:", "Program:"), not for errors */
.redLabel { color: var(--sp-ink); font-weight: 500; }
/* =====================================================================
Lists, tree, popups
===================================================================== */
ul.sp-list, ol.sp-list {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
padding-left: 20px;
margin: 0 0 12px;
}
ul.sp-list li, ol.sp-list li { margin: 2px 0; }
ul.sp-list li::marker { color: var(--sp-accent); }
.sp-tree-node, .sp-tree-node a { font-family: var(--sp-font); color: var(--sp-ink); text-decoration: none; }
.sp-tree-root, .sp-tree-root a { font-weight: 600; color: var(--sp-ink); font-size: var(--sp-text); }
.sp-tree-parent, .sp-tree-parent a { color: var(--sp-muted); font-size: 13px; }
.sp-tree-leaf, .sp-tree-leaf a { color: var(--sp-muted); font-size: 13px; }
.sp-tree-node a:hover { color: var(--sp-accent); }
.sp-tree-selected, .sp-tree-selected a {
font-weight: 600;
color: var(--sp-ink);
background: var(--sp-accent-soft);
border-radius: 4px;
}
/* SkinID="PopUpPanel": display:none stays inline, the extender shows it */
.sp-popup {
background: var(--sp-surface);
color: var(--sp-ink);
font-family: var(--sp-font);
text-align: left;
padding: 20px;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
}
.modalBackground { background-color: var(--sp-ink); opacity: .45; }
/* =====================================================================
Page sections from Common.CSS
===================================================================== */
.SectionTitle {
background: var(--sp-head);
color: var(--sp-ink);
font-weight: 600;
border: 0;
border-bottom: 1px solid var(--sp-line);
padding: 6px 10px;
}
.scheduleSummary {
padding: 10px 12px;
background: var(--sp-accent-soft);
border: 1px solid var(--sp-line);
border-bottom-width: 0;
border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
}
.PageNotes { color: var(--sp-muted); font-size: 13px; }
/* Calendar */
.DayWithAppointments,
.DayWithAppointments a {
background-color: var(--sp-success-soft);
color: var(--sp-success);
font-weight: 600;
}
/* =====================================================================
Iphonepage.master (phone pages, e.g. Post Scores By Field - Mobile)
===================================================================== */
body.sp-body.sp-mobile {
font-size: 15px;
-webkit-text-size-adjust: 100%;
}
body.sp-mobile .sp-m-header {
background: var(--sp-ink);
color: #FFFFFF;
border-bottom: 3px solid var(--sp-accent);
}
body.sp-mobile .sp-m-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px 4px;
}
body.sp-mobile .sp-m-org {
font-size: 17px;
font-weight: 600;
color: #FFFFFF;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.sp-mobile .sp-m-login a {
color: #C9D2E3;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
display: inline-block;
padding: 8px 0;
}
body.sp-mobile .sp-m-login a:hover { color: #FFFFFF; }
body.sp-mobile .sp-m-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 6px;
}
body.sp-mobile .sp-m-nav a {
display: inline-block;
color: #C9D2E3;
font-weight: 500;
text-decoration: none;
padding: 0 8px;
line-height: 44px; /* comfortable tap target */
}
body.sp-mobile .sp-m-nav a:hover,
body.sp-mobile .sp-m-nav a:active { color: #FFFFFF; }
body.sp-mobile .sp-m-navtext { color: #C9D2E3; padding: 0 8px; font-size: 14px; }
body.sp-mobile .sp-m-content { padding: 14px; }
body.sp-mobile .sp-m-footer {
padding: 16px 14px 24px;
text-align: center;
color: var(--sp-muted);
font-size: var(--sp-text-sm);
}
/* Touch-sized controls. 16px text keeps iOS from zooming in on focus. */
body.sp-mobile input[type="text"], body.sp-mobile input[type="password"],
body.sp-mobile input[type="email"], body.sp-mobile input[type="number"],
body.sp-mobile input[type="search"], body.sp-mobile input[type="tel"],
body.sp-mobile input[type="date"], body.sp-mobile select, body.sp-mobile textarea {
font-size: 16px;
min-height: 44px;
max-width: 100%;
}
body.sp-mobile input[type="submit"], body.sp-mobile input[type="button"],
body.sp-mobile button, body.sp-mobile input.Mediumbtn {
font-size: 16px;
height: 44px;
line-height: 42px;
padding: 0 18px;
}
body.sp-mobile input[type="checkbox"], body.sp-mobile input[type="radio"] {
width: 22px;
height: 22px;
vertical-align: -5px;
}
/* Wide grids scroll sideways inside their own box instead of the whole page */
body.sp-mobile table.sp-grid {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 15px;
}
body.sp-mobile table.sp-grid tr.sp-grid-row input[type="submit"],
body.sp-mobile table.sp-grid tr.sp-grid-row input[type="button"],
body.sp-mobile table.sp-grid tr.sp-grid-row button,
body.sp-mobile table.sp-grid tr.sp-grid-row input.Mediumbtn {
height: 40px;
line-height: 38px;
font-size: 15px;
}
/* =====================================================================
Popup forms (AddMatch.aspx and similar pages without a master)
===================================================================== */
.sp-popup-form { max-width: 560px; margin: 0 auto; }
.sp-popup-title { font-size: 20px; margin: 4px 0 12px; }
.sp-message { min-height: 22px; margin: 0 0 8px; }
.sp-message .sp-label:empty { display: none; }
.sp-card {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 12px 16px;
margin: 0 0 16px;
}
.sp-card-center { text-align: center; }
/* Label / control rows. The fixed label column keeps rows in the
separate panel tables lined up with each other. */
table.sp-form { width: 100%; border-collapse: collapse; }
table.sp-form td { padding: 6px 0; vertical-align: middle; }
table.sp-form td:first-child {
width: 160px;
padding-right: 12px;
color: var(--sp-muted);
font-weight: 500;
}
table.sp-form select, table.sp-form input[type="text"] { width: 100%; }
table.sp-form select[multiple] { min-height: 160px; }
table.sp-form label { cursor: pointer; }
.sp-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* asp:Calendar. It writes some inline colors (silver title, black day
links), so a few rules need !important to override them. */
table.sp-calendar {
margin: 0 auto;
border: 0 !important;
border-collapse: separate !important;
border-spacing: 3px;
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background: transparent;
}
table.sp-calendar .sp-cal-title,
table.sp-calendar .sp-cal-title td { background-color: transparent !important; border: 0; }
table.sp-calendar .sp-cal-title { font-size: 16px; font-weight: 600; padding: 4px 0 8px; }
table.sp-calendar .sp-cal-nav a {
color: var(--sp-accent) !important;
text-decoration: none;
font-size: var(--sp-text);
font-weight: 500;
padding: 4px 8px;
border-radius: var(--sp-radius);
}
table.sp-calendar .sp-cal-nav a:hover { background: var(--sp-accent-soft); }
table.sp-calendar .sp-cal-dayhead {
color: var(--sp-muted);
font-size: var(--sp-text-sm);
font-weight: 500;
padding: 4px 0;
}
table.sp-calendar td.sp-cal-day {
width: 40px;
height: 36px;
padding: 0;
text-align: center;
border-radius: var(--sp-radius);
color: var(--sp-muted); /* conflict days render as plain text */
}
table.sp-calendar td.sp-cal-day a {
display: block;
line-height: 36px;
color: inherit !important;
text-decoration: none;
border-radius: var(--sp-radius);
}
table.sp-calendar td.sp-cal-busy { color: #A8B0BD; background: transparent; }
table.sp-calendar td.sp-cal-open { background: var(--sp-success-soft); color: var(--sp-success); font-weight: 600; }
table.sp-calendar td.sp-cal-open a:hover { background: #CDEBD9; }
table.sp-calendar td.sp-cal-other { opacity: .55; }
table.sp-calendar td.sp-cal-today { box-shadow: inset 0 0 0 1px var(--sp-accent); }
table.sp-calendar td.sp-cal-selected { background: var(--sp-accent); color: #FFFFFF; opacity: 1; }
.sp-cal-legend {
margin: 10px 0 0;
color: var(--sp-muted);
font-size: var(--sp-text-sm);
}
.sp-cal-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--sp-success-soft);
border: 1px solid var(--sp-success);
vertical-align: -2px;
margin-right: 6px;
}
/* =====================================================================
Date picker (Controls/AtlasCalendar.ascx)
===================================================================== */
.sp-datepicker { display: inline-block; vertical-align: middle; }
/* Date box with a calendar icon on the right */
input.sp-date-input {
width: 140px;
padding-right: 32px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F6B7E' stroke-width='1.4'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* Popup card. z-index sits above the menu and Telerik dropdowns. */
.sp-datepicker-popup {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
padding: 8px;
z-index: 10010 !important;
}
/* Every day is pickable here, so days use the normal text color
(Add Match greys them by default and colors the open ones). */
table.sp-calendar.sp-calendar-picker td.sp-cal-day { color: var(--sp-ink); width: 34px; height: 32px; }
table.sp-calendar.sp-calendar-picker td.sp-cal-day a { line-height: 32px; }
table.sp-calendar.sp-calendar-picker td.sp-cal-day a:hover { background: var(--sp-accent-soft); }
table.sp-calendar.sp-calendar-picker td.sp-cal-selected { color: #FFFFFF; }
table.sp-calendar.sp-calendar-picker td.sp-cal-selected a:hover { background: transparent; }
/* =====================================================================
Telerik RadGrid custom skin: Skin="SportsPilot" EnableEmbeddedSkins="false"
Same look as the GridView skin (table.sp-grid). Telerik's base stylesheet
still loads for layout; everything visual comes from here.
===================================================================== */
.RadGrid_SportsPilot {
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
overflow: hidden;
}
.RadGrid_SportsPilot table,
.RadGrid_SportsPilot td,
.RadGrid_SportsPilot th { font-family: inherit; font-size: inherit; }
.RadGrid_SportsPilot .rgMasterTable,
.RadGrid_SportsPilot .rgDetailTable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
/* Header */
.RadGrid_SportsPilot .rgHeader,
.RadGrid_SportsPilot th.rgResizeCol {
background: var(--sp-head);
color: var(--sp-muted);
font-size: var(--sp-text-sm);
font-weight: 500;
text-align: left;
padding: 10px 12px;
border: 0;
border-bottom: 1px solid var(--sp-line);
white-space: nowrap;
}
.RadGrid_SportsPilot .rgHeader a { color: var(--sp-muted); text-decoration: none; }
.RadGrid_SportsPilot .rgHeader a:hover { color: var(--sp-ink); text-decoration: underline; }
.RadGrid_SportsPilot th.rgSorted { color: var(--sp-ink); }
/* Rows */
.RadGrid_SportsPilot .rgRow > td,
.RadGrid_SportsPilot .rgAltRow > td {
padding: 8px 12px;
border: 0;
border-bottom: 1px solid var(--sp-line-soft);
vertical-align: middle;
background: var(--sp-surface);
}
.RadGrid_SportsPilot .rgAltRow > td { background: var(--sp-row-alt); }
.RadGrid_SportsPilot .rgRow > td.rgSorted { background: #F0F4FA; }
.RadGrid_SportsPilot .rgAltRow > td.rgSorted { background: #EAEFF7; }
.RadGrid_SportsPilot .rgRow:hover > td,
.RadGrid_SportsPilot .rgAltRow:hover > td,
.RadGrid_SportsPilot .rgHoveredRow > td { background: var(--sp-row-hover); }
.RadGrid_SportsPilot .rgSelectedRow > td { background: var(--sp-row-selected); font-weight: 500; }
/* Group headers, footer, empty grid */
.RadGrid_SportsPilot .rgGroupHeader > td {
background: var(--sp-head);
color: var(--sp-ink);
font-weight: 600;
padding: 8px 12px;
border-bottom: 1px solid var(--sp-line);
}
.RadGrid_SportsPilot .rgGroupCol { width: 24px; background: var(--sp-head); }
.RadGrid_SportsPilot .rgFooter > td {
background: var(--sp-head);
font-weight: 500;
padding: 10px 12px;
border-top: 1px solid var(--sp-line);
}
.RadGrid_SportsPilot .rgNoRecords > td {
padding: 20px 12px;
color: var(--sp-muted);
text-align: center;
}
/* Command bar (Add new record / Refresh) */
.RadGrid_SportsPilot .rgCommandRow > td {
background: var(--sp-head);
padding: 8px 12px;
border-bottom: 1px solid var(--sp-line);
}
.RadGrid_SportsPilot .rgCommandTable { border: 0; width: 100%; }
.RadGrid_SportsPilot .rgCommandRow a { color: var(--sp-accent); text-decoration: none; font-weight: 500; }
/* Pager */
.RadGrid_SportsPilot .rgPager > td {
background: var(--sp-head);
padding: 8px 12px;
border-top: 1px solid var(--sp-line);
color: var(--sp-muted);
font-size: var(--sp-text-sm);
}
.RadGrid_SportsPilot .rgPager .rgNumPart a {
display: inline-block;
min-width: 30px;
height: 30px;
line-height: 28px;
padding: 0 8px;
margin: 0 2px;
text-align: center;
box-sizing: border-box;
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
text-decoration: none;
font-size: var(--sp-text);
}
.RadGrid_SportsPilot .rgPager .rgNumPart a:hover { border-color: var(--sp-ink); }
.RadGrid_SportsPilot .rgPager .rgNumPart a.rgCurrentPage {
background: var(--sp-ink);
border-color: var(--sp-ink);
color: #FFFFFF;
font-weight: 500;
}
/* Icon buttons. Telerik draws these as elements with a skin sprite;
with the embedded skin off they get SVG icons here, and the theme's
general button styling is reset for them. */
.RadGrid_SportsPilot input.rgPageFirst,
.RadGrid_SportsPilot input.rgPagePrev,
.RadGrid_SportsPilot input.rgPageNext,
.RadGrid_SportsPilot input.rgPageLast,
.RadGrid_SportsPilot input.rgSortAsc,
.RadGrid_SportsPilot input.rgSortDesc,
.RadGrid_SportsPilot input.rgExpand,
.RadGrid_SportsPilot input.rgCollapse {
font-size: 0;
color: transparent;
line-height: 0;
padding: 0;
min-height: 0;
cursor: pointer;
vertical-align: middle;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
box-shadow: none;
}
.RadGrid_SportsPilot input.rgPageFirst,
.RadGrid_SportsPilot input.rgPagePrev,
.RadGrid_SportsPilot input.rgPageNext,
.RadGrid_SportsPilot input.rgPageLast {
width: 30px;
height: 30px;
margin: 0 2px;
background-color: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
}
.RadGrid_SportsPilot input.rgPageFirst:hover,
.RadGrid_SportsPilot input.rgPagePrev:hover,
.RadGrid_SportsPilot input.rgPageNext:hover,
.RadGrid_SportsPilot input.rgPageLast:hover { border-color: var(--sp-ink); }
.RadGrid_SportsPilot input.rgPageFirst { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4L7 8l4 4M5 4v8'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgPagePrev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4L6 8l4 4'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgPageNext { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgPageLast { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4l4 4-4 4M11 4v8'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgSortAsc,
.RadGrid_SportsPilot input.rgSortDesc {
width: 14px;
height: 14px;
margin-left: 4px;
border: 0;
}
.RadGrid_SportsPilot input.rgSortAsc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%232F6FEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V3M3.5 6.5L7 3l3.5 3.5'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgSortDesc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%232F6FEB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M3.5 7.5L7 11l3.5-3.5'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgExpand,
.RadGrid_SportsPilot input.rgCollapse {
width: 18px;
height: 18px;
border: 1px solid var(--sp-line);
border-radius: 4px;
background-color: var(--sp-surface);
}
.RadGrid_SportsPilot input.rgExpand { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 2.5v7M2.5 6h7'/%3E%3C/svg%3E"); }
.RadGrid_SportsPilot input.rgCollapse { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 6h7'/%3E%3C/svg%3E"); }
/* =====================================================================
Color field (Controls/ColorField.ascx): text box, swatch, Choose button
===================================================================== */
table.sp-colorfield {
display: inline-table;
vertical-align: middle;
border-collapse: separate;
border-spacing: 6px 0;
margin: 0 -6px; /* cancel the outer spacing so it lines up with other fields */
}
table.sp-colorfield td { padding: 0; vertical-align: middle; }
input.sp-color-text {
width: 110px;
font-family: var(--sp-font);
}
input.sp-color-text.sp-color-invalid {
border-color: var(--sp-danger);
background-color: #FDECEA;
}
table.sp-colorfield td.sp-color-swatch {
width: 34px;
min-width: 34px;
height: 34px;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
box-shadow: inset 0 0 0 2px var(--sp-surface); /* white ring so light colors stay visible */
}
input.sp-color-btn { padding: 0 12px; }
/* =====================================================================
Color legend (Controls/ColorLegend.ascx)
Swatches keep their ddc.css classes so they match the calendar events;
these rules only set size, spacing and type. A few use !important
because ddc.css styles .dragElement for the calendar itself.
===================================================================== */
.sp-legend {
font-family: var(--sp-font);
font-size: var(--sp-text-sm);
color: var(--sp-ink);
margin: 8px 0;
}
.sp-legend table.legendTable { border-collapse: collapse; }
.sp-legend td.legendType,
.sp-legend td.legendHeader {
padding: 4px 0;
white-space: nowrap;
vertical-align: middle;
background: transparent;
border: 0;
}
/* Horizontal legend wraps onto more lines instead of running off the page */
.sp-legend-h table.legendTable,
.sp-legend-h table.legendTable > tbody,
.sp-legend-h table.legendTable > tbody > tr {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 16px;
row-gap: 4px;
}
.sp-legend-h td.legendType,
.sp-legend-h td.legendHeader { display: inline-flex; align-items: center; }
.sp-legend td.legendType div.sp-legend-swatch {
display: inline-block !important;
position: static !important;
float: none !important;
width: 14px !important;
height: 14px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 8px 0 0 !important;
padding: 0 !important;
border: 1px solid rgba(31, 42, 68, .18) !important;
border-radius: 4px !important;
box-shadow: none !important;
vertical-align: middle;
overflow: hidden;
}
.sp-legend .sp-legend-label { vertical-align: middle; }
/* Keep the meaning of the special swatches at legend size */
.sp-legend td.legendType div.sp-legend-swatch.unpaid {
border-color: #B42318 !important;
box-shadow: 0 0 0 2px rgba(180, 35, 24, .30) !important;
}
.sp-legend td.legendType div.sp-legend-swatch.reserved {
background-color: #FFA500 !important;
opacity: .8;
}
.sp-legend td.legendType div.sp-legend-swatch.selectedReserved {
box-shadow: 0 0 0 2px rgba(255, 165, 0, .45) !important;
}
.sp-legend .sp-legend-title {
color: var(--sp-muted);
font-weight: 500;
}
/* The horizontal header was rotated text; show it as a normal label */
.sp-legend .verticalText {
transform: none !important;
writing-mode: horizontal-tb !important;
filter: none !important;
width: auto !important;
height: auto !important;
}
/* =====================================================================
Color selector popup (Controls/ColorSelectorPopup.aspx)
Clicking a color applies it to the page right away; Done closes the window.
===================================================================== */
body.sp-blank .sp-colorpicker { padding: 14px; }
.sp-colorpicker-head {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
}
.sp-colorpicker-title { font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.sp-colorpicker-current { font-size: var(--sp-text-sm); color: var(--sp-muted); }
/* 12 x 18 swatches, sized to fill the 360px-wide popup window */
table.sp-color-grid {
width: auto !important;
height: auto !important;
border-collapse: separate;
border-spacing: 3px;
margin: 0 -3px 12px;
}
table.sp-color-grid td {
width: 21px; /* 23px with its border: 12 across and 18 down fit the window */
height: 21px;
padding: 0;
border: 1px solid rgba(31, 42, 68, .15);
border-radius: 4px;
cursor: pointer;
}
table.sp-color-grid td:hover,
table.sp-color-grid td:focus {
outline: none;
box-shadow: 0 0 0 2px var(--sp-surface), 0 0 0 4px var(--sp-muted);
}
/* The color currently applied */
table.sp-color-grid td.is-current {
box-shadow: 0 0 0 2px var(--sp-surface), 0 0 0 4px var(--sp-ink);
}
.sp-color-custom {
border-top: 1px solid var(--sp-line);
padding-top: 12px;
}
.sp-color-custom label {
display: block;
color: var(--sp-muted);
font-weight: 500;
margin-bottom: 6px;
}
.sp-color-custom-row { display: flex; align-items: center; gap: 8px; }
.sp-color-custom-row input[type="text"] { flex: 1; min-width: 0; }
.sp-color-preview {
flex: none;
width: 40px;
height: 40px;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
box-shadow: inset 0 0 0 2px var(--sp-surface);
background-color: var(--sp-surface);
}
.sp-color-error {
margin: 6px 0 0;
min-height: 1em;
color: var(--sp-danger);
font-size: var(--sp-text-sm);
}
/* =====================================================================
Contest summary (Controls/ContestSummaryBar.ascx)
===================================================================== */
.sp-summary {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 14px 18px;
margin: 0 0 16px;
}
.sp-summary-title {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--sp-ink);
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid var(--sp-line);
}
.sp-summary-stats {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 32px;
row-gap: 12px;
}
.sp-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-stat-label {
color: var(--sp-muted);
font-size: var(--sp-text-sm);
font-weight: 500;
}
.sp-stat-value {
color: var(--sp-ink);
font-size: 15px;
font-weight: 600;
line-height: 34px; /* same height as the color field, so values line up */
white-space: nowrap;
}
.sp-stat table.sp-colorfield { margin: 0 -6px; }
/* =====================================================================
Drag-and-drop day calendar (Controls/DayDragDropCalendar.ascx)
Colors and type only. ddc.js positions events by measuring the grid
cells, so these rules leave cell sizes, padding and borders to ddc.css.
===================================================================== */
.sp-ddc-message:empty { display: none; }
.sp-ddc-message { margin: 0 0 8px; }
table.dragDropCalendarMainTable.sp-ddc { font-family: var(--sp-font); color: var(--sp-ink); }
/* Date toolbar: < Saturday, October 10, 2026 > */
table.sp-ddc td.calHeader {
background: var(--sp-surface) none !important;
color: var(--sp-ink);
border-bottom: 1px solid var(--sp-line);
}
table.sp-ddc td.sp-ddc-toolbar {
text-align: center;
padding: 8px 0;
white-space: nowrap;
}
a.sp-ddc-navbtn {
display: inline-block;
width: 32px;
height: 32px;
line-height: 30px;
text-align: center;
vertical-align: middle;
font-size: 20px;
color: var(--sp-ink);
text-decoration: none;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
background: var(--sp-surface);
}
a.sp-ddc-navbtn:hover { border-color: var(--sp-ink); color: var(--sp-ink); }
/* The date is the date picker's button: calendar icon on the left, down-arrow on the right */
.sp-ddc-date {
display: inline-block;
vertical-align: middle;
margin: 0 10px;
padding: 0 34px 0 38px;
height: 32px;
line-height: 30px;
box-sizing: border-box;
font-family: var(--sp-font) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--sp-ink) !important;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
background-color: var(--sp-surface) !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232F6FEB' stroke-width='1.5'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235F6B7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
background-repeat: no-repeat, no-repeat;
background-position: 12px center, right 12px center;
cursor: pointer;
}
.sp-ddc-date:hover {
background-color: var(--sp-accent-soft) !important;
border-color: var(--sp-accent);
}
/* All other calendar colors are in Controls/DragDropCalendarHelpers/ddc.css. */
/* =====================================================================
Older drag-and-drop calendar (Controls/DragDropCalendar.ascx):
left panel with month navigator, Day/Month switch and unscheduled games
===================================================================== */
table.sp-ddc-layout > tbody > tr > td.sp-ddc-sidecell { padding-right: 16px; }
.sp-ddc-title {
display: inline-block;
vertical-align: middle;
margin: 0 12px;
font-family: var(--sp-font) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--sp-ink) !important;
}
/* Month navigator */
a.sp-ddc-navbtn.sp-ddc-navbtn-sm { width: 28px; height: 28px; line-height: 26px; font-size: 18px; }
.sp-ddc-navtitle {
font-family: var(--sp-font) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--sp-ink) !important;
}
table.sp-ddc-side td.sp-ddc-navcal { padding: 0 8px 8px; }
table.sp-ddc-side td.navMonthModeCell {
height: 28px;
text-align: center;
vertical-align: middle;
border-color: #EDF0F4;
}
table.sp-ddc-side td.navMonthModeCell a { color: var(--sp-ink); text-decoration: none; font-size: 13px; }
table.sp-ddc-side td.navMonthModeCell.monthModeNoDay a { color: #A8B0BD; }
table.sp-ddc-side td.navMonthModeCell.monthModeSelectedDate { background-color: var(--sp-accent); }
table.sp-ddc-side td.navMonthModeCell.monthModeSelectedDate a { color: #FFFFFF; font-weight: 600; }
table.sp-ddc-side td.navMonthModeCell.hasEvents { box-shadow: inset 0 -3px 0 #F5C04A; background-color: transparent; }
/* Date box and Day / Month switch */
table.sp-ddc-side td.sp-ddc-sidebar-row {
padding: 10px 8px;
border-top: 1px solid var(--sp-line);
}
.sp-ddc-dateline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sp-ddc-dateline label { color: var(--sp-muted); font-weight: 500; }
.sp-ddc-dateline input.txtSelectDate { flex: 1; min-width: 0; width: auto; font-weight: 500; }
.sp-seg-group {
display: inline-flex;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
overflow: hidden;
}
a.sp-seg {
padding: 6px 16px;
font-size: 13px;
font-weight: 500;
color: var(--sp-muted);
text-decoration: none;
background: var(--sp-surface);
}
a.sp-seg + a.sp-seg { border-left: 1px solid var(--sp-line); }
a.sp-seg:hover { color: var(--sp-ink); background: var(--sp-head); }
a.sp-seg.is-active { background: var(--sp-ink); color: #FFFFFF; }
/* Unscheduled games */
table.sp-ddc-side td.sp-ddc-section {
background: var(--sp-head) !important;
border-top: 1px solid var(--sp-line);
border-bottom: 1px solid var(--sp-line);
text-align: left;
padding: 8px 12px;
}
table.sp-ddc-side td.sp-ddc-section .lblSelectedDate {
color: var(--sp-muted);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
table.sp-ddc-side .theBucket { width: auto; padding: 8px; box-sizing: border-box; overflow-y: auto; }
.sp-ddc-empty { display: block; padding: 16px 0; color: var(--sp-muted); font-size: 13px; }
/* Unscheduled games are a list, not positioned on a grid */
table.sp-ddc-side .theBucket .dragElement.unscheduledMatch {
position: relative !important;
display: block;
margin: 0 0 6px;
padding: 6px 8px;
font-size: 12px;
line-height: 1.35;
border: 1px solid #F0D27A;
border-radius: 6px;
}
/* =====================================================================
Evaluation form (Controls/EvalFormControl.ascx)
===================================================================== */
.sp-eval { max-width: 760px; margin: 0 auto; }
.sp-eval-header {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 16px 20px;
margin: 0 0 12px;
}
.sp-eval-title {
font-size: 20px;
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--sp-line);
}
/* Label / value pairs in two columns: Coach Pat Smith */
dl.sp-eval-meta {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 24px;
row-gap: 6px;
margin: 0;
}
dl.sp-eval-meta dt { color: var(--sp-muted); font-weight: 500; }
dl.sp-eval-meta dd { margin: 0; color: var(--sp-ink); font-weight: 600; }
/* Hide a row when the code leaves its label blank (labels render as empty spans) */
dl.sp-eval-meta dt:has(> span:empty), dl.sp-eval-meta dt:has(> span:empty) + dd { display: none; }
.sp-eval-body {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 16px 20px;
}
/* Buttons stay visible at the bottom of the popup while the form scrolls */
.sp-eval-actions {
position: sticky;
bottom: 0;
max-width: 760px;
margin: 12px auto 0;
padding: 12px 0;
display: flex;
justify-content: flex-end;
gap: 8px;
background: var(--sp-surface);
border-top: 1px solid var(--sp-line);
}
/* Questions (built in EvalFormControl.ascx.cs) */
.sp-eval-form { display: flex; flex-direction: column; gap: 18px; }
.sp-eval-q { display: flex; flex-direction: column; gap: 6px; }
.sp-eval-q + .sp-eval-q { padding-top: 18px; border-top: 1px solid var(--sp-line-soft); }
.sp-eval-help {
display: block;
color: var(--sp-muted);
font-size: 13px;
line-height: 1.45;
}
label.sp-eval-label, span.sp-eval-label { font-weight: 600; color: var(--sp-ink); }
.sp-eval-label.is-required::after { content: " *"; color: var(--sp-danger); }
.sp-eval-q input[type="text"],
.sp-eval-q textarea,
.sp-eval-q select { width: 100%; max-width: 100%; }
.sp-eval-q textarea { min-height: 96px; resize: vertical; }
.sp-eval-q input[type="checkbox"] { margin-top: 2px; }
/* Checkbox lists: one option per line */
ul.sp-eval-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.sp-eval-options li { display: flex; align-items: center; gap: 2px; }
ul.sp-eval-options label { cursor: pointer; }
/* =====================================================================
Evaluation forms: team status list (Controls/EvalFormTeamStatus.ascx)
===================================================================== */
/* A labeled filter above a grid: "Coach [dropdown]" */
.sp-filterbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.sp-filter-label { color: var(--sp-muted); font-weight: 500; }
/* Status shown as a small pill */
.sp-status {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
color: var(--sp-ink);
background: var(--sp-head);
border: 1px solid var(--sp-line);
white-space: nowrap;
}
.sp-status:empty { display: none; }
.sp-status.is-final { color: var(--sp-success); background: var(--sp-success-soft); border-color: #BFE3CD; }
.sp-status.is-draft { color: #8A5A00; background: #FFF4CC; border-color: #F0D27A; }
.sp-status.is-pending { color: var(--sp-muted); }
/* Small button-style link, e.g. "View" in a grid row */
a.sp-btn-sm {
/* control border so the small buttons stand out on white cards */
display: inline-block;
padding: 0 12px;
height: 28px;
line-height: 26px;
font-size: 13px;
font-weight: 500;
color: var(--sp-ink);
text-decoration: none;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
cursor: pointer;
}
a.sp-btn-sm:hover { border-color: var(--sp-ink); color: var(--sp-ink); }
/* =====================================================================
Segmented radio lists: asp:RadioButtonList with RepeatLayout="Flow"
and CssClass="sp-seg-radio" shows as [ Day | Week | Range ]
The real radio buttons stay in the page (keyboard and AutoPostBack
still work); only their labels are shown.
===================================================================== */
.sp-seg-radio {
display: inline-flex;
vertical-align: middle;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
overflow: hidden;
background: var(--sp-surface);
}
.sp-seg-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.sp-seg-radio label {
display: inline-block;
padding: 0 14px;
height: 32px;
line-height: 32px;
font-size: 13px;
font-weight: 500;
color: var(--sp-muted);
cursor: pointer;
white-space: nowrap;
}
.sp-seg-radio label:not(:first-of-type) { border-left: 1px solid var(--sp-line); }
.sp-seg-radio label:hover { color: var(--sp-ink); background: var(--sp-head); }
.sp-seg-radio input[type="radio"]:checked + label { background: var(--sp-ink); color: #FFFFFF; }
.sp-seg-radio input[type="radio"]:focus-visible + label { outline: 2px solid var(--sp-accent); outline-offset: -2px; }
.sp-seg-radio br { display: none; }
/* Filter bars with several labeled filters in a row */
.sp-filterbar .sp-filter { display: inline-flex; align-items: center; gap: 8px; }
.sp-events-filters { gap: 12px 20px; }
/* Empty grid message */
.sp-empty { padding: 20px 0; text-align: center; color: var(--sp-muted); }
/* =====================================================================
Telerik date picker custom skin:
Skin="SportsPilot" EnableEmbeddedSkins="false" on a RadDatePicker
(the skin carries over to its date box and popup calendar).
Telerik's base stylesheet still handles layout and popup positioning.
===================================================================== */
/* Date box + calendar button, joined: [ 10/10/2026 | (cal) ] */
div.RadPicker_SportsPilot { display: inline-block; vertical-align: middle; }
div.RadPicker_SportsPilot table.rcTable { border-collapse: separate; border-spacing: 0; }
div.RadPicker_SportsPilot table.rcTable td { padding: 0; border: 0; vertical-align: middle; }
span.RadInput_SportsPilot { display: block; }
span.RadInput_SportsPilot input.riTextBox {
width: 100% !important;
box-sizing: border-box;
height: 34px;
min-height: 34px;
padding: 6px 10px;
font-family: var(--sp-font);
font-size: var(--sp-text);
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-right: 0;
border-radius: var(--sp-radius) 0 0 var(--sp-radius);
outline: none;
}
span.RadInput_SportsPilot input.riTextBox.riHover { border-color: #C3CCDA; }
span.RadInput_SportsPilot input.riTextBox.riFocused {
border-color: var(--sp-accent);
box-shadow: 0 0 0 1px var(--sp-accent);
}
span.RadInput_SportsPilot input.riTextBox.riEmpty { color: #A8B0BD; }
span.RadInput_SportsPilot input.riTextBox.riError { border-color: var(--sp-danger); color: var(--sp-danger); }
span.RadInput_SportsPilot input.riTextBox.riDisabled { background: var(--sp-page); color: var(--sp-muted); }
div.RadPicker_SportsPilot a.rcCalPopup {
display: block;
width: 34px;
height: 34px;
box-sizing: border-box;
margin: 0;
overflow: hidden;
text-indent: -9999px;
border: 1px solid var(--sp-line);
border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
background-color: var(--sp-surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232F6FEB' stroke-width='1.5'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
div.RadPicker_SportsPilot a.rcCalPopup:hover,
div.RadPicker_SportsPilot a.rcCalPopup.rcHover { background-color: var(--sp-accent-soft); border-color: var(--sp-accent); }
div.RadPicker_SportsPilot a.rcCalPopup:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }
/* Popup calendar */
table.RadCalendar_SportsPilot {
font-family: var(--sp-font);
font-size: 13px;
color: var(--sp-ink);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
border-collapse: separate;
padding: 8px;
}
table.RadCalendar_SportsPilot .rcTitlebar {
background: transparent;
border: 0;
padding: 0 0 6px;
}
table.RadCalendar_SportsPilot .rcTitlebar table { width: 100%; }
table.RadCalendar_SportsPilot .rcTitlebar td { padding: 0; border: 0; }
table.RadCalendar_SportsPilot .rcTitle {
display: block;
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--sp-ink);
text-decoration: none;
padding: 4px 6px;
border-radius: var(--sp-radius);
cursor: pointer;
}
table.RadCalendar_SportsPilot .rcTitle:hover { background: var(--sp-accent-soft); }
/* Month arrows: < and >, plus << and >> for a year */
table.RadCalendar_SportsPilot .rcTitlebar a.rcPrev,
table.RadCalendar_SportsPilot .rcTitlebar a.rcNext,
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastPrev,
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastNext {
display: block;
width: 28px;
height: 28px;
overflow: hidden;
text-indent: -9999px;
border-radius: var(--sp-radius);
background-repeat: no-repeat;
background-position: center;
}
table.RadCalendar_SportsPilot .rcTitlebar a.rcPrev:hover,
table.RadCalendar_SportsPilot .rcTitlebar a.rcNext:hover,
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastPrev:hover,
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastNext:hover { background-color: var(--sp-accent-soft); }
table.RadCalendar_SportsPilot .rcTitlebar a.rcPrev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4L6 8l4 4'/%3E%3C/svg%3E"); }
table.RadCalendar_SportsPilot .rcTitlebar a.rcNext { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%231F2A44' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E"); }
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastPrev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F6B7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4L4 8l4 4M12 4L8 8l4 4'/%3E%3C/svg%3E"); }
table.RadCalendar_SportsPilot .rcTitlebar a.rcFastNext { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F6B7E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l4 4-4 4M8 4l4 4-4 4'/%3E%3C/svg%3E"); }
/* Day grid */
table.RadCalendar_SportsPilot .rcMainTable { border-collapse: separate; border-spacing: 2px; }
table.RadCalendar_SportsPilot .rcMainTable th {
color: var(--sp-muted);
font-size: 12px;
font-weight: 500;
padding: 4px 0;
border: 0;
background: transparent;
}
table.RadCalendar_SportsPilot .rcMainTable td { padding: 0; border: 0; text-align: center; background: transparent; }
table.RadCalendar_SportsPilot .rcMainTable td a,
table.RadCalendar_SportsPilot .rcMainTable td span {
display: block;
width: 32px;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: var(--sp-ink);
text-decoration: none;
border-radius: var(--sp-radius);
}
table.RadCalendar_SportsPilot .rcMainTable td a:hover,
table.RadCalendar_SportsPilot .rcMainTable td.rcHover a { background: var(--sp-accent-soft); }
table.RadCalendar_SportsPilot .rcMainTable td.rcOtherMonth a { color: #A8B0BD; }
table.RadCalendar_SportsPilot .rcMainTable td.rcOutOfRange span { color: #C9CED6; }
table.RadCalendar_SportsPilot .rcMainTable td.rcToday a { box-shadow: inset 0 0 0 1px var(--sp-accent); font-weight: 600; }
table.RadCalendar_SportsPilot .rcMainTable td.rcSelected a { background: var(--sp-accent); color: #FFFFFF; font-weight: 600; }
/* Month / year chooser (click the calendar title) */
table.RadCalendarMonthView_SportsPilot {
font-family: var(--sp-font);
font-size: 13px;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
border-collapse: separate;
padding: 8px;
}
table.RadCalendarMonthView_SportsPilot td { padding: 2px; border: 0; text-align: center; }
table.RadCalendarMonthView_SportsPilot td a {
display: block;
padding: 4px 8px;
color: var(--sp-ink);
text-decoration: none;
border-radius: var(--sp-radius);
}
table.RadCalendarMonthView_SportsPilot td a:hover { background: var(--sp-accent-soft); }
table.RadCalendarMonthView_SportsPilot td.rcSelected a { background: var(--sp-accent); color: #FFFFFF; }
table.RadCalendarMonthView_SportsPilot td.rcButtons { padding-top: 8px; border-top: 1px solid var(--sp-line-soft); }
table.RadCalendarMonthView_SportsPilot input[type="button"] { height: 28px; padding: 0 10px; font-size: 13px; margin: 0 2px; }
/* =====================================================================
Field status (Controls/FieldStatus.ascx): facilities that expand to
their fields. Nested field tables sit inside the facility row.
===================================================================== */
.RadGrid_SportsPilot .rgDetailTable {
margin: 4px 0 12px;
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius);
overflow: hidden;
background: var(--sp-surface);
}
.RadGrid_SportsPilot .rgDetailTable .rgHeader { background: #FBFCFD; }
/* The cell holding a nested table: light grey well, no row divider */
.RadGrid_SportsPilot .rgMasterTable > tbody > tr:not(.rgRow):not(.rgAltRow) > td {
background: var(--sp-head);
border-bottom: 1px solid var(--sp-line-soft);
}
.sp-fs-name { font-weight: 600; }
.sp-fs-muted { color: var(--sp-muted); font-size: 13px; }
.sp-fs-notes { color: var(--sp-muted); max-width: 360px; }
/* Status: icon + word, e.g. (o) Open */
.sp-field-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.sp-field-status img { height: 20px; width: auto; }
/* "View map" link with a pin icon */
a.sp-map-link {
display: inline-block;
padding-left: 20px;
font-size: 13px;
font-weight: 500;
color: var(--sp-accent);
text-decoration: none;
white-space: nowrap;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%232F6FEB' stroke-width='1.4'%3E%3Cpath d='M7 13s4.5-4.2 4.5-7.5a4.5 4.5 0 0 0-9 0C2.5 8.8 7 13 7 13z'/%3E%3Ccircle cx='7' cy='5.5' r='1.6'/%3E%3C/svg%3E") no-repeat left center;
}
a.sp-map-link:hover { color: var(--sp-ink); text-decoration: underline; }
/* Field status badges: Open / Closed */
.sp-status.is-open { color: var(--sp-success); background: var(--sp-success-soft); border-color: #BFE3CD; }
.sp-status.is-closed { color: var(--sp-danger); background: #FDECEA; border-color: #F5C2BC; }
.sp-status.is-open::before,
.sp-status.is-closed::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 6px;
border-radius: 50%;
background: currentColor;
vertical-align: 1px;
}
/* =====================================================================
Game start times (Controls/GameStartTimes.ascx):
1 Dates | 2 Times | Add -> | 3 Game start times
===================================================================== */
.sp-gst {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
margin: 0 0 16px;
}
.sp-gst-col {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 200px;
}
.sp-gst-dates { flex: 0 1 300px; }
.sp-gst-times { flex: 0 1 170px; }
.sp-gst-result { flex: 1 1 260px; }
.sp-gst-head { display: flex; align-items: center; gap: 8px; }
.sp-gst-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--sp-ink);
color: #FFFFFF;
font-size: 12px;
font-weight: 600;
}
.sp-gst-title { font-weight: 600; font-size: 15px; color: var(--sp-ink); }
.sp-gst-count {
margin-left: auto;
min-width: 28px;
padding: 2px 8px;
border-radius: 999px;
background: var(--sp-accent-soft);
color: var(--sp-accent);
font-weight: 600;
font-size: 12px;
text-align: center;
}
.sp-gst-hint { margin: 0; color: var(--sp-muted); font-size: 12px; }
.sp-gst-tools { display: flex; gap: 8px; }
.sp-gst-tools-end { justify-content: flex-end; margin-top: auto; }
.sp-gst-tools input[type="submit"] { height: 30px; font-size: 13px; padding: 0 12px; }
select.sp-gst-list {
width: 100%;
height: 260px;
padding: 4px;
font-size: 13px;
}
.sp-gst-result select.sp-gst-list { font-variant-numeric: tabular-nums; }
/* Add button sits between Times and the result */
.sp-gst-add { display: flex; align-items: center; }
/* Days picked on the date calendar */
table.sp-calendar.sp-calendar-picker td.sp-cal-picked { background: var(--sp-accent); color: #FFFFFF; font-weight: 600; }
table.sp-calendar.sp-calendar-picker td.sp-cal-picked a:hover { background: transparent; }
.sp-hidden-label:empty { display: none; }
/* Date picker skin fixes (after first look):
- no black border around the day grid (from Telerik's base stylesheet)
- no second, grey offset shadow under the popup (Telerik's own shadow)
- week numbers muted, for pickers that don't turn them off
- a light divider between the date box and the calendar button */
table.RadCalendar_SportsPilot .rcMain,
table.RadCalendar_SportsPilot .rcMain > table,
table.RadCalendar_SportsPilot .rcMainTable,
table.RadCalendar_SportsPilot .rcMainTable td,
table.RadCalendar_SportsPilot .rcMainTable th { border: 0 !important; }
.RadCalendarPopupShadow,
.RadCalendarPopupShadow .RadCalendar_SportsPilot + * { box-shadow: none !important; background: transparent !important; }
.RadCalendarPopup { box-shadow: none !important; border: 0 !important; background: transparent !important; }
table.RadCalendar_SportsPilot .rcMainTable th[scope="row"],
table.RadCalendar_SportsPilot .rcMainTable .rcRowHeader {
color: #A8B0BD;
font-size: 11px;
font-weight: 400;
padding-right: 4px;
}
div.RadPicker_SportsPilot table.rcTable td,
div.RadPicker_SportsPilot span.riSingle { border: 0 !important; }
div.RadPicker_SportsPilot a.rcCalPopup { border-left: 1px solid var(--sp-line) !important; }
/* Read-only date boxes that open a calendar on click (Controls/JSCalendar.ascx) */
input.sp-date-input.sp-date-input-readonly { background-color: var(--sp-surface); color: var(--sp-ink); }
input.sp-date-input.sp-date-input-readonly:hover { border-color: #C3CCDA; }
/* =====================================================================
Reports built on RadGrid (e.g. Controls/MatchesByTeamReport.ascx)
===================================================================== */
.sp-report-team { font-weight: 600; }
.sp-report-count {
display: inline-block;
min-width: 28px;
padding: 1px 8px;
border-radius: 999px;
background: var(--sp-accent-soft);
color: var(--sp-accent);
font-weight: 600;
font-size: 12px;
text-align: center;
}
.sp-report-count:empty { display: none; }
.sp-report-ha {
display: inline-block;
min-width: 22px;
padding: 1px 6px;
border-radius: 4px;
background: var(--sp-head);
border: 1px solid var(--sp-line);
color: var(--sp-muted);
font-size: 11px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
}
.sp-report-ha:empty { display: none; }
/* Printing: no expand buttons, shadows or row tints; keep each team's games together */
@media print {
.RadGrid_SportsPilot { border-color: #BFC6D1; border-radius: 0; }
.RadGrid_SportsPilot input.rgExpand,
.RadGrid_SportsPilot input.rgCollapse,
.RadGrid_SportsPilot .rgExpandCol { display: none !important; }
.RadGrid_SportsPilot .rgAltRow > td,
.RadGrid_SportsPilot .rgRow > td,
.RadGrid_SportsPilot .rgMasterTable > tbody > tr:not(.rgRow):not(.rgAltRow) > td { background: #FFFFFF !important; }
.RadGrid_SportsPilot .rgDetailTable { break-inside: avoid; }
.RadGrid_SportsPilot .rgHeader { background: #FFFFFF !important; color: #000000; border-bottom: 1px solid #000000; }
.sp-report-count, .sp-report-ha, .sp-status { background: none !important; border: 0 !important; padding: 0; color: #000000 !important; }
}
/* =====================================================================
"Please wait" box during updates (Controls/ModalUpdateProgress.ascx)
===================================================================== */
.sp-progress {
min-width: 240px;
max-width: 360px;
padding: 24px 28px 20px;
text-align: center;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
font-family: var(--sp-font);
color: var(--sp-ink);
}
.sp-progress-message { font-weight: 500; line-height: 1.45; }
.sp-progress-message img { display: none; } /* old animated GIFs, replaced by the spinner */
.sp-progress-actions { margin-top: 16px; }
.sp-progress-actions a.sp-btn-sm { font-size: 13px; }
/* Spinning ring */
.sp-spinner {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 auto 12px;
border-radius: 50%;
border: 3px solid var(--sp-accent-soft);
border-top-color: var(--sp-accent);
animation: sp-spin .8s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.sp-spinner { animation-duration: 2.4s; }
}
/* The dimmed page behind the box (ModalPopupExtender BackgroundCssClass) */
.modalBackground { background-color: var(--sp-ink); opacity: .35; }
/* =====================================================================
Small information cards with label / value pairs
(e.g. Controls/OfficialGameInfoControl.ascx)
===================================================================== */
.sp-info-card {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 14px 18px;
margin: 0 0 16px;
max-width: 560px;
}
.sp-info-title {
font-size: 15px;
font-weight: 600;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--sp-line);
}
.sp-info-empty { color: var(--sp-muted); font-size: 13px; }
/* Label / value pairs in two columns */
dl.sp-details {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 24px;
row-gap: 6px;
margin: 0;
}
dl.sp-details dt { color: var(--sp-muted); font-weight: 500; }
dl.sp-details dd { margin: 0; color: var(--sp-ink); font-weight: 600; overflow-wrap: anywhere; }
/* =====================================================================
Popup page heading (Controls/PopupHeader.ascx)
===================================================================== */
.sp-popup-header {
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--sp-line);
}
.sp-popup-header-title {
font-size: 18px;
font-weight: 600;
color: var(--sp-ink);
line-height: 1.3;
border-radius: var(--sp-radius);
}
/* When a page passes BGColor, give the coloured title some room */
.sp-popup-header-title[style*="background"] { padding: 8px 12px; }
.sp-popup-header-body {
margin-top: 4px;
color: var(--sp-muted);
font-size: 13px;
line-height: 1.45;
}
.sp-popup-header-body:empty { display: none; }
/* =====================================================================
Repeating date pattern (Controls/RecurrenceDate.ascx)
===================================================================== */
.sp-recur { display: flex; flex-direction: column; gap: 12px; }
.sp-recur-range { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-recur-field { display: flex; flex-direction: column; gap: 4px; }
.sp-recur-mode { margin-bottom: 10px; }
.sp-recur-options { display: flex; flex-direction: column; gap: 8px; }
.sp-recur-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.sp-recur-line label { cursor: pointer; }
input.sp-recur-num { width: 56px; text-align: center; padding: 6px 4px; }
.sp-recur-error { color: var(--sp-danger); font-size: 12px; }
/* Days of the week as chips: [Mon] [Tue] ... filled navy when on */
.sp-day-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-day-chips br { display: none; }
.sp-day-chips input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.sp-day-chips label {
display: inline-block;
min-width: 44px;
padding: 0 10px;
height: 30px;
line-height: 28px;
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--sp-muted);
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: 999px;
cursor: pointer;
user-select: none;
}
.sp-day-chips label:hover { border-color: var(--sp-ink); color: var(--sp-ink); }
.sp-day-chips input[type="checkbox"]:checked + label { background: var(--sp-ink); border-color: var(--sp-ink); color: #FFFFFF; }
.sp-day-chips input[type="checkbox"]:focus-visible + label { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
/* Facility / Field picker (Controls/ResourcesControl.ascx) */
.sp-resource-picker { gap: 12px 20px; }
.sp-resource-picker select { min-width: 200px; }
/* =====================================================================
Slot picker (Controls/ResourceSlotSelectionControl.ascx)
===================================================================== */
.sp-slotpick {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 16px;
margin: 0 0 8px;
}
.sp-slotpick-form { flex: 1 1 320px; max-width: 480px; margin: 0; }
.sp-slotpick-cal { flex: 0 0 auto; margin: 0; }
.sp-slotpick-form table.sp-form td:first-child { width: 110px; }
/* Section heading above a grid */
.sp-section-title {
font-size: 15px;
font-weight: 600;
margin: 20px 0 10px;
}
/* =====================================================================
Standings: one section per bracket / pool (Controls/ScheduleStandings.ascx)
===================================================================== */
.sp-standings { margin: 0 0 24px; }
.sp-standings-title {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px;
padding-left: 10px;
border-left: 3px solid var(--sp-accent);
line-height: 1.3;
}
@media print {
.sp-standings { break-inside: avoid; }
.sp-standings-title { border-left-color: #000000; }
}
/* =====================================================================
Schedule summary at the top of the schedule wizard (Controls/ScheduleSummary.ascx)
===================================================================== */
.sp-schedsum {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px 24px;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 14px 18px;
margin: 0 0 16px;
}
.sp-schedsum-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-schedsum-wide { grid-column: span 2; }
.sp-schedsum-value {
color: var(--sp-ink);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sp-schedsum table.sp-colorfield { margin: 0 -6px; }
@media (max-width: 520px) { .sp-schedsum-wide { grid-column: auto; } }
/* =====================================================================
Manage alerts (Controls/SPManageAlerts.ascx): three steps
===================================================================== */
.sp-alerts { max-width: 720px; }
.sp-alerts-title { font-size: 22px; margin: 0 0 12px; }
.sp-alerts-step { padding: 20px 24px; }
.sp-alerts-lead { margin: 0 0 16px; color: var(--sp-ink); }
.sp-alerts-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.sp-alerts-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-alerts-row input[type="text"] { flex: 1 1 260px; max-width: 360px; }
input.sp-alerts-code { flex: 0 1 160px; letter-spacing: .2em; font-weight: 600; text-align: center; }
.sp-alerts-terms { display: flex; align-items: center; gap: 2px; margin: 0 0 12px; }
.sp-alerts-terms label { cursor: pointer; }
.sp-alerts-note { margin: 0; color: var(--sp-muted); font-size: 13px; }
.sp-alerts-device {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 8px;
}
.sp-alerts-step .RadGrid_SportsPilot { margin-top: 12px; }
.sp-alerts-actions { margin-top: 16px; }
/* Step indicator: RadTabStrip with Skin="SportsPilot" EnableEmbeddedSkins="false" */
.RadTabStrip_SportsPilot { margin: 0 0 12px; }
.RadTabStrip_SportsPilot .rtsUL { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.RadTabStrip_SportsPilot .rtsLI { list-style: none; float: none; }
.RadTabStrip_SportsPilot .rtsLink {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--sp-line);
background: var(--sp-surface);
color: var(--sp-muted);
font-family: var(--sp-font);
font-size: 13px;
font-weight: 500;
text-decoration: none;
white-space: pre; /* keeps the space after the step number */
}
.RadTabStrip_SportsPilot .rtsLink .rtsOut,
.RadTabStrip_SportsPilot .rtsLink .rtsIn,
.RadTabStrip_SportsPilot .rtsLink .rtsTxt { background: none; padding: 0; margin: 0; display: inline; }
.RadTabStrip_SportsPilot .rtsLink.rtsSelected { background: var(--sp-ink); border-color: var(--sp-ink); color: #FFFFFF; }
.RadTabStrip_SportsPilot .rtsLink.rtsDisabled { opacity: .6; cursor: default; }
/* Alerts sign-up popup (Controls/SPNoticeSubscribe.ascx) */
.sp-alerts-popup { width: 520px; max-width: 100%; padding: 16px 20px; box-sizing: border-box; }
.sp-alerts-popup .sp-alerts-title { font-size: 18px; }
/* "Get alerts" button with a bell */
a.sp-alerts-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px 0 32px;
height: 30px;
line-height: 28px;
font-size: 13px;
font-weight: 500;
color: var(--sp-accent);
text-decoration: none;
background: var(--sp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%232F6FEB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11V7a4 4 0 0 1 8 0v4l1.2 1.5H2.8L4 11zM6.5 14a1.6 1.6 0 0 0 3 0'/%3E%3C/svg%3E") no-repeat 10px center;
border: 1px solid var(--sp-line);
border-radius: 999px;
}
a.sp-alerts-trigger:hover { border-color: var(--sp-accent); background-color: var(--sp-accent-soft); color: var(--sp-ink); }
/* The new team subscription in the alerts grid */
.RadGrid_SportsPilot tr.sp-row-new > td { background: #EEF4FF; }
.sp-badge-new {
display: inline-block;
margin-left: 6px;
padding: 0 7px;
border-radius: 999px;
background: var(--sp-accent);
color: #FFFFFF;
font-size: 11px;
font-weight: 600;
line-height: 18px;
vertical-align: 1px;
}
/* Sport / Program / Schedule pickers (Controls/SportProgramSelection.ascx) */
.sp-sportprogram { gap: 12px 20px; }
.sp-sportprogram select { min-width: 160px; max-width: 320px; }
.sp-filterbar .sp-filter:empty { display: none; }
/* Time picker: [ 7 ] : [ 30 ] [ PM ] (Controls/Time.ascx) */
.sp-time { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.sp-time select { width: auto; min-width: 64px; padding-right: 26px; }
.sp-time select.sp-time-ampm { margin-left: 4px; }
.sp-time-sep { color: var(--sp-muted); font-weight: 600; padding: 0 1px; }
/* Alert group list (Admin/Controls/AlertGroupList.ascx) */
.sp-grouplist-stats { display: block; margin-top: 8px; color: var(--sp-muted); font-size: 13px; }
.sp-grouplist-stats:empty { display: none; }
/* =====================================================================
Emailer (Admin/Controls/Emailer.ascx): compose form
===================================================================== */
.sp-emailer { max-width: 760px; }
.sp-emailer-fields {
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
padding: 6px 16px;
margin: 0 0 12px;
}
.sp-emailer-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.sp-emailer-row + .sp-emailer-row { border-top: 1px solid var(--sp-line-soft); }
.sp-emailer-row-top { align-items: flex-start; }
.sp-emailer-row-top .sp-emailer-label { padding-top: 8px; }
.sp-emailer-label {
flex: 0 0 80px;
color: var(--sp-muted);
font-weight: 500;
}
.sp-emailer-input { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-emailer-input input[type="text"] { width: 100%; }
.sp-emailer-input input[readonly] { background: var(--sp-page); color: var(--sp-muted); }
.sp-emailer-editor iframe, .sp-emailer-editor textarea { max-width: 100%; }
.sp-emailer-actions { margin-top: 4px; }
/* Program / League / Division picker (Admin/Controls/ProgramLeagueSelection.ascx) */
.sp-proglg { margin-bottom: 16px; }
.sp-proglg-count { color: var(--sp-muted); font-size: 13px; }
.sp-proglg-count:empty { display: none; }
/* Fields with stats (Admin/Controls/ResourcesWithStatsSelector.ascx) */
table.sp-resstats { margin: 0 0 16px; }
table.sp-resstats td { font-variant-numeric: tabular-nums; }
/* Selected time slots (Admin/Controls/ResourceTimeSlotSelection.ascx) */
.sp-slotsel-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px;
}
.sp-slotsel-bar .sp-section-title { margin: 0; }
/* =====================================================================
Evaluation forms admin (Admin/EvalForms/Default.aspx) and shared grid bits
===================================================================== */
.sp-page-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.sp-evalforms-intro { margin: 0 0 12px; }
.sp-note { display: block; color: var(--sp-muted); }
.sp-note:empty { display: none; }
/* Command row above a grid: a small "+ Add" button */
.sp-grid-commands { display: flex; justify-content: flex-end; padding: 4px 0; }
a.sp-btn-add::before { content: "+"; font-weight: 700; margin-right: 6px; }
/* Row actions: Edit · Copy · View */
.sp-row-actions a { margin-left: 12px; font-weight: 500; }
.sp-row-actions a:first-child { margin-left: 0; }
/* =====================================================================
Popup edit forms (e.g. Admin/EvalForms/EvalFormControlEdit.aspx)
===================================================================== */
.sp-popup-form { padding: 16px 20px; max-width: 640px; }
.sp-popup-form table.sp-form { width: 100%; }
.sp-popup-form table.sp-form td:first-child { width: 130px; }
.sp-popup-form table.sp-form input[type="text"],
.sp-popup-form table.sp-form textarea,
.sp-popup-form table.sp-form select { width: 100%; max-width: 420px; box-sizing: border-box; }
.sp-popup-form table.sp-form select.sp-select-narrow { width: auto; min-width: 90px; }
.sp-field-hint { display: block; margin-top: 4px; color: var(--sp-muted); font-size: 12px; }
.sp-validation {
margin: 0 0 12px;
padding: 10px 14px;
border: 1px solid #F5C2BC;
background: #FDECEA;
color: var(--sp-danger);
border-radius: var(--sp-radius);
font-size: 13px;
}
.sp-validation ul { margin: 4px 0 0; padding-left: 18px; }
/* Save / Cancel on the right, Delete on the left */
.sp-popup-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sp-actions-spacer { flex: 1; }
input.sp-btn-danger {
background: var(--sp-surface);
color: var(--sp-danger);
border: 1px solid #F5C2BC;
}
input.sp-btn-danger:hover { background: #FDECEA; border-color: var(--sp-danger); }
/* Answer choices popup (Admin/EvalForms/EvalFormControlValuesEdit.aspx) */
.sp-choices-question { margin: 0 0 12px; }
.sp-choice-edit { margin: 0 0 16px; }
.sp-choice-edit .sp-section-title { margin-top: 0; }
.sp-status-ok { display: block; color: var(--sp-success); font-weight: 500; }
.sp-status-ok:empty { display: none; }
.RadGrid_SportsPilot td.sp-row-delete a { color: var(--sp-danger); }
/* Evaluation form reports (Admin/EvalForms/EvalFormReports.aspx) */
.sp-reportbar { align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sp-reportbar select { min-width: 220px; }
.sp-reportbar-range label { cursor: pointer; }
.sp-reportbar-dates { display: inline-flex; align-items: center; gap: 8px; }
a.sp-btn-export::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
vertical-align: -1px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231E7F4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 1v7M3 5l3 3 3-3M1.5 10.5h9'/%3E%3C/svg%3E") no-repeat center;
}
/* Answers can be long: let report cells wrap */
.sp-report-grid .rgMasterTable td { white-space: normal; vertical-align: top; }
/* Find a team (Admin/EvalForms/EvalFormRosterView.aspx) */
.sp-rosterfind { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.sp-rosterfind-step { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.sp-rosterfind-step + .sp-rosterfind-step { padding-top: 12px; border-top: 1px solid var(--sp-line-soft); }
.sp-rosterfind-step .sp-filterbar { margin: 0; }
/* Popup that shows a whole form (Admin/EvalForms/EvalFormView.aspx) */
.sp-popup-view { padding: 16px 20px; max-width: 760px; }
.sp-preview-note {
margin: 0 0 12px;
padding: 8px 12px;
border-radius: var(--sp-radius);
background: var(--sp-accent-soft);
color: var(--sp-ink);
font-size: 13px;
}
/* Form popup: use the window's width (up to 760px) and keep the summary readable */
.sp-popup-view { width: 100%; box-sizing: border-box; margin: 0 auto; }
.sp-popup-view dl.sp-eval-meta { grid-template-columns: max-content 1fr; }
/* =====================================================================
Team home fields (Admin/Leagues/AssignTeamHomeFields.aspx)
===================================================================== */
.sp-homefields-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
margin-bottom: 16px;
}
.sp-homefields-filters .sp-filterbar { margin: 0; }
.sp-homefields-list { flex: 1 1 240px; }
select.sp-homefields-box { height: 380px; }
.sp-homefields-actions { flex-direction: column; justify-content: center; gap: 10px; }
.sp-homefields-result { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.sp-homefields-result > span:empty::before { content: "Nothing assigned yet."; color: var(--sp-muted); }
ul.sp-homefields-ul { list-style: none; margin: 0; padding: 0; }
ul.sp-homefields-ul > li { padding: 6px 0; border-bottom: 1px solid var(--sp-line-soft); }
ul.sp-homefields-ul > li:last-child { border-bottom: 0; }
ul.sp-homefields-ul ul { margin: 2px 0 0; padding-left: 16px; color: var(--sp-muted); }
.sp-homefields-none { display: block; color: var(--sp-muted); font-style: italic; }
.sp-homefields-actions input.sp-btn-danger { white-space: normal; max-width: 140px; }
/* ---------------------------------------------------------------------
Contrast pass: controls stand out from white cards
--------------------------------------------------------------------- */
a.sp-btn-sm { border-color: var(--sp-control-line) !important; box-shadow: 0 1px 2px rgba(31, 42, 68, .08); }
a.sp-btn-sm:hover { border-color: var(--sp-control-line-hover) !important; background: var(--sp-head); }
input.sp-btn-danger { border-color: #E3A39B; box-shadow: 0 1px 2px rgba(31, 42, 68, .08); }
/* Telerik date pickers use the same control border */
div.RadPicker_SportsPilot .riTextBox,
div.RadPicker_SportsPilot input.riTextBox { border-color: var(--sp-control-line) !important; }
div.RadPicker_SportsPilot a.rcCalPopup { border-color: var(--sp-control-line) !important; }
/* Multi-select lists: selected rows in the accent colour, even when the list isn't focused
(browsers otherwise use a pale grey that barely shows) */
select[multiple] option:checked,
select[size] option:checked {
background: var(--sp-accent-soft) linear-gradient(0deg, var(--sp-accent-soft), var(--sp-accent-soft));
color: var(--sp-ink);
font-weight: 600;
}
select[multiple]:focus option:checked,
select[size]:focus option:checked {
background: var(--sp-accent) linear-gradient(0deg, var(--sp-accent), var(--sp-accent));
color: #FFFFFF;
}
/* Divisions (Admin/Leagues/DivisionAdd.aspx) */
.sp-rosterfind-step .sp-filter > span { display: inline-flex; align-items: center; gap: 8px; }
.sp-divisions-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--sp-muted); }
.sp-divisions-loading .sp-spinner { width: 16px; height: 16px; margin: 0; border-width: 2px; }
.sp-divisions-name { margin-bottom: 16px; }
.sp-divisions-name input[type="text"] { min-width: 280px; }
select.sp-divisions-box { height: 300px; }
.sp-divisions-hint { margin: 8px 0 0; }
.sp-divisions-actions { max-width: 100%; }
/* =====================================================================
Divisions: league overview (Admin/Leagues/DivisionAdd.aspx)
===================================================================== */
.sp-divchips {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin: 0 0 16px;
}
.sp-divchip {
position: relative;
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 14px;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
cursor: pointer;
text-decoration: none;
color: var(--sp-ink);
min-height: 58px;
box-sizing: border-box;
}
.sp-divchip:hover { border-color: var(--sp-control-line-hover); }
.sp-divchip.is-active { border: 2px solid var(--sp-accent); padding: 9px 13px; background: var(--sp-accent-soft); }
.sp-divchip-name { font-size: 13px; color: var(--sp-muted); padding-right: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-divchip-count { font-size: 22px; font-weight: 600; line-height: 1.1; }
.sp-divchip-edit { position: absolute; top: 8px; right: 10px; font-size: 12px; }
.sp-divchip-none.is-attention { background: #FFF6E5; border-color: #F0C77A; }
.sp-divchip-none.is-attention .sp-divchip-name,
.sp-divchip-none.is-attention .sp-divchip-count { color: #8A5A00; }
a.sp-divchip-new {
align-items: center;
justify-content: center;
border-style: dashed;
border-color: var(--sp-control-line);
color: var(--sp-accent);
font-weight: 500;
}
a.sp-divchip-new:hover { background: var(--sp-accent-soft); text-decoration: none; }
.sp-divedit { margin: 0 0 16px; }
.sp-divedit .sp-section-title { margin-top: 0; }
.sp-divedit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sp-divedit-row input[type="text"] { min-width: 260px; }
.sp-divtools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin: 0 0 8px;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
}
input.sp-divsearch { width: 220px; }
.sp-divfilter-note { font-size: 13px; color: var(--sp-muted); }
.sp-divselected { font-size: 13px; color: var(--sp-muted); }
.sp-divtools select.sp-bulk-div { min-width: 160px; }
.sp-divtable-wrap { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); overflow: hidden; }
table.sp-divtable { width: 100%; border-collapse: collapse; font-size: var(--sp-text); }
table.sp-divtable thead th {
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--sp-muted);
background: var(--sp-head);
padding: 8px 12px;
border-bottom: 1px solid var(--sp-line);
}
table.sp-divtable td { padding: 6px 12px; border-bottom: 1px solid var(--sp-line-soft); vertical-align: middle; }
table.sp-divtable tr:last-child td { border-bottom: 0; }
table.sp-divtable tr.sp-divrow:nth-child(even) td { background: var(--sp-row-alt); }
table.sp-divtable tr.sp-divrow:hover td { background: var(--sp-row-hover); }
table.sp-divtable tr.sp-divrow.is-selected td { background: var(--sp-row-selected); }
.sp-divtable-check { width: 36px; text-align: center; }
.sp-divtable-div { width: 240px; }
.sp-divtable-div select { width: 100%; }
.sp-divrow-changed {
display: none;
margin-left: 8px;
padding: 1px 7px;
border-radius: 999px;
background: #FFF6E5;
color: #8A5A00;
font-size: 11px;
font-weight: 600;
}
tr.sp-divrow.is-changed .sp-divrow-changed { display: inline-block; }
tr.sp-divrow.is-changed select.sp-row-div { border-color: #E0A93B; background-color: #FFFBF2; }
.sp-divsave { position: sticky; bottom: 0; background: var(--sp-page); padding: 12px 0; margin-top: 8px; }
.sp-divpending { font-size: 13px; font-weight: 600; color: #8A5A00; }
/* Program / league / team popup (Admin/Leagues/ProgramEdit.aspx) */
body.sp-popup-body { background: var(--sp-surface); }
input.sp-input-year { width: 90px !important; }
table.sp-multiteam thead th { text-align: left; font-size: 12px; font-weight: 600; color: var(--sp-muted); padding: 0 4px 6px; }
table.sp-multiteam td { padding: 4px; }
.sp-popup-form table.sp-form.sp-multiteam td:first-child { width: 55%; }
/* Programs (Admin/Leagues/Programs.aspx) */
.sp-programs-filter { align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sp-badge-active, .sp-badge-inactive {
display: inline-block;
padding: 1px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.sp-badge-active { background: var(--sp-success-soft); color: var(--sp-success); }
.sp-badge-inactive { background: var(--sp-head); color: var(--sp-muted); border: 1px solid var(--sp-line); }
a.sp-backlink { display: inline-block; margin: 0 0 6px; font-size: 13px; }
/* =====================================================================
Messaging admin (Admin/Messaging/Default.aspx)
===================================================================== */
.sp-msg-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; }
.sp-msg-setup-text { flex: 1 1 320px; }
.sp-msg-setup-text .sp-section-title { margin-top: 0; }
.sp-msg-setup-actions { display: flex; gap: 8px; }
.sp-msg-account { margin-bottom: 16px; max-width: 480px; }
input.sp-input-zip { width: 120px !important; }
/* A dialog card (ModalPopupExtender panels) */
.sp-modal-card {
width: 520px;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 48px);
overflow: auto;
box-sizing: border-box;
padding: 20px 24px;
background: var(--sp-surface);
border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg);
box-shadow: var(--sp-shadow);
font-family: var(--sp-font);
color: var(--sp-ink);
}
.sp-modal-card table.sp-form { width: 100%; }
.sp-modal-card table.sp-form td:first-child { width: 120px; color: var(--sp-muted); }
.sp-modal-card table.sp-form input[type="text"],
.sp-modal-card table.sp-form textarea,
.sp-modal-card table.sp-form select { width: 100%; box-sizing: border-box; }
/* Email members (Admin/Messaging/EmailMessaging.aspx) */
.sp-emailfind { margin-bottom: 16px; }
.sp-emailfind .sp-filterbar { margin: 0 0 12px; }
.sp-emailfind-dates .sp-filter { align-items: center; }
.sp-emailfind-action { padding-top: 12px; border-top: 1px solid var(--sp-line-soft); }
.sp-modal-card.sp-modal-wide { width: 820px; }
.sp-modal-card .sp-emailer { max-width: none; }
/* Send alert (Admin/Messaging/TextMessaging.aspx) */
.sp-alertstep { margin-bottom: 12px; }
.sp-alertstep .sp-gst-head { margin-bottom: 10px; }
.sp-alertstep .sp-filterbar { margin: 8px 0 0; }
.sp-alertstep .sp-gst-hint { margin: 0 0 4px; }
textarea.sp-alert-message { width: 100%; max-width: 640px; box-sizing: border-box; font-size: 15px; }
.sp-alert-message-foot { display: flex; align-items: center; gap: 12px; max-width: 640px; margin-top: 8px; }
.sp-alert-count { font-size: 12px; color: var(--sp-muted); font-variant-numeric: tabular-nums; }
.sp-alert-count.is-near { color: #8A5A00; font-weight: 600; }
/* Time list of the SportsPilot date-time picker */
.RadCalendarTimeView_SportsPilot { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow); padding: 6px; font-family: var(--sp-font); }
.RadCalendarTimeView_SportsPilot th { font-size: 12px; color: var(--sp-muted); font-weight: 600; padding: 4px; }
.RadCalendarTimeView_SportsPilot td a { display: block; padding: 4px 8px; border-radius: var(--sp-radius); color: var(--sp-ink); text-decoration: none; font-size: 13px; }
.RadCalendarTimeView_SportsPilot td a:hover { background: var(--sp-accent-soft); }
.RadCalendarTimeView_SportsPilot td.rcSelected a { background: var(--sp-accent); color: #FFFFFF; }
/* Official blackout (Admin/Officials/AddOfficialBlackOut.aspx) */
.sp-blackout-for { font-weight: 400; color: var(--sp-muted); }
.sp-blackout-for span { color: var(--sp-ink); font-weight: 600; }
.sp-blackout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; max-width: 900px; }
.sp-blackout-cal { display: flex; flex-direction: column; gap: 6px; }
.sp-blackout-fields { flex: 1 1 320px; }
.sp-blackout-fields table.sp-form td:first-child { width: 140px; color: var(--sp-muted); }
.sp-blackout-fields textarea { width: 100%; box-sizing: border-box; }
/* Week selector column of the calendar */
table.sp-calendar td.sp-cal-selector { width: 28px; text-align: center; }
table.sp-calendar td.sp-cal-selector a { color: var(--sp-muted); text-decoration: none; font-size: 12px; padding: 4px; border-radius: var(--sp-radius); }
table.sp-calendar td.sp-cal-selector a:hover { color: var(--sp-accent); background: var(--sp-accent-soft); }
/* =====================================================================
Assign officials (Admin/Officials/OfficialAssign.aspx)
===================================================================== */
.sp-oa-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.sp-oa-find .sp-filterbar { margin: 0; }
.sp-oa-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sp-oa-optcard { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sp-oa-optcard .sp-section-title { margin: 0 0 4px; }
.sp-oa-check { display: block; }
.sp-oa-check label { cursor: pointer; }
.sp-oa-minutes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: var(--sp-muted); }
.sp-oa-actionrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
/* Match rows by how many officials are assigned */
.sp-oa-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 8px; font-size: 12px; color: var(--sp-muted); }
.sp-oa-key::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sp-oa-key.is-full::before { background: #CDEBD8; border: 1px solid #8FCBA6; }
.sp-oa-key.is-partial::before { background: #FBEBC4; border: 1px solid #E6C46B; }
.sp-oa-key.is-none::before { background: #FBD9D5; border: 1px solid #E8A39A; }
table.sp-grid tr.sp-oa-full > td { background: #EEF8F2; }
table.sp-grid tr.sp-oa-partial > td { background: #FFF8E6; }
table.sp-grid tr.sp-oa-none > td { background: #FDF0EE; }
table.sp-grid tr.sp-oa-full > td:first-child { box-shadow: inset 3px 0 0 #3FA26A; }
table.sp-grid tr.sp-oa-partial > td:first-child { box-shadow: inset 3px 0 0 #D9A21E; }
table.sp-grid tr.sp-oa-none > td:first-child { box-shadow: inset 3px 0 0 #D2574A; }
table.sp-grid tr.sp-oa-full:hover > td, table.sp-grid tr.sp-oa-partial:hover > td, table.sp-grid tr.sp-oa-none:hover > td { background: var(--sp-row-hover); }
/* Assign dialog */
table.sp-oa-assign { width: 100%; border-collapse: collapse; }
table.sp-oa-assign th { text-align: left; font-size: 12px; font-weight: 600; color: var(--sp-muted); padding: 0 6px 6px; }
table.sp-oa-assign td { padding: 5px 6px; vertical-align: top; }
table.sp-oa-assign td select { min-width: 220px; }
table.sp-oa-assign input[disabled], table.sp-oa-assign select[disabled] { opacity: .5; }
.sp-price-cell { white-space: nowrap; }
.sp-price-sign { color: var(--sp-muted); margin-right: 4px; }
input.sp-price-input { width: 84px !important; text-align: right; }
.sp-swap-check { display: block; margin-top: 4px; font-size: 12px; }
.sp-official-info { font-size: 12px; font-weight: 600; color: var(--sp-danger); }
.sp-oa-warning { display: block; margin: 0 0 8px; padding: 6px 10px; border-radius: var(--sp-radius); background: #FDECEA; color: var(--sp-danger); font-weight: 600; font-size: 13px; }
/* Official blackouts (Admin/Officials/OfficialBlackOuts.aspx) */
.sp-bo-legend {
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 12px;
align-items: center;
margin: 0 0 16px;
font-size: 13px;
color: var(--sp-muted);
max-width: 640px;
}
.sp-bo-dates { align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sp-bo-type {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
a.sp-bo-type:hover { text-decoration: none; }
.sp-bo-type.is-unavailable { background: var(--sp-head); color: var(--sp-muted); border: 1px solid var(--sp-line); }
.sp-bo-type.is-pending { background: #FFF6E5; color: #8A5A00; border: 1px solid #F0C77A; }
.sp-bo-type.is-accepted { background: var(--sp-success-soft); color: var(--sp-success); border: 1px solid #BFE3CD; }
.sp-bo-type.is-available { background: var(--sp-accent-soft); color: var(--sp-accent); }
.sp-bo-type.has-game { cursor: help; }
.sp-bo-type.has-game::after { content: " \24D8"; font-weight: 400; }
/* Group header rows */
.RadGrid_SportsPilot .rgGroupHeader td { background: var(--sp-head); font-weight: 600; color: var(--sp-ink); padding: 8px 12px; }
.sp-bo-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-bo-group-name { font-weight: 600; }
.sp-bo-group a.sp-btn-sm { font-weight: 500; }
a.sp-bo-viagame { font-size: 12px; color: var(--sp-muted); }
a.sp-bo-viagame:hover { color: var(--sp-accent); }
/* Officials column (assign by facility) */
.sp-oa-officials { display: flex; flex-direction: column; gap: 2px; }
.sp-oa-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-oa-names { font-size: 12px; color: var(--sp-muted); }
/* Assign by license (Admin/Officials/OfficialGradeAssign.aspx) */
.sp-oa-find > .sp-gst-step { flex: 0 0 auto; }
.sp-lic { margin-bottom: 12px; }
.sp-lic-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.sp-lic-col { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; min-width: 160px; }
select.sp-lic-box { height: 130px; }
.sp-lic-actions { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.sp-lic-result { flex: 2 1 260px; }
.sp-lic-rules ul { list-style: none; margin: 0; padding: 0; }
.sp-lic-rules li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--sp-line-soft); font-size: 13px; }
.sp-lic-rules li:last-child { border-bottom: 0; }
.sp-lic-pos { font-weight: 600; min-width: 110px; }
.sp-lic-any { color: var(--sp-muted); font-style: italic; }
.sp-lic-grade { display: inline-block; padding: 0 7px; margin: 0 4px 2px 0; border-radius: 999px; background: var(--sp-accent-soft); color: var(--sp-accent); font-weight: 600; font-size: 12px; }
.sp-oa-radios label { cursor: pointer; }
.sp-oa-radios td { padding: 2px 0; }
/* Official responses (Admin/Officials/OfficialReview.aspx) */
.sp-review-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.sp-review-controls, .sp-review-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.sp-review-controls .sp-filterbar { margin: 0; }
.sp-review-empty { display: block; }
.sp-review-name { display: block; font-weight: 600; }
.sp-review-role { display: block; font-size: 12px; color: var(--sp-muted); }
.sp-review-phone { display: block; white-space: nowrap; font-size: 13px; }
.sp-review-phone-label { color: var(--sp-muted); font-size: 12px; display: inline-block; min-width: 34px; }
/* Officials list (Admin/Officials/Officials.aspx) */
.sp-officials-filter { align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.sp-officials-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.sp-officials-msg { flex: 1 1 320px; }
.sp-officials-msg input[type="text"] { width: 100%; max-width: 520px; }
.sp-row-actions a.sp-btn-sm + a.sp-btn-sm { margin-left: 6px; }
/* Row buttons side by side (they stacked in the actions column) */
.sp-row-btns { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sp-row-btns a.sp-btn-sm { display: inline-flex; margin: 0; }
.sp-row-actions a.sp-btn-sm + a.sp-btn-sm { margin-left: 0; }
/* Officials reports (Admin/Officials/Reports.aspx) */
.sp-offrep { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.sp-offrep-type { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sp-offrep-type select { min-width: 300px; }
.sp-offrep-desc { color: var(--sp-muted); font-size: 13px; }
.sp-offrep-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 12px; border-top: 1px solid var(--sp-line-soft); }
.sp-offrep-group, .sp-offrep-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sp-offrep-group .sp-filterbar { margin: 0; }
.sp-offrep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sp-line-soft); }
.sp-offrep-result { overflow-x: auto; }
.sp-offrep-count { display: block; margin: 0 0 8px; font-size: 13px; color: var(--sp-muted); }
/* Age groups and classes (Admin/Ranking/AgeGroupClass.aspx) */
.sp-agegroup-filter { align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sp-modal-card td .sp-gst-hint { display: block; margin-top: 4px; }
.sp-modal-card td select.sp-select-narrow { width: auto !important; min-width: 90px; }
/* Season schedules (Admin/Ranking/SeasonSchedules.aspx) */
.sp-ss-steps { margin: -4px 0 8px; font-weight: 600; color: var(--sp-accent); }
.sp-ss-note { margin: 10px 0 0; font-weight: 500; }
.sp-ss-teams { max-height: 340px; overflow: auto; }
input.sp-readonly { background: var(--sp-head) !important; color: var(--sp-muted); }
table.sp-wizard { width: 100%; }
table.sp-wizard td { vertical-align: top; }
table.sp-wizard td[align="right"] { padding-top: 14px; }
table.sp-wizard input[type="submit"] { margin-left: 8px; }
/* Stature points table (Admin/Ranking/Stature.aspx) */
.sp-pts-wrap { max-height: 60vh; overflow: auto; margin-top: 8px; }
table.sp-pts-grid th, table.sp-pts-grid td { padding: 4px 6px !important; white-space: nowrap; }
table.sp-pts-grid select { min-height: 28px !important; padding: 2px 4px !important; width: 58px; margin: 1px 0; display: block; }
table.sp-pts-grid select[disabled] { background: var(--sp-head); color: var(--sp-ink); opacity: 1; }
table.sp-pts-grid input[type="text"] { min-height: 28px !important; padding: 2px 6px !important; width: 64px !important; text-align: right; }
table.sp-pts-grid input.sp-pts-bad { border-color: var(--sp-danger) !important; background: #FDECEA; }
/* Bulletin board (Admin/Reports/BulletinBoard.aspx) */
.sp-bb-preview { color: var(--sp-muted); font-size: 13px; }
.sp-bb-form { max-width: 980px; margin-top: 16px; }
.sp-bb-form .sp-section-title { margin-top: 0; }
.sp-bb-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.sp-bb-field > input[type="text"] { width: 100%; max-width: 520px; }
.sp-bb-order > span { display: flex; align-items: center; gap: 10px; }
.sp-bb-order select.sp-select-narrow { width: auto !important; min-width: 90px; }
/* Keep the theme's form styles out of the editor's own tables, and give its typing area
a firm height (it was squeezed to one line). */
.sp-bb-editor .RadEditor table,
.sp-bb-editor .RadEditor td { width: auto; padding: 0; vertical-align: middle; border: 0; background: none; }
.sp-bb-editor .RadEditor .reContentArea,
.sp-bb-editor .RadEditor .reContentCell,
.sp-bb-editor .RadEditor iframe { min-height: 320px !important; }
.sp-bb-editor .RadEditor input[type="text"],
.sp-bb-editor .RadEditor select { min-height: 0 !important; box-shadow: none; }
/* Report headers (Admin/Reports/Headers.aspx) */
.sp-hdr-form { max-width: 820px; margin-top: 4px; }
.sp-hdr-form .sp-section-title { margin-top: 0; }
.sp-hdr-form .sp-bb-field > input[type="text"] { max-width: 320px; }
.sp-hdr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.sp-hdr-tags code { padding: 1px 6px; border-radius: var(--sp-radius); background: var(--sp-accent-soft); color: var(--sp-accent); font-size: 12px; }
.sp-hdr-preview { max-width: 820px; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.sp-hdr-paper { background: #FFFFFF; border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: 0 1px 3px rgba(31, 42, 68, .08); padding: 16px 20px; min-height: 60px; overflow-x: auto; }
/* Day calendar toolbar (Admin/Schedules/DayCalendar.aspx) */
.sp-day-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.sp-day-tools .sp-filterbar { margin: 0; }
.sp-day-inline { display: inline-flex; align-items: center; }
.sp-day-tools input[type="text"] { width: 180px; }
a.sp-day-link { cursor: pointer; white-space: nowrap; }
/* Schedules home (Admin/Schedules/Default.aspx) */
.sp-sch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.sp-sch-tools .sp-filterbar { margin: 0; }
.sp-sch-inline { display: inline-flex; }
a.sp-btn-sm.sp-btn-quiet { color: var(--sp-muted); }
a.sp-btn-sm.sp-btn-quiet:hover { color: var(--sp-ink); }
td .sp-bo-type { margin-left: 4px; }
/* Schedule preferences (Admin/Schedules/Preferences.aspx) */
.sp-pref-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .sp-pref-layout { grid-template-columns: 1fr; } }
.sp-pref-list .sp-section-title, .sp-pref-form .sp-section-title { margin-top: 0; }
ul.sp-pref-links { list-style: none; margin: 0; padding: 0; }
ul.sp-pref-links li a { display: block; padding: 7px 10px; border-radius: var(--sp-radius); color: var(--sp-ink); text-decoration: none; }
ul.sp-pref-links li a:hover { background: var(--sp-row-hover); }
ul.sp-pref-links li.is-current a { background: var(--sp-accent-soft); color: var(--sp-accent); font-weight: 600; }
.sp-pref-form { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.sp-pref-form > .sp-card { margin: 0; }
.sp-pref-form .sp-bb-field > input[type="text"] { max-width: 360px; }
.sp-pref-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; margin: 12px 0; }
.sp-pref-num { display: flex; flex-direction: column; gap: 4px; }
input.sp-pref-numbox { width: 64px !important; text-align: center; }
.sp-pref-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
select.sp-pref-box { height: 200px; }
.sp-pref-refs { margin: 10px 0; max-width: 520px; }
.sp-pref-refs td:first-child { color: var(--sp-muted); white-space: nowrap; }
.sp-pref-save { position: sticky; bottom: 0; background: var(--sp-page); padding: 12px 0; }
/* Publish schedules pop-up (Admin/Schedules/PublishSchedules.aspx) */
.sp-pub-card { padding: 12px 16px; }
.sp-pub-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sp-pub-count { font-size: 13px; color: var(--sp-muted); font-weight: 500; }
.sp-pub-check input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
/* Facility calendar (Admin/Schedules/SchCalendar.aspx) */
.sp-schcal { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); overflow: hidden; }
.sp-schcal .rsAptContent { font-family: var(--sp-font); font-size: 12px; line-height: 1.3; }
.sp-schcal-title { font-weight: 600; }
.sp-schcal-line { display: block; font-size: 11px; opacity: .85; }
.sp-schcal-line:empty { display: none; }
/* Reschedule button on appointments (same look as the Day calendar's) */
.RadScheduler a.sp-move-icon {
float: right;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 18px;
height: 18px;
margin: 0 0 2px 4px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(31, 42, 68, 0.3);
color: #1F2A44;
text-decoration: none;
line-height: 0;
cursor: pointer;
}
.RadScheduler a.sp-move-icon:hover, .RadScheduler a.sp-move-icon:focus { background: #2F6FEB; border-color: #2F6FEB; color: #FFFFFF; outline: none; }
.RadScheduler a.sp-move-icon svg { display: block; width: 12px; height: 12px; }
/* Keep the header (and the menu dropdowns it holds) above the page content. */
.sp-header { position: relative; z-index: 9000; }
/* Schedule games list (Admin/Schedules/ScheduleEditGameList.aspx) */
.sp-gl-actions { align-items: center; gap: 8px; margin: 0 0 10px; }
.sp-gl-legend { margin-top: 0; }
table.sp-grid tr.sp-gl-off > td { background: #FDF0EE; }
table.sp-grid tr.sp-gl-off > td:first-child { box-shadow: inset 3px 0 0 #D2574A; }
table.sp-grid tr.sp-gl-done > td { background: #EEF8F2; }
table.sp-grid tr.sp-gl-done > td:first-child { box-shadow: inset 3px 0 0 #3FA26A; }
table.sp-grid tr.sp-gl-forfeit > td { background: #FFF8E6; }
table.sp-grid tr.sp-gl-forfeit > td:first-child { box-shadow: inset 3px 0 0 #D9A21E; }
a.sp-gl-game { font-weight: 600; }
/* Schedule settings (Admin/Schedules/ScheduleEditSettings.aspx) */
.sp-ses { max-width: 760px; }
.sp-ses table.sp-form td:first-child { width: 130px; color: var(--sp-muted); vertical-align: top; padding-top: 10px; }
.sp-ses table.sp-form input[type="text"] { max-width: 420px; }
.sp-ses .sp-gst-hint { display: block; margin-top: 4px; }
.sp-ses-options { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
/* A labelled checkbox (asp:CheckBox renders the box and its label as two separate elements;
inside the flex rows and columns they were split onto separate lines). */
.sp-check { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.sp-check input[type="checkbox"] { margin: 0; flex: 0 0 auto; }
.sp-check label { margin: 0; cursor: pointer; }
.sp-ses-options .sp-check, .sp-pref-checks .sp-check { display: flex; }
/* Schedule settings options: one per line, box beside label (even if the checkbox renders
without its wrapper span). */
.sp-ses-options { display: block; padding-top: 8px; }
.sp-ses-option { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.sp-ses-option input[type="checkbox"] { margin: 0; }
.sp-ses-option label { margin: 0; cursor: pointer; }
/* Move game pop-up (Admin/Schedules/ScheduleMove.aspx) */
.sp-mv-time { display: flex; align-items: center; gap: 6px; }
.sp-mv-time select { width: auto !important; min-width: 64px; }
.sp-mv-checks { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sp-line-soft); }
.sp-mv-gap { padding-left: 24px; color: var(--sp-muted); }
.sp-mv-gap input.sp-pref-numbox { width: 56px !important; }
.sp-mv-status { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sp-mv-statusbtns { flex-wrap: wrap; }
/* Multi-team event wizard (Admin/Schedules/ScheduleMultiTeam.aspx) */
table.sp-mt-wizard > tbody > tr > td.sp-mt-steps,
table.sp-mt-wizard td.sp-mt-steps { width: 170px; padding: 0 16px 0 0 !important; background: none !important; }
table.sp-mt-wizard td.sp-mt-steps a { display: block; padding: 7px 10px; border-radius: var(--sp-radius); color: var(--sp-muted); text-decoration: none; }
table.sp-mt-wizard td.sp-mt-steps a:hover { background: var(--sp-row-hover); color: var(--sp-ink); }
table.sp-mt-wizard td.sp-mt-steps span a,
table.sp-mt-wizard td.sp-mt-steps a[disabled] { color: var(--sp-accent); font-weight: 600; background: var(--sp-accent-soft); }
table.sp-mt-wizard .sp-card { margin: 0; }
.sp-mt-programs { width: 100%; max-width: 420px; height: 180px; }
.sp-mt-tree { max-height: 420px; overflow: auto; padding: 4px 0; }
.sp-mt-tree td { padding: 1px 2px !important; }
.sp-mt-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.4fr) minmax(160px, .8fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .sp-mt-grid { grid-template-columns: 1fr; } }
.sp-mt-col { display: flex; flex-direction: column; gap: 6px; }
.sp-mt-teams { display: block; max-height: 360px; overflow: auto; line-height: 1.9; } /* not flex: it split each box from its label */
.sp-mt-teams input[type="checkbox"] { margin-right: 6px; }
.sp-mt-days { height: 220px; width: 100%; }
.sp-mt-added { margin-top: 16px; }
/* Multi-team wizard: league boxes and All teams */
.sp-mt-alltree { margin: 4px 0 6px; font-weight: 600; }
.sp-mt-tree input[type="checkbox"] { margin-right: 6px; cursor: pointer; }
.sp-mt-count { color: var(--sp-muted); font-weight: 400; font-size: 12px; }
/* Practice wizard: pick days / repeating days switch */
.sp-pr-mode { display: flex; gap: 6px; margin: 4px 0 8px; }
.sp-pr-mode a.is-current { background: var(--sp-accent-soft); color: var(--sp-accent); border-color: var(--sp-accent); }
/* Create schedule wizard (Admin/Schedules/Scheduler.aspx) */
.sp-sw-summary { margin-bottom: 8px; }
.sp-sw-header { display: flex; align-items: center; gap: 12px; padding: 0 0 8px; }
.sp-sw-steptitle { font-weight: 600; color: var(--sp-ink); }
table.sp-sw .sp-form td:first-child { width: 220px; color: var(--sp-muted); vertical-align: top; padding-top: 10px; }
.sp-sw-count { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-weight: 600; }
input.sp-sw-countbox { width: 64px !important; text-align: center; font-weight: 600; }
.sp-sw-divisions { max-height: 460px; overflow: auto; }
.sp-sw-divisions td { padding: 2px 4px; }
.sp-sw-divisions input[type="checkbox"] { margin-right: 6px; }
.sp-sw-skip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 10px; }
.sp-sw-seeding { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.sp-sw-seedlist td { padding: 2px 6px; white-space: nowrap; }
.sp-sw-seedlist select { min-width: 120px; }
.sp-sw-preview { overflow-x: auto; }
table.sp-grid tr.sp-row-picked > td { background: #FDECEA !important; color: var(--sp-ink); }
.sp-sw-indent { display: inline-block; width: 18px; }
/* "Start times every" picker (sp-timestep.js) */
.sp-timestep { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px; color: var(--sp-muted); white-space: nowrap; }
.sp-timestep label { margin: 0; }
.sp-timestep select { width: auto !important; min-width: 84px; min-height: 30px !important; font-size: 12px; }
.sp-mv-time .sp-timestep { margin-left: 8px; }
/* Add playoffs (Admin/Schedules/SchedulerAddTourny.aspx) */
.sp-at-steps ol { margin: 6px 0 0 18px; padding: 0; line-height: 1.7; color: var(--sp-ink); }
.sp-at-steps .sp-alerts-note { margin: 0; }
.sp-at-add { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.sp-at-seeds { max-height: 380px; overflow: auto; }
a.sp-btn-sm.sp-btn-danger-link { color: var(--sp-danger); }
/* Move several games (Admin/Schedules/ScheduleRainDayMove.aspx) */
.sp-rd-intro { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sp-rd-intro p { margin: 0; }
.sp-rd-step { display: block; margin: 4px 0 8px; }
table.sp-rd-wizard { width: 100%; max-width: 900px; }
.sp-rd-options td { padding: 3px 18px 3px 0; }
.sp-rd-options label { margin-left: 4px; }
table.sp-rd-wizard .sp-form td:first-child { width: 120px; color: var(--sp-muted); }
.sp-rd-summary { display: block; margin-top: 6px; line-height: 1.8; font-weight: 600; }
.sp-rd-grid { margin-top: 16px; }
table.sp-grid tr.sp-rd-clash > td { background: #FDECEA !important; }
table.sp-grid tr.sp-rd-clash > td:first-child { box-shadow: inset 3px 0 0 var(--sp-danger); }
/* Assign teams (Admin/Schedules/SchedulerAssign.aspx) */
.sp-as-count { display: block; margin: 0 0 8px; font-weight: 600; color: var(--sp-ink); }
.sp-as-count:empty { display: none; }
.sp-as-count.is-ok { color: #2E7D4F; }
.sp-as-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.4fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .sp-as-grid { grid-template-columns: 1fr; } }
.sp-as-leagues { height: 280px; width: 100%; }
.sp-as-add { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.sp-as-add input[type="text"] { max-width: 280px; }
.sp-as-chosen { height: 240px; width: 100%; max-width: 420px; display: block; margin-bottom: 8px; }
.sp-as-seeds { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.sp-as-move { flex-direction: column; }
/* Import games (Admin/Schedules/SchedulerImport.aspx) */
.sp-im-note { margin: 0 0 12px; }
.sp-im-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sp-line-soft); }
.sp-im-sub .sp-check { margin-top: 8px; }
.sp-im-preview { max-height: 520px; overflow: auto; }
.sp-im-errors { margin: 6px 0 0 18px; padding: 0; }
/* Schedule teams (Admin/Schedules/ScheduleTeams.aspx) */
select.sp-st-teams { height: 220px; width: 100%; min-width: 280px; }
/* Slots grid (Admin/Schedules/SlotsGrid.aspx) */
.sp-slots-grid td { white-space: nowrap; font-size: 12px; }
.sp-slots-grid td.sp-slot-double { box-shadow: inset 0 0 0 2px var(--sp-danger); }
/* Game status pop-up (Admin/Scores/GameStatus.aspx) */
.sp-gs-game { display: block; margin: 0 0 10px; font-weight: 600; line-height: 1.5; }
.sp-gs-game small { display: block; font-weight: 400; color: var(--sp-muted); }
.sp-gs-current { display: block; margin-top: 4px; }
/* Score entry (Admin/Scores/PostByField.aspx) */
.sp-score-wrap { margin: 8px 0 12px; }
table.sp-score-table { border-collapse: collapse; }
table.sp-score-table th { font-size: 12px; color: var(--sp-muted); font-weight: 600; text-align: center; padding: 2px 8px; }
table.sp-score-table td { padding: 3px 8px; }
table.sp-score-table td:first-child { color: var(--sp-muted); font-size: 12px; white-space: nowrap; }
table.sp-score-table input[type="text"] { width: 64px !important; text-align: center; }
table.sp-score-table tr.sp-score-team td { font-weight: 600; text-align: center; color: var(--sp-ink); }
table.sp-score-table tr.sp-score-gap td { height: 6px; }
table.sp-score-table input.sp-pts-bad { border-color: var(--sp-danger) !important; background: #FDECEA; }
/* Post scores by field, phone (Admin/Scores/PostByFieldPhone.aspx) */
.sp-ph { max-width: 560px; margin: 0 auto; padding: 0 4px; }
.sp-ph-filters { display: flex; flex-direction: column; gap: 10px; }
.sp-ph-field { display: flex; flex-direction: column; gap: 4px; }
.sp-ph-field select, .sp-ph-field input[type="text"] { width: 100% !important; min-height: 44px; font-size: 16px; }
input.sp-ph-wide { width: 100%; min-height: 48px; font-size: 16px; }
table.sp-ph-games { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
table.sp-ph-games td { padding: 0; border: 0; background: none; }
.sp-ph-game { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "time teams" "time meta" "btn btn";
gap: 2px 12px; padding: 12px 14px; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); }
.sp-ph-time { grid-area: time; font-weight: 600; font-size: 15px; color: var(--sp-accent); white-space: nowrap; padding-top: 1px; }
.sp-ph-teams { grid-area: teams; font-weight: 600; font-size: 15px; }
.sp-ph-meta { grid-area: meta; font-size: 13px; color: var(--sp-muted); }
a.sp-ph-score-btn { grid-area: btn; display: block; margin-top: 10px; padding: 12px; text-align: center; border-radius: var(--sp-radius);
background: var(--sp-nav, #1F2A44); color: #FFFFFF !important; font-weight: 600; text-decoration: none; font-size: 16px; }
/* Dialog: phone width, big boxes (numeric keypad) */
.sp-ph-dialog { width: calc(100vw - 24px) !important; max-width: 520px; max-height: calc(100vh - 24px); overflow: auto; }
.sp-ph-dialog table.sp-score-table { width: 100%; }
.sp-ph-dialog table.sp-score-table input[type="text"] { width: 100% !important; min-height: 48px; font-size: 20px; }
.sp-ph-dialog select { width: 100% !important; min-height: 44px; font-size: 16px; }
.sp-ph-dialog .sp-popup-actions input { min-height: 48px; font-size: 16px; flex: 1; }
/* Edit scores (Admin/Scores/PostEdit.aspx) */
.sp-se-wrap { overflow-x: auto; }
table.sp-se-table { border-collapse: collapse; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); }
table.sp-se-table th { background: var(--sp-head); color: var(--sp-muted); font-size: 12px; font-weight: 600; padding: 8px 10px; text-align: center; white-space: nowrap; }
table.sp-se-table th.sp-se-side { color: var(--sp-ink); border-bottom: 1px solid var(--sp-line); }
table.sp-se-table td { padding: 6px 10px; border-top: 1px solid var(--sp-line-soft); vertical-align: top; }
table.sp-se-table td.sp-se-team { font-weight: 600; white-space: nowrap; }
table.sp-se-table td.sp-se-muted { color: var(--sp-muted); white-space: nowrap; font-size: 13px; }
table.sp-se-table td.sp-se-box { text-align: center; }
table.sp-se-table input[type="text"] { width: 52px !important; text-align: center; display: block; margin: 0 auto 4px; }
table.sp-se-table td.sp-se-split { border-left: 2px solid var(--sp-line); }
table.sp-se-table input.sp-pts-bad { border-color: var(--sp-danger) !important; background: #FDECEA; }
/* Post scores (Admin/Scores/Scoring.aspx) */
.sp-scoring-grid table table { border: 0 !important; background: transparent !important; }
.sp-scoring-grid table table td, .sp-scoring-grid table table th { border: 0 !important; padding: 0 3px !important; background: transparent !important; text-align: center; }
.sp-scoring-grid table table th { font-size: 11px; color: var(--sp-muted); font-weight: 600; }
.sp-scoring-grid td.sp-scoring-boxes input[type="text"] { width: 52px !important; text-align: center; margin: 2px 0; }
.sp-scoring-grid input.sp-pts-bad { border-color: var(--sp-danger) !important; background: #FDECEA !important; }
/* Post scores: Save bar above the grid, pinned to the top of the window while scrolling.
(Below the site header's dropdown menus, z-index 9000.) */
.sp-scoring-bar { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
margin: 0 0 8px; padding: 8px 12px; background: var(--sp-surface); border: 1px solid var(--sp-line);
border-radius: var(--sp-radius-lg); box-shadow: 0 2px 6px rgba(15, 23, 42, .06); }
.sp-scoring-bar .sp-offrep-count { margin: 0; }
/* "Re-post every played game" next to Save (ScoreEdit / PostEdit) */
.sp-repost { font-size: 13px; color: var(--sp-muted); white-space: nowrap; }
.sp-repost label { cursor: help; }
/* Scheduler settings (Admin/Templates/Configuration.aspx) */
.sp-cfg { max-width: 860px; }
.sp-cfg .sp-form td:first-child { width: 200px; color: var(--sp-muted); vertical-align: top; padding-top: 10px; }
.sp-cfg .sp-gst-hint { display: block; margin-top: 4px; }
select.sp-cfg-tz { max-width: 100%; }
/* Templates list (Admin/Templates/Default.aspx) */
a.sp-btn-primary-link { display: inline-block; padding: 7px 14px; border-radius: var(--sp-radius); background: var(--sp-nav, #1F2A44);
color: #FFFFFF !important; font-weight: 600; text-decoration: none; }
a.sp-btn-primary-link:hover { opacity: .92; }
/* Template editor (Admin/Templates/TemplateView.aspx) */
.sp-tv-head { margin-bottom: 8px; }
.sp-tv-head .sp-page-title { margin: 4px 0 2px; }
a.sp-back-link { font-size: 13px; color: var(--sp-muted); text-decoration: none; }
a.sp-back-link:hover { color: var(--sp-accent); }
.sp-tv-editor { overflow-x: auto; }
/* Add bracket pop-up (Admin/Templates/TemplateAdd.aspx) */
.sp-ta-layers label { margin-left: 4px; }
.sp-ta-layers br + input, .sp-ta-layers input { margin-top: 4px; }
/* Help videos (Admin/HelpVideoPage.aspx) */
.sp-help-video { max-width: 960px; }
.sp-help-frame { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #0F172A; border-radius: var(--sp-radius); overflow: hidden; }
.sp-help-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-help-link { margin: 12px 0 0; }
/* Recent updates (Admin/RecentUpdates.aspx) */
.sp-updates { max-width: 860px; display: flex; flex-direction: column; gap: 14px; }
.sp-update-date { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--sp-ink); }
.sp-update-group { margin: 12px 0 4px; font-size: 13px; font-weight: 600; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .03em; }
.sp-update ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.sp-update li { margin: 2px 0; }
/* Field status: facility rows open / close on tap; a clear arrow drawn by the theme
(Controls/FieldStatus.ascx). */
.sp-fieldstatus tr.sp-fs-facility { cursor: pointer; }
.sp-fieldstatus tr.sp-fs-facility:hover > td { background: #F3F6FA; }
.sp-fieldstatus input.rgExpand, .sp-fieldstatus input.rgCollapse {
width: 22px; height: 22px; border: 0; cursor: pointer; font-size: 0; color: transparent;
background: transparent no-repeat center / 14px 14px;
}
.sp-fieldstatus input.rgExpand {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sp-fieldstatus input.rgCollapse {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Officials: days with games on the calendar (Officials/Default.aspx) */
.RadCalendar td.DayWithAppointments a, .RadCalendar td.DayWithAppointments span {
font-weight: 700; color: #1D4ED8 !important; background: #E8F0FE; border-radius: 6px;
}
/* Schedules: Find a team (Admin/Schedules/Default.aspx) */
.sp-sch-teamsearch { margin-top: 10px; }
.sp-sch-teamsearch .sp-sch-teambox { width: 24em; max-width: 100%; }
.sp-sch-onlylabel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sp-muted, #6B7280); cursor: pointer; }
tr.sp-sch-hit > td { background: #FFF8DB !important; }
tr.sp-sch-hit > td:first-child { box-shadow: inset 4px 0 0 #E2A400; }
tr.sp-sch-dim > td { opacity: .55; }
.sp-sch-matches { display: block; margin-top: 2px; font-size: 12px; color: #8A5A00; font-weight: 600; }
.sp-sch-matches:empty { display: none; }
/* Schedules hub: row actions in groups (Admin/Schedules/Default.aspx) */
.sp-hub-actions { display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap; }
.sp-hub-group { display: inline-flex; align-items: center; border: 1px solid var(--sp-control-line, #C9D2DE); border-radius: 8px; background: #fff; overflow: hidden; }
.sp-hub-cap { padding: 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--sp-muted, #6B7280); background: var(--sp-head, #F4F6FA); align-self: stretch; display: inline-flex; align-items: center; border-right: 1px solid var(--sp-control-line, #C9D2DE); }
.sp-hub-btn, a.sp-hub-btn { display: inline-flex; align-items: center; padding: 5px 10px; font-size: 13px; font-weight: 500; color: var(--sp-ink, #1F2937); text-decoration: none; white-space: nowrap; cursor: pointer; background: #fff; }
.sp-hub-group a.sp-hub-btn + a.sp-hub-btn { border-left: 1px solid var(--sp-line, #E6EAF0); }
a.sp-hub-btn:hover, .sp-hub-more summary.sp-hub-btn:hover { background: var(--sp-head, #F4F6FA); }
a.sp-hub-btn.is-main { font-weight: 700; color: var(--sp-navy, #1F2A44); }
a.sp-hub-btn:focus-visible, .sp-hub-more summary:focus-visible { outline: 2px solid #2F6FEB; outline-offset: -2px; }
.sp-hub-more { position: relative; display: inline-block; }
.sp-hub-more summary.sp-hub-btn { list-style: none; border: 1px solid var(--sp-control-line, #C9D2DE); border-radius: 8px; }
.sp-hub-more summary::-webkit-details-marker { display: none; }
.sp-hub-more summary.sp-hub-btn::after { content: "\25BE"; margin-left: 6px; font-size: 11px; color: var(--sp-muted, #6B7280); }
.sp-hub-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 50; min-width: 170px; padding: 4px 0; background: #fff; border: 1px solid var(--sp-control-line, #C9D2DE); border-radius: 8px; box-shadow: 0 8px 24px rgba(31, 42, 68, .16); text-align: left; }
.sp-hub-menu a { display: block; padding: 7px 14px; font-size: 13px; color: var(--sp-ink, #1F2937); text-decoration: none; white-space: nowrap; }
.sp-hub-menu a:hover { background: var(--sp-head, #F4F6FA); }
@media (max-width: 1100px) { .sp-hub-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } }
/* ---------------------------------------------------------------------------
Brackets (Bracket_BLL): league tables (round robin, pool, guaranteed, cross pool)
and the bracket title row in the template view. Elimination grids: Elimination.css.
--------------------------------------------------------------------------- */
table.sp-bracket { border-collapse: separate; border-spacing: 0; background: #fff; margin: 0 0 16px; font-size: 13px; color: #1F2937; }
table.sp-bracket-league { border: 1px solid #D5DBE5; border-radius: 10px; overflow: hidden; }
table.sp-bracket-league td { border: 0; border-top: 1px solid #E6EAF0; padding: 6px 10px; text-align: center; white-space: nowrap; }
table.sp-bracket-league tr:first-child td { border-top: 0; }
tr.sp-bracket-titlerow > td.sp-bracket-title { text-align: left; padding: 10px 12px; background: #F4F6FA; border-bottom: 1px solid #D5DBE5; color: #4B5563; font-size: 12px; white-space: normal; }
tr.sp-bracket-titlerow > td.sp-bracket-title b { display: inline-block; margin-right: 6px; font-size: 15px; color: #1F2A44; }
table.sp-bracket-league tr.sp-br-head td { background: #EEF2F8; color: #1F2A44; font-weight: 700; font-size: 12px; letter-spacing: .02em; }
table.sp-bracket-league tr.sp-br-head td b { font-size: 13px; }
table.sp-bracket-league tr.sp-br-row:nth-child(even) td { background: #FAFBFD; }
table.sp-bracket-league td.sp-br-team { text-align: left; font-weight: 600; color: #1F2A44; }
table.sp-bracket-league td.sp-br-points { background: #FFF8DB !important; font-weight: 700; min-width: 52px; }
table.sp-bracket-league td.sp-br-self { background: repeating-linear-gradient(135deg, #E6EAF0 0 4px, #F4F6FA 4px 8px) !important; }
table.sp-bracket-league tr.sp-br-row:hover td { background: #F1F6FF; }
@media print {
table.sp-bracket-league { border-color: #000; border-radius: 0; }
table.sp-bracket-league td { border-top-color: #999; }
table.sp-bracket-league tr.sp-br-head td, table.sp-bracket-league td.sp-br-points { background: #fff !important; }
}
/* Pool reports (Reports_BLL RptPoolResults / RptPoolBlank): a game list per pool */
table.sp-pool-report { border-collapse: separate; border-spacing: 0; border: 1px solid #D5DBE5; border-radius: 10px; overflow: hidden; background: #fff; margin: 0 0 16px; font-size: 13px; color: #1F2937; }
table.sp-pool-report td { border: 0; border-top: 1px solid #E6EAF0; padding: 6px 10px; white-space: nowrap; }
table.sp-pool-report tr.sp-pool-title td { border-top: 0; background: #F4F6FA; color: #1F2A44; font-size: 15px; font-weight: 700; text-align: left; padding: 10px 12px; }
table.sp-pool-report tr.sp-pool-head td { background: #EEF2F8; color: #1F2A44; font-weight: 700; font-size: 12px; }
table.sp-pool-report td.sp-pool-team { font-weight: 600; }
table.sp-pool-report td.sp-pool-score { font-weight: 700; min-width: 36px; text-align: center; }
table.sp-pool-report td.sp-pool-vs { color: #9CA3AF; font-size: 11px; text-align: center; background: transparent !important; }
table.sp-pool-report tr.sp-pool-gap td { padding: 3px; background: #F4F6FA; }
@media print { table.sp-pool-report { border-color: #000; border-radius: 0; } table.sp-pool-report tr.sp-pool-head td, table.sp-pool-report tr.sp-pool-title td { background: #fff; } }
/* "Switch to Winners / Consolation bracket" link above a split elimination bracket */
a.sp-bracket-switch { display: inline-block; margin: 0 0 8px; padding: 5px 12px; border: 1px solid #C9D2DE; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; color: #1F2A44; text-decoration: none; }
a.sp-bracket-switch:hover { background: #F4F6FA; }
/* ---------------------------------------------------------------------------
Report tables (Reports_BLL: games by time / team / field / date range, standings, schedule
balance, matchup count, facility usage, officials). Every report table has the class sp-report;
only tables drawn with a border get the card look (layout-only tables have none).
The row colours the reports set keep their meaning, as softer tints:
yellow = updated or postponed, orange / red = playoff, light blue = practice.
--------------------------------------------------------------------------- */
table.sp-report[border] { border-collapse: separate; border-spacing: 0; border: 1px solid #D5DBE5; border-radius: 10px; overflow: hidden; background: #fff; margin: 0 0 16px; font-size: 13px; color: #1F2937; }
table.sp-report[border] td { border: 0; border-top: 1px solid #E6EAF0; padding: 6px 10px; }
table.sp-report[border] tr:first-child td { border-top: 0; }
table.sp-report tr.header td, table.sp-report td.header { background: #EEF2F8 !important; color: #1F2A44 !important; font-weight: 700; font-size: 12px; letter-spacing: .02em; white-space: nowrap; }
table.sp-report tr.sp-report-title td { background: #F4F6FA; color: #1F2A44; font-size: 15px; font-weight: 700; text-align: left; padding: 10px 12px; }
table.sp-report tr.sp-report-section td { background: #F7F8FB; color: #4B5563; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.sp-report td.break { background: #F4F6FA; color: #1F2A44; font-weight: 700; }
table.sp-report tr[bgcolor="White" i] td { background: #fff; }
table.sp-report tr[bgcolor="Yellow" i]:not(.header) td { background: #FFF6D6; }
table.sp-report tr[bgcolor="Orange" i] td, table.sp-report tr[bgcolor="Red" i] td { background: #FDEBDD; }
table.sp-report tr[bgcolor="LightBlue" i]:not(.header) td { background: #EAF2FF; }
table.sp-report td[bgcolor="Yellow" i] { background: #FFF6D6; font-weight: 700; }
table.sp-report[border] tr:not(.header):hover td { filter: brightness(.98); }
@media print {
table.sp-report[border] { border-color: #000; border-radius: 0; }
table.sp-report[border] td { border-top-color: #999; }
}
/* Create schedule wizard, Games step: a saved template or a bracket picked here */
.sp-sch-source { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 12px; }
.sp-sch-source input { margin-right: 6px; }
.sp-sch-source label { font-weight: 600; color: #1F2A44; }
.sp-sch-source-panel { margin-top: 4px; }
.sp-sch-fixed { font-weight: 700; color: #1F2A44; }
.sp-sch-bracket-options { margin-top: 6px; }
.sp-sch-summary { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #EAF7EF; border: 1px solid #B9E2C7; color: #1E5631; font-weight: 600; }
/* asp:Calendar title row: previous month, title, next month on one line, centred vertically.
(The cells were sized by percentages, so the links could sit at different heights and a long
month name wrapped; the grey is set inline on the outer cell, which the class doesn't reach.) */
table.sp-calendar > tbody > tr:first-child > td { background-color: transparent !important; padding: 0 0 6px; }
table.sp-calendar table.sp-cal-title { padding: 0; }
table.sp-calendar table.sp-cal-title tr { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
table.sp-calendar table.sp-cal-title td { width: auto !important; padding: 0; vertical-align: middle !important; white-space: nowrap; }
table.sp-calendar table.sp-cal-title td:not(.sp-cal-nav) { flex: 1 1 auto; text-align: center; font-size: 16px; font-weight: 600; }
table.sp-calendar table.sp-cal-title td.sp-cal-nav { flex: 0 0 auto; }
table.sp-calendar .sp-cal-nav a { display: inline-block; padding: 3px 6px; line-height: 1.2; }
/* Create schedule, Preview: each bracket's games, round by round (Scheduler.HtmlPreviewMatchesByBracket) */
table.sp-preview-games { border-collapse: separate; border-spacing: 0; border: 1px solid #D5DBE5; border-radius: 10px; overflow: hidden; background: #fff; font-size: 13px; color: #1F2937; min-width: 260px; }
table.sp-preview-games td { border: 0; padding: 6px 10px; vertical-align: top; }
table.sp-preview-games tr.sp-pg-round td { background: #EEF2F8; color: #1F2A44; font-weight: 700; font-size: 12px; letter-spacing: .02em; border-top: 1px solid #D5DBE5; }
table.sp-preview-games tr:first-child td { border-top: 0; }
table.sp-preview-games tr.sp-pg-game td { border-top: 1px solid #E6EAF0; }
table.sp-preview-games td.sp-pg-teams { font-weight: 600; color: #1F2A44; }
table.sp-preview-games .sp-pg-field { color: #6B7280; font-size: 12px; }
table.sp-preview-games tr.sp-pg-unplaced td { background: #FFF6D6; }
table.sp-preview-games .sp-pg-none { color: #9A3412; font-weight: 700; }
/* Templates: find box on the list, a mark for names used twice, and the wizard's name note */
.sp-tpl-find { flex: 1 1 240px; max-width: 360px; padding: 6px 10px; font: inherit; border: 1px solid #C9D2DE; border-radius: 8px; }
.sp-tpl-find:focus { outline: none; border-color: #2F6FEB; box-shadow: 0 0 0 3px rgba(47,111,235,.18); }
.sp-tpl-dup { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #FFF6D6; border: 1px solid #F2D27A; color: #8A5A00; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sp-tpl-name-note { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #FDECEC; border: 1px solid #F3B9B9; color: #9B1C1C; font-size: 13px; }
/* Template editor frame (Template.BLL SchTemplateRender): the total, one section per level (heading,
brackets, Seeds card). The brackets inside are styled by .sp-bracket. */
table.sp-tpl-editor { border-collapse: separate; border-spacing: 0; width: 100%; }
table.sp-tpl-editor > tbody > tr > td { padding: 0 0 18px; vertical-align: top; }
td.sp-tpl-total { color: #4B5563; font-size: 13px; font-weight: 600; padding-bottom: 12px !important; }
table.sp-tpl-level { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid #D5DBE5; border-radius: 12px; background: #fff; }
table.sp-tpl-level > tbody > tr > td { border: 0; padding: 12px 14px; vertical-align: top; }
td.sp-tpl-level-head { background: #F4F6FA; border-bottom: 1px solid #D5DBE5 !important; border-radius: 12px 12px 0 0; padding: 10px 14px !important; }
.sp-tpl-level-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
table.sp-tpl-level > tbody > tr:only-child > td.sp-tpl-level-head { border-bottom: 0 !important; border-radius: 12px; }
.sp-tpl-level-name { font-size: 16px; font-weight: 700; color: #1F2A44; }
.sp-tpl-level-kind { padding: 2px 10px; border-radius: 999px; background: #E3EAF7; color: #1F2A44; font-size: 12px; font-weight: 600; }
.sp-tpl-level-sum { color: #6B7280; font-size: 13px; }
input.sp-tpl-collapse { margin-left: auto; }
td.sp-tpl-level-brackets table.sp-bracket { margin: 0 0 14px; }
/* Elimination brackets' outer frame (drawn with border=1 by the bracket library): a card like league brackets */
table.sp-bracket-elim { border: 1px solid #D5DBE5 !important; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
table.sp-bracket-elim > tbody > tr > td { border: 0 !important; }
table.sp-bracket-elim > tbody > tr > td.sp-bracket-title { border-bottom: 1px solid #D5DBE5 !important; }
td.sp-tpl-level-brackets table.sp-bracket:last-child { margin-bottom: 0; }
td.sp-tpl-seeds { width: 220px; padding-left: 4px !important; }
.sp-tpl-seeds-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4B5563; margin: 2px 0 6px; }
ol.sp-tpl-seeds-list { margin: 0; padding: 8px 10px 8px 30px; border: 1px solid #E6EAF0; border-radius: 10px; background: #FAFBFD; font-size: 13px; color: #1F2937; }
ol.sp-tpl-seeds-list li { padding: 3px 0; }
.sp-tpl-note { color: #6B7280; font-size: 13px; }
input.sp-tpl-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 4px 12px; margin: 0 6px 0 0; border: 1px solid #C9D2DE; border-radius: 8px; background: #fff; color: #1F2A44; cursor: pointer; }
input.sp-tpl-btn:hover { background: #F4F6FA; }
input.sp-tpl-btn-danger { color: #B42318; }
input.sp-tpl-btn-danger:hover { background: #FDECEC; border-color: #F3B9B9; }
a.sp-tpl-slot { color: #2F6FEB; }
@media (max-width: 900px) { td.sp-tpl-seeds { display: block; width: auto; padding-left: 14px !important; } }
@media print { table.sp-tpl-level { border-color: #000; } td.sp-tpl-level-head { background: #fff; } input.sp-tpl-btn { display: none; } }
/* Template page: offer to remove a template from its schedules and delete it */
.sp-tv-detach { border-color: #F2D27A !important; background: #FFFBEB !important; margin-bottom: 14px; }
.sp-tv-detach-text { margin: 0 0 10px; color: #1F2937; } |