/* =====================================================================
   Facilities color variant
   Default.css is the Scheduler's theme, shared as-is. This file loads
   after it (theme files load in alphabetical order: Default.css, then
   FacilitiesBrand.css) and changes only the colors that tell people
   which app they are in:

     Scheduler:  navy menu bar, blue accent
     Facilities: deep teal menu bar, teal accent

   Text, primary buttons, borders and layout stay the same in both apps.
   To change the Facilities colors, edit the values below only.
   ===================================================================== */

:root {
    --sp-brand: #0F3D47;          /* Facilities menu bar (Scheduler: navy #1F2A44) */
    --sp-accent: #0E7C86;         /* links, focus rings, active items (Scheduler: #2F6FEB) */
    --sp-accent-soft: #E3F4F5;    /* menu hover, highlights (Scheduler: #EAF0FD) */
    --sp-row-hover: #E6F3F4;      /* grid row under the mouse (Scheduler: #E8EFFB) */
    --sp-row-selected: #CDEBED;   /* selected grid row (Scheduler: #D9E5FB) */
}

/* Menu bar: teal instead of navy. The accent line under it follows --sp-accent. */
.sp-header table.MainMenuBG {
    background: var(--sp-brand);
}

/* Header banner for Facilities: the same soft gradient idea as the Scheduler's
   (Common.CSS, which shows sports balls), in teal, with a site plan seen from
   above. Dashed lines show spaces used more than one way, as Facilities books
   them. Left to right: a running track around a football field, a baseball
   diamond, a soccer field split into three small cross-field games, a
   basketball court with volleyball lines, a tennis court and a pickleball
   court set one up and one down, and a pool.
   Each venue in colors that suit it, at 60% strength: a red-orange running
   track, green grass for football, baseball and soccer with a clay-brown
   infield, a hardwood-orange basketball court with blue volleyball lines, a
   blue tennis court, a teal pickleball court and a water-blue pool.
   Inline SVG: nothing to download, sharp on any screen. Replaces whatever image
   Common.CSS sets. */
.sp-header td.HeaderBackground,
.sp-header table.HeaderBackground {
    background-color: #EEF6F7;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='100' viewBox='0 0 640 100' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'%3E%3Cg stroke='%23C2410C'%3E%3Crect x='10' y='12' width='150' height='76' rx='38'/%3E%3Crect x='16' y='18' width='138' height='64' rx='32' stroke-width='1'/%3E%3Crect x='22' y='24' width='126' height='52' rx='26' stroke-width='1'/%3E%3C/g%3E%3Cg stroke='%232E7D32'%3E%3Crect x='40' y='32' width='90' height='36'/%3E%3Cpath d='M49 32V68M121 32V68M85 32V68'/%3E%3Cpath d='M58 32V68M67 32V68M76 32V68M94 32V68M103 32V68M112 32V68' stroke-width='1'/%3E%3C/g%3E%3Cg stroke='%232E7D32'%3E%3Cpath d='M220 88L175 43M220 88L265 43'/%3E%3Cpath d='M175 43A64 64 0 0 1 265 43'/%3E%3C/g%3E%3Cg stroke='%239A5B2E'%3E%3Cpath d='M192 60A40 40 0 0 1 248 60' stroke-width='1'/%3E%3Cpath d='M220 88L238 70L220 52L202 70Z'/%3E%3Ccircle cx='220' cy='71' r='2.2'/%3E%3C/g%3E%3Cg stroke='%231E8E3E'%3E%3Crect x='280' y='14' width='104' height='72' rx='1'/%3E%3Cpath d='M332 14V86M280 34H294V66H280M384 34H370V66H384' stroke-width='1'/%3E%3Ccircle cx='332' cy='50' r='9' stroke-width='1'/%3E%3Cpath d='M314.7 14V86M349.3 14V86' stroke-dasharray='4 3'/%3E%3Cpath d='M293 14V19H301V14M328 14V19H336V14M363 14V19H371V14M293 86V81H301V86M328 86V81H336V86M363 86V81H371V86'/%3E%3C/g%3E%3Cg stroke='%23D97706'%3E%3Crect x='398' y='26' width='88' height='48' rx='2'/%3E%3Cpath d='M442 26V74'/%3E%3Ccircle cx='442' cy='50' r='7' stroke-width='1'/%3E%3Cpath d='M398 42H416V58H398M486 42H468V58H486' stroke-width='1'/%3E%3C/g%3E%3Cg stroke='%231D4ED8'%3E%3Crect x='412' y='34' width='60' height='32' stroke-dasharray='4 3'/%3E%3Cpath d='M432 34V66M452 34V66' stroke-width='1' stroke-dasharray='2 3'/%3E%3Cpath d='M442 30V70' stroke-width='2.4' stroke-dasharray='1 3'/%3E%3C/g%3E%3Cg stroke='%232563EB'%3E%3Crect x='498' y='8' width='22' height='46' rx='1'/%3E%3Cpath d='M500.5 8V54M517.5 8V54M500.5 18.6H517.5M500.5 43.4H517.5M509 18.6V43.4' stroke-width='1'/%3E%3Cpath d='M498 31H520' stroke-width='2'/%3E%3C/g%3E%3Cg stroke='%230F766E'%3E%3Crect x='522' y='46' width='22' height='46' rx='1'/%3E%3Cpath d='M522 61.7H544M522 76.3H544M533 46V61.7M533 76.3V92' stroke-width='1'/%3E%3Cpath d='M522 69H544' stroke-width='2'/%3E%3C/g%3E%3Cg stroke='%230891B2'%3E%3Crect x='550' y='18' width='82' height='64' rx='6' stroke-width='1'/%3E%3Crect x='556' y='24' width='70' height='52' rx='3'/%3E%3Cpath d='M560 34.4H622M560 44.8H622M560 55.2H622M560 65.6H622' stroke-width='1' stroke-dasharray='3 3'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(115deg, #F8FBFB 0%, #EDF6F7 45%, #DDEFF0 100%);
    background-repeat: no-repeat, no-repeat;
    /* Fixed size and offset from the top: this cell also runs behind the
       46px menu bar, so a percentage height made the drawing too big and
       centered it partly behind the menu.
       320px from the right keeps it clear of the SportsPilot Facilities logo
       and the home / facility / schedule icons. */
    background-position: right 320px top 16px, 0 0;
    background-size: auto 80px, 100% 100%;
    border-bottom: 1px solid #C5E2E4;
}

/* Narrower windows: a smaller drawing, then none, so it never sits behind
   the organization's name. */
@media (max-width: 1600px) {
    .sp-header td.HeaderBackground,
    .sp-header table.HeaderBackground { background-size: auto 60px, 100% 100%; background-position: right 310px top 26px, 0 0; }
}
@media (max-width: 1250px) {
    .sp-header td.HeaderBackground,
    .sp-header table.HeaderBackground { background-image: linear-gradient(115deg, #F8FBFB 0%, #EDF6F7 45%, #DDEFF0 100%); }
}

/* Sign-in page (no menu before signing in): a teal band on top of the card. */
body.sp-body .sp-login {
    border-top: 4px solid var(--sp-brand);
}