/* ===========================================================================
   Holiday GUI theme (Coach app) — NON-DESTRUCTIVE overlay scoped to
   body.theme-july4 (added by theme-holiday.js only in the date window).
   This is the LIGHT app, so cards stay light + readable (data-dense screens);
   the celebration photo shows behind, through the header and around the cards.
   Revert = delete the <link> + <script> from owner.html.
   =========================================================================== */

/* wallpaper behind everything (body is the flex shell; header + scroll body sit
   on top). A soft light scrim keeps the light cards/text crisp over the photo. */
body.theme-july4{
  background:linear-gradient(rgba(20,26,40,.28),rgba(20,26,40,.42)),
             url("/theme-july4.jpg") center/cover no-repeat!important;
}

/* frosted header */
body.theme-july4 .top{
  background:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}

/* the scroll area is transparent so the wallpaper shows in the gaps/padding */
body.theme-july4 .body{ background:transparent!important; }

/* cards stay light + high-opacity for readability, just lifted onto glass */
body.theme-july4 .card,
body.theme-july4 .rrow,
body.theme-july4 .kpi,
body.theme-july4 .seg,
body.theme-july4 .flag,
body.theme-july4 .ai,
body.theme-july4 .placeholder{
  background:rgba(255,255,255,.90)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.65)!important;
  box-shadow:0 4px 16px rgba(10,20,40,.18);
}

/* frosted bottom bar with red / white·slate / blue icons */
body.theme-july4 .nav{
  background:rgba(255,255,255,.88)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.theme-july4 .nav button:nth-child(1){color:#c8102e}
body.theme-july4 .nav button:nth-child(2){color:#2f6fd0}
body.theme-july4 .nav button:nth-child(3){color:#c8102e}
body.theme-july4 .nav button:nth-child(4){color:#2f6fd0}
body.theme-july4 .nav button:nth-child(5){color:#c8102e}
body.theme-july4 .nav button:nth-child(6){color:#2f6fd0}
body.theme-july4 .nav button.on{color:#c8102e}

/* the empty check-in boxes were washing into the frosted cards — give them a
   clear grey outline + inset fill so they read as tappable. Colored states
   (in/out/late) keep their own fill via the :not() guard. */
body.theme-july4 .check:not(.in):not(.out):not(.late){
  border-color:#8894a6!important;
  background:#eef1f6!important;
  box-shadow:inset 0 1px 3px rgba(20,30,50,.14);
}