/* ═══════════════════════════════════════════════════════════════
   css/brand-airhop.css — AirHop brand theme.
   Dark navy, hot pink accent, per-row colour blocks on both sides.
   ═══════════════════════════════════════════════════════════════ */

body.brand-airhop {
  --brand-primary:       #E5007D;
  --brand-bg:            #1B2A4A;
  --brand-header-accent: #FFFFFF;
  --brand-surface:       rgba(255, 255, 255, 0.07);
  --brand-border:        rgba(255, 255, 255, 0.12);
}

/* ── Background pattern (subtle diagonal crosshatch) ────────── */

body.brand-airhop:not(.settings-page) .board-body {
  background-color: #1B2A4A;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.10) 1.2px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px,   transparent 1px),
    linear-gradient(0deg,   rgba(255, 255, 255, 0.03) 1px,   transparent 1px),
    linear-gradient(90deg,  rgba(255, 255, 255, 0.03) 1px,   transparent 1px);
  background-size: 28px 28px, 48px 48px, 28px 28px, 28px 28px;
  background-position: 0 0, 14px 20px, 0 0, 0 0;
}

/* ── Per-row lighter-shade blocks, both sides (TV display only) */

body.brand-airhop:not(.settings-page) .sessions-list {
  gap: clamp(4px, 0.6vh, 8px);
  padding: clamp(4px, 0.6vh, 8px);
}

body.brand-airhop:not(.settings-page) .session-bar {
  position: relative;
  padding: 0 8vw;
  border-radius: 6px;
}

body.brand-airhop:not(.settings-page) .session-bar::before,
body.brand-airhop:not(.settings-page) .session-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5%;
  pointer-events: none;
}

body.brand-airhop:not(.settings-page) .session-bar::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.30) 25%,
    rgba(255,255,255,0.18) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.09) 75%,
    rgba(255,255,255,0.03) 75%,
    rgba(255,255,255,0.03) 100%
  );
}

body.brand-airhop:not(.settings-page) .session-bar::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.30) 25%,
    rgba(255,255,255,0.18) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.09) 75%,
    rgba(255,255,255,0.03) 75%,
    rgba(255,255,255,0.03) 100%
  );
}

body.brand-airhop:not(.settings-page) .board-header {
  position: relative;
  padding-left: 8vw;
  padding-right: 8vw;
  border-bottom-width: 4px;
}

body.brand-airhop:not(.settings-page) .board-header::before,
body.brand-airhop:not(.settings-page) .board-header::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5%;
  pointer-events: none;
}

body.brand-airhop:not(.settings-page) .board-header::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.30) 25%,
    rgba(0,0,0,0.18) 25%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.09) 50%,
    rgba(0,0,0,0.09) 75%,
    rgba(0,0,0,0.03) 75%,
    rgba(0,0,0,0.03) 100%
  );
}

body.brand-airhop:not(.settings-page) .board-header::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.30) 25%,
    rgba(0,0,0,0.18) 25%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.09) 50%,
    rgba(0,0,0,0.09) 75%,
    rgba(0,0,0,0.03) 75%,
    rgba(0,0,0,0.03) 100%
  );
}

/* ── Typography & colour ───────────────────────────────────── */

body.brand-airhop .header-clock,
body.brand-airhop .header-label {
  color: #FFFFFF;
}


/* ── Settings page ─────────────────────────────────────────── */

body.brand-airhop .btn-primary {
  background: #E5007D;
  color: #fff;
}

body.brand-airhop .settings-header {
  border-bottom-color: rgba(229, 0, 125, 0.35);
}

body.brand-airhop .settings-card--brand {
  border-color: rgba(229, 0, 125, 0.3);
  background: linear-gradient(
    168deg,
    rgba(229, 0, 125, 0.07) 0%,
    var(--brand-surface) 100%
  );
}