/* =====================================================================
   PL Scoreboards – site styles
   Colours are taken from the PL Scoreboards logos: deep navy lettering,
   bright "LED" blue, and the red / amber / white of the LED score panel.
   Bootstrap 5 provides the grid and components; the variables below
   re-theme it.

   Layout of this file (one block per area of the site):
     Variables, base page, headings
     Buttons
     Header / navigation, Footer
     Cards and surfaces, Forms
     Account (auth) pages, Home page hero
     LED display (preview)
     Scoreboard list, Scoreboard settings
     Subscription, My account, Admin, Alerts

   The site is "mobile first": the plain rules suit phones and the
   @media (min-width: ...) blocks adjust things for bigger screens.
   Breakpoints match Bootstrap's: 576px (sm), 768px (md), 992px (lg).
   ===================================================================== */

/* Site-wide variables. Everything below uses these, so a colour can be changed in one place. */
:root {
  /* Navy shades: darkest (footer, hero) to lighter (hover/active states). */
  --pl-navy-900: #061634;
  --pl-navy: #0b2454;
  --pl-navy-700: #14336f;
  /* The logo's bright blue, a darker blue for hover, and a very pale blue for tinted backgrounds. */
  --pl-blue: #0a72d4;
  --pl-blue-600: #075fb3;
  --pl-blue-100: #e3f0fc;
  /* LED colours used by the on-screen scoreboard preview. */
  --pl-led-red: #ff3b2f;
  --pl-led-amber: #ffb81c;
  --pl-led-white: #f4f6ff;
  /* Near-black of the LED panel's face. */
  --pl-panel: #0e1022;
  /* Page background (a very light blue-grey), normal text and "muted" secondary text. */
  --pl-bg: #f3f6fb;
  --pl-text: #13213d;
  --pl-muted: #5b6b87;
  /* Corner rounding and the soft two-layer shadow used by cards. */
  --pl-radius: 14px;
  --pl-shadow: 0 1px 2px rgba(11, 36, 84, .06), 0 8px 24px rgba(11, 36, 84, .08);

  /* Bootstrap overrides: Bootstrap reads these variables, so setting them re-colours its
     components. The *-rgb versions are needed where Bootstrap mixes in transparency. */
  --bs-body-bg: var(--pl-bg);
  --bs-body-color: var(--pl-text);
  --bs-secondary-color: var(--pl-muted);
  --bs-link-color: var(--pl-blue);
  --bs-link-color-rgb: 10, 114, 212;
  --bs-link-hover-color: var(--pl-blue-600);
  --bs-link-hover-color-rgb: 7, 95, 179;
  --bs-primary: var(--pl-blue);
  --bs-primary-rgb: 10, 114, 212;
  --bs-border-radius: 10px;
  --bs-border-radius-lg: var(--pl-radius);
  /* Each device's own system font (Segoe UI on Windows, San Francisco on Apple, Roboto on Android):
     fast (nothing to download) and familiar. */
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base text size: 15px on phones, 16px from tablet width. All "rem" sizes scale from this. */
html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* The page is a vertical flex column (header, main, footer) at least as tall as the window,
   so on short pages the footer still sits at the bottom of the screen ("sticky footer"). */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--pl-bg);
}

/* The main content grows to fill any spare height, pushing the footer down. */
main {
  flex: 1 0 auto;
}

/* Headings echo the logo: heavy, italic and slightly condensed. */
h1, h2, h3, .display-heading {
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--pl-navy);
}

/* Page titles scale smoothly with the window width, between 1.6rem (phones) and 2.3rem (desktops). */
h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
}

/* Small blue capitals shown above a heading, e.g. "YOUR ACCOUNT" above "My scoreboards". */
.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-blue);
}

/* ---------------------------------------------------------------- Buttons */

/* All buttons are bold "pills" (fully rounded ends) with a little extra side padding. */
.btn {
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 1.2rem;
}

.btn-sm {
  padding-inline: .85rem;
}

/* Bootstrap's primary button in the logo blue (Bootstrap 5.3 buttons are coloured through these
   --bs-btn-* variables). */
.btn-primary {
  --bs-btn-bg: var(--pl-blue);
  --bs-btn-border-color: var(--pl-blue);
  --bs-btn-hover-bg: var(--pl-blue-600);
  --bs-btn-hover-border-color: var(--pl-blue-600);
  --bs-btn-active-bg: var(--pl-navy-700);
  --bs-btn-active-border-color: var(--pl-navy-700);
  --bs-btn-disabled-bg: var(--pl-blue);
  --bs-btn-disabled-border-color: var(--pl-blue);
}

/* Outlined version: blue text and border, filling blue on hover. */
.btn-outline-primary {
  --bs-btn-color: var(--pl-blue);
  --bs-btn-border-color: var(--pl-blue);
  --bs-btn-hover-bg: var(--pl-blue);
  --bs-btn-hover-border-color: var(--pl-blue);
  --bs-btn-active-bg: var(--pl-blue-600);
  --bs-btn-active-border-color: var(--pl-blue-600);
}

/* Navy button (used e.g. in the "needs a subscription" banner). */
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pl-navy);
  --bs-btn-border-color: var(--pl-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pl-navy-700);
  --bs-btn-hover-border-color: var(--pl-navy-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pl-navy-900);
}

/* Amber "LED" button for the main call to action on a page (Register, Subscribe). Dark text,
   because white on amber is hard to read. */
.btn-led {
  --bs-btn-color: #1b1300;
  --bs-btn-bg: var(--pl-led-amber);
  --bs-btn-border-color: var(--pl-led-amber);
  --bs-btn-hover-color: #1b1300;
  --bs-btn-hover-bg: #ffc94d;
  --bs-btn-hover-border-color: #ffc94d;
  --bs-btn-active-color: #1b1300;
  --bs-btn-active-bg: #e6a200;
}

/* One consistent blue focus ring for buttons and form fields, so keyboard users can always see
   where they are. (focus-visible: buttons only show it for keyboard focus, not mouse clicks.) */
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(10, 114, 212, .3);
  border-color: var(--pl-blue);
}

/* ---------------------------------------------------------------- Header / navigation */

/* White header that stays at the top of the window while scrolling (sticky). The z-index keeps
   it above page content; 1030 is the level Bootstrap uses for fixed navbars. */
.site-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 36, 84, .08);
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* The blue "swoosh" stripe under the header, as in the logo. */
.site-header::after {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--pl-navy) 0%, var(--pl-blue) 55%, #4aa3f0 100%);
}

.site-header .navbar {
  padding-block: .55rem;
}

/* Logo in the header: a little smaller on phones and tablets. */
.brand-logo {
  height: 42px;
  width: auto;
}

@media (min-width: 992px) {
  .brand-logo {
    height: 48px;
  }
}

/* Menu links: navy pills; the current page's link is blue on a pale blue background.
   !important is needed to beat Bootstrap's own navbar padding rule. */
.site-header .nav-link {
  font-weight: 600;
  color: var(--pl-navy);
  border-radius: 999px;
  padding-inline: .9rem !important;
}

.site-header .nav-link:hover {
  color: var(--pl-blue);
}

.site-header .nav-link.active {
  color: var(--pl-blue);
  background: var(--pl-blue-100);
}

/* The phone "hamburger" menu button: no border, but the blue focus ring for keyboard users. */
.navbar-toggler {
  border: 0;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem rgba(10, 114, 212, .3);
}

/* The signed-in user's name in the header, with a round avatar holding their initials. */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pl-navy);
  font-weight: 600;
}

.user-chip .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pl-navy);
  color: #fff;
  /* Grid + place-items centres the initials both ways. */
  display: inline-grid;
  place-items: center;
  font-size: .8rem;
  font-style: italic;
  font-weight: 800;
}

/* Below desktop width the menu folds into the hamburger; when opened, give it some space and a
   dividing line from the logo row. */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    padding-block: .75rem;
    border-top: 1px solid #e8edf5;
    margin-top: .55rem;
  }
}

/* ---------------------------------------------------------------- Footer */

/* Dark navy footer; flex-shrink: 0 stops the body's flex column from squashing it. */
.site-footer {
  flex-shrink: 0;
  background: var(--pl-navy-900);
  color: #b8c4dc;
  font-size: .9rem;
  padding-block: 1.75rem;
  margin-top: 3rem;
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* "PL Scoreboards" written in the footer, with the second word (in a span) in light blue. */
.footer-brand {
  font-weight: 800;
  font-style: italic;
  color: #fff;
  letter-spacing: .02em;
}

.footer-brand span {
  color: #4aa3f0;
}

/* ---------------------------------------------------------------- Cards and surfaces */

/* Cards: no border, rounded corners and a soft shadow, so they float on the light background. */
.card {
  border: 0;
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-shadow);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid #edf1f7;
  font-weight: 700;
  color: var(--pl-navy);
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

/* card-body-lg: extra roomy padding, but only on tablets and up (phones need the space). */
@media (min-width: 768px) {
  .card-body.card-body-lg {
    padding: 2rem;
  }
}

/* Page heading row: title on the left, optional buttons on the right; wraps onto two lines on
   narrow screens. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin: 1.75rem 0 1.5rem;
}

.page-header h1 {
  margin: 0;
}

/* "Back to ..." links at the top of a page. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------- Forms */

.form-label {
  font-weight: 600;
  color: var(--pl-navy);
  margin-bottom: .35rem;
}

/* Softer border colour and slightly roomier fields than Bootstrap's defaults (easier to tap). */
.form-control, .form-select {
  border-color: #d5dde9;
  border-radius: 10px;
  padding: .6rem .85rem;
}

/* "Floating label" fields (label inside the box, moving up when you type): match the padding. */
.form-floating > .form-control, .form-floating > .form-select {
  padding: 1rem .85rem;
}

.form-floating > label {
  padding-left: .95rem;
}

/* Help text under fields. */
.form-text {
  color: var(--pl-muted);
}

/* Validation messages. These class names are produced by ASP.NET's validation tag helpers. */
.field-validation-error, .validation-summary-errors {
  font-size: .9rem;
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* An error summary with no errors in it: hide it so it takes no space. */
.validation-summary-valid {
  display: none;
}

/* ---------------------------------------------------------------- Account (auth) pages */

/* Sign in, register, reset password etc.: a narrow centred column. */
.auth-wrap {
  max-width: 520px;
  margin: 2.5rem auto 0;
}

.auth-wrap .auth-logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 1.5rem;
}

.auth-wrap h1 {
  text-align: center;
  font-size: 1.75rem;
}

.auth-wrap .lead {
  text-align: center;
  color: var(--pl-muted);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* "Already have an account? Sign in" style links under the form. */
.auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  color: var(--pl-muted);
}

/* Boxes for typing a 6-digit code (e-mail confirmation, authenticator): big, spaced-out,
   fixed-width digits, centred. */
.code-input {
  font-size: 1.6rem;
  letter-spacing: .5em;
  text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------------------------------------------------------------- Home page hero */

/* The big navy banner at the top of the home page: a navy gradient with two soft blue glows
   (the radial gradients) in opposite corners. overflow: hidden clips the decorative arcs below. */
.hero {
  position: relative;
  overflow: hidden;
  color: #dbe6fa;
  background:
    radial-gradient(1200px 400px at 110% 120%, rgba(10, 114, 212, .55), transparent 60%),
    radial-gradient(800px 300px at -10% -20%, rgba(74, 163, 240, .25), transparent 60%),
    linear-gradient(160deg, var(--pl-navy-900) 0%, var(--pl-navy) 60%, var(--pl-navy-700) 100%);
  padding-block: 3.5rem 4rem;
}

/* Sweeping arcs recalling the logo's swoosh. Each is the top edge of a huge, mostly off-screen
   ellipse whose only visible border is its coloured top; pointer-events: none so they never get
   in the way of clicks. */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 10px solid transparent;
  border-top-color: rgba(74, 163, 240, .35);
  width: 1400px;
  height: 500px;
  left: -300px;
  bottom: -420px;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* The second arc is thicker, a deeper blue and slightly offset from the first. */
.hero::after {
  border-top-color: rgba(10, 114, 212, .45);
  border-width: 18px;
  bottom: -450px;
  left: -200px;
}

/* Hero headline: big white capitals scaling with the window width. */
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
}

/* Words picked out in light blue inside the headline. */
.hero h1 .accent {
  color: #4aa3f0;
}

.hero .lead {
  color: #c4d3ee;
  max-width: 34rem;
}

/* White outline button on the hero: navy text when it fills white on hover. */
.hero .btn-outline-light {
  --bs-btn-hover-color: var(--pl-navy);
}

/* Rounded-square icon tiles above each feature on the home page. */
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--pl-blue-100);
  color: var(--pl-blue);
  margin-bottom: 1rem;
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

/* Numbered navy circles for the "how it works" steps (flex: 0 0 stops them shrinking). */
.step-number {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pl-navy);
  color: #fff;
  font-weight: 800;
  font-style: italic;
}

/* ---------------------------------------------------------------- LED display (preview) */

/* The dark panel with a blue bezel, like the score panel in the logo. The box-shadow does three
   jobs: a navy outer ring, a drop shadow, and an inset shadow that darkens the panel's edges. */
.led-panel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  background: var(--pl-panel);
  border: 4px solid #1f6fd0;
  border-radius: 14px;
  padding: 1rem 1.1rem .8rem;
  box-shadow: 0 0 0 3px #0b2454, 0 14px 30px rgba(0, 0, 0, .35), inset 0 0 30px rgba(0, 0, 0, .6);
  max-width: 100%;
}

/* On the home page hero the panel is tilted in 3D for a bit of drama. */
.led-panel.led-panel-hero {
  transform: perspective(900px) rotateY(-10deg) rotateZ(-3deg);
}

/* The row of digits; min-height stops the panel jumping in size between pages. */
.led-digits {
  display: flex;
  gap: .25rem;
  min-height: 4.6rem;
  align-items: center;
  justify-content: center;
}

/* One digit: a fixed-size cell holding a big red character with a glow (the two text-shadows). */
.led-digit {
  position: relative;
  width: 2.6rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  font-family: "Consolas", "Cascadia Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--pl-led-red);
  text-shadow: 0 0 6px rgba(255, 59, 47, .85), 0 0 18px rgba(255, 59, 47, .45);
  background: rgba(255, 255, 255, .02);
  border-radius: 4px;
}

/* A dot-matrix grille over the characters: a 5px repeating pattern of transparent circles in a
   panel-coloured mesh, laid over the digit, so the character looks made of separate LEDs. */
.led-digit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 55%, var(--pl-panel) 62%) 0 0 / 5px 5px;
  pointer-events: none;
}

/* Decimal point: a small glowing dot at the bottom-right of the digit (added by the "dp" class). */
.led-digit.dp::after {
  content: "";
  position: absolute;
  right: -.18rem;
  bottom: .3rem;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--pl-led-amber);
  box-shadow: 0 0 8px rgba(255, 184, 28, .9);
}

/* Separators ("-", "/", ":") are drawn in white so the numbers either side stand out. */
.led-digit.sep {
  color: var(--pl-led-white);
  text-shadow: 0 0 6px rgba(244, 246, 255, .8), 0 0 16px rgba(244, 246, 255, .35);
}

/* Amber digits, for picking out part of a page. */
.led-digit.alt {
  color: var(--pl-led-amber);
  text-shadow: 0 0 6px rgba(255, 184, 28, .85), 0 0 18px rgba(255, 184, 28, .45);
}

/* The label under the digits saying which page is showing ("CURRENT SCORE"). */
.led-caption {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8ea3c8;
  font-weight: 700;
}

/* Shown in the panel instead of digits when the board has nothing to display. */
.led-empty {
  color: #5f6b85;
  font-style: italic;
  font-size: .95rem;
  padding: 1.2rem .5rem;
}

/* Phones: smaller digits so five of them fit across, and no 3D tilt (it would push the panel
   off the side of a narrow screen). */
@media (max-width: 575.98px) {
  .led-digit {
    width: 1.9rem;
    height: 3.2rem;
    font-size: 2.5rem;
  }

  .led-digits {
    min-height: 3.5rem;
  }

  .led-panel.led-panel-hero {
    transform: none;
  }
}

/* ---------------------------------------------------------------- Scoreboard list */

/* One card per scoreboard on "My scoreboards". Full height so cards in a row line up, and a small
   lift with a deeper shadow on hover. */
.board-card {
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}

.board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(11, 36, 84, .08), 0 14px 32px rgba(11, 36, 84, .12);
}

/* Board name. overflow-wrap: anywhere lets a very long name with no spaces break instead of
   widening the card past the screen. */
.board-card .card-title {
  font-weight: 800;
  font-style: italic;
  color: var(--pl-navy);
  font-size: 1.15rem;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The board's details as a two-column grid: labels (dt) sized to fit, values (dd) take the rest. */
.board-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 0;
  font-size: .92rem;
}

.board-card dt {
  color: var(--pl-muted);
  font-weight: 500;
}

.board-card dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Scoreboard ids ("PL-000123") in a fixed-width font on a pale blue tag, wherever they appear. */
.board-id {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  color: var(--pl-navy-700);
  background: var(--pl-blue-100);
  padding: .1rem .4rem;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

/* Status "pills" (Online, Offline, Live, Blocked ...): a rounded label with a coloured dot in front.
   font-style/letter-spacing are reset so a pill inside an italic heading still looks the same. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  white-space: nowrap;
  font-style: normal;
  letter-spacing: normal;
  vertical-align: middle;
}

/* The dot, drawn in the pill's text colour (currentColor), so each colour variant gets a
   matching dot for free. */
.status-pill::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}

/* Green: online / live / active. The online dot also gets a faint green halo. */
.status-online {
  color: #0f7a3d;
  background: #dcf5e6;
}

.status-online::before {
  box-shadow: 0 0 0 3px rgba(15, 122, 61, .2);
}

/* Grey: offline / inactive. */
.status-offline {
  color: #6b7280;
  background: #eceff3;
}

/* Red: blocked / problems. */
.status-blocked {
  color: #8c1d15;
  background: #fde8e7;
}

/* Amber: unknown / waiting / test / admin badge. */
.status-unknown {
  color: #8a5a00;
  background: #fff3d6;
}

/* "No scoreboards yet" card: centred text and picture. */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-state img {
  align-self: center;
  width: 150px;
  opacity: .9;
  margin-bottom: 1rem;
}

/* The navy "Register a scoreboard" card. Its text and error colours are lightened so they can be
   read on the dark background (!important beats Bootstrap's .text-danger). */
.register-card {
  background: linear-gradient(135deg, var(--pl-navy) 0%, var(--pl-navy-700) 100%);
  color: #dbe6fa;
}

.register-card h2 {
  color: #fff;
  font-size: 1.25rem;
}

.register-card .form-text {
  color: #a9bbdc;
}

.register-card .text-danger, .register-card .field-validation-error {
  color: #ffb4ae !important;
}

/* ---------------------------------------------------------------- Scoreboard settings */

/* Label/value list (e.g. the board's status on the settings page, the subscription details):
   the same two-column grid idea as .board-card dl. */
.status-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1rem;
  margin: 0;
  font-size: .95rem;
}

.status-list dt {
  color: var(--pl-muted);
  font-weight: 500;
}

.status-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Small italic capital headings splitting up a long form ("MATCH", "DISPLAY PAGES"). The first
   one in a card doesn't need the top gap. */
.section-title {
  font-size: 1rem;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pl-navy);
  margin: 1.75rem 0 .75rem;
}

.section-title:first-child {
  margin-top: 0;
}

/* One row of the display page editor. Four columns: number badge | page type (takes the spare
   width; minmax(0, ...) lets it shrink below its content) | duration | buttons. */
.page-row {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 7.5rem auto;
  gap: .5rem;
  align-items: center;
  padding: .5rem;
  border: 1px solid #e3e9f2;
  border-radius: 12px;
  background: #fbfcfe;
  margin-bottom: .5rem;
}

/* The round navy number at the start of each row (filled in by site.js). */
.page-row .page-index {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--pl-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-style: italic;
  font-size: .85rem;
}

/* Up / down / remove buttons side by side. */
.page-row .row-actions {
  display: flex;
  gap: .25rem;
}

/* Small round icon-only buttons (the row buttons above). */
.icon-btn {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d5dde9;
  background: #fff;
  color: var(--pl-navy);
}

/* Blue on hover - but not when disabled (e.g. "up" on the first row). */
.icon-btn:hover:not(:disabled) {
  background: var(--pl-blue-100);
  color: var(--pl-blue);
  border-color: var(--pl-blue);
}

/* Disabled buttons fade out. */
.icon-btn:disabled {
  opacity: .35;
}

/* The remove button turns red on hover instead. */
.icon-btn.danger:hover:not(:disabled) {
  background: #fde8e7;
  color: #c62a1f;
  border-color: #c62a1f;
}

.icon-btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 575.98px) {
  /* On phones the page type takes a full row; duration and buttons share the row underneath. */
  .page-row {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  /* Page type spans columns 2-3 of the first line. */
  .page-row select {
    grid-column: 2 / 4;
  }

  /* Duration goes under it in column 2 ... */
  .page-row .duration-group {
    grid-column: 2;
  }

  /* ... with the buttons beside it in column 3. */
  .page-row .row-actions {
    grid-column: 3;
  }
}

/* "Danger zone" card (de-register / delete): a red border and heading instead of a shadow, so it
   looks different from everything else on the page. */
.danger-zone {
  border: 1px solid #f3c7c3;
  box-shadow: none;
}

.danger-zone .card-header {
  color: #b3261e;
  border-bottom-color: #f7dcd9;
}

/* Scoring mode choice on the settings page: each option is a bordered card containing its radio
   button; the chosen one is outlined in blue (:has() checks the radio inside it). */
.mode-option {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  height: 100%;
  padding: .75rem .9rem;
  border: 1px solid #d5dde9;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.mode-option .form-check-input {
  margin-top: .2rem;
  flex-shrink: 0;
}

.mode-option:has(input:checked) {
  border-color: var(--pl-blue);
  background: var(--pl-blue-100);
  box-shadow: 0 0 0 1px var(--pl-blue);
}

/* ---------------------------------------------------------------- Manual scoring */

/* The two LED panels (score and overs) side by side, wrapping under each other on narrow phones. */
.score-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.score-panel-label {
  text-align: center;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pl-muted);
  margin-bottom: .35rem;
}

/* Fast scoring: one row per item (label, then its buttons). */
.score-buttons {
  display: grid;
  gap: .75rem;
}

.score-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

/* The label takes the space on the left; on phones it gets its own line above the buttons. */
.score-button-label {
  flex: 1 0 8rem;
  font-weight: 600;
  color: var(--pl-navy);
}

.score-button-label strong {
  font-size: 1.15rem;
  margin-left: .35rem;
}

/* Big, easy-to-hit buttons (at least 48 px, the usual minimum touch target). */
.score-btn {
  min-width: 3.6rem;
  min-height: 3rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.score-btn-wide {
  min-width: 7rem;
}

@media (max-width: 575.98px) {
  .score-button-label {
    flex-basis: 100%;
  }

  .score-btn {
    flex: 1 1 0;
  }
}

/* ---------------------------------------------------------------- Subscription */

/* The plan card: overflow: hidden clips the gradient heading to the card's rounded corners. */
.plan-card {
  overflow: hidden;
}

/* Navy-to-blue heading band at the top of the plan card. */
.plan-card .plan-head {
  background: linear-gradient(135deg, var(--pl-navy) 0%, var(--pl-blue) 100%);
  color: #fff;
  padding: 1.5rem;
}

.plan-card .plan-head h2 {
  color: #fff;
  margin: 0;
}

/* The plan's feature list, with tick icons instead of bullets. */
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.plan-features li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .35rem 0;
}

/* The tick: a pale blue circle with a blue check mark. The check is a tiny SVG embedded straight
   in the CSS (a "data:" URL, URL-encoded) so there's no extra image file to load. */
.plan-features li::before {
  content: "";
  flex: 0 0 1.1rem;
  height: 1.1rem;
  margin-top: .15rem;
  border-radius: 50%;
  background: var(--pl-blue-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230a72d4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / .8rem no-repeat;
}

/* Pale amber "Live scoring needs a subscription" banner on My scoreboards: message on the left,
   button on the right (wrapping underneath on phones). */
.subscription-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--pl-radius);
  padding: 1rem 1.25rem;
  background: #fff7e0;
  border: 1px solid #ffe2a1;
  color: #5a4100;
}

/* ---------------------------------------------------------------- My account */

/* The side menu of the account pages (Profile, E-mail, Password, Two-factor, Delete account). */
.manage-nav {
  overflow: hidden;
}

.manage-nav .list-group-item {
  border-color: #edf1f7;
  font-weight: 600;
  color: var(--pl-navy);
  padding: .8rem 1.1rem;
}

/* The current page: pale blue with a blue bar down its left edge (an inset shadow, so it takes
   no extra space). */
.manage-nav .list-group-item.active {
  background: var(--pl-blue-100);
  color: var(--pl-blue);
  border-color: #edf1f7;
  box-shadow: inset 3px 0 0 var(--pl-blue);
}

/* "Delete account", when it's the current page, uses red instead. */
.manage-nav .list-group-item.text-danger.active {
  background: #fde8e7;
  box-shadow: inset 3px 0 0 #c62a1f;
}

/* The user chip in the header links to the account pages; blue on hover. */
.user-chip:hover {
  color: var(--pl-blue);
}

/* ---------------------------------------------------------------- Admin */

/* The admin tabs (Overview / Users / Scoreboards) as white pill buttons; the current one navy. */
.admin-nav {
  gap: .35rem;
  flex-wrap: wrap;
}

.admin-nav .nav-link {
  font-weight: 600;
  color: var(--pl-navy);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--pl-shadow);
}

.admin-nav .nav-link.active {
  background: var(--pl-navy);
  color: #fff;
}

/* Admin tables: slightly smaller text, small grey capital column headings that don't wrap. */
.admin-table {
  font-size: .93rem;
}

.admin-table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pl-muted);
  border-bottom-color: #e3e9f2;
  white-space: nowrap;
  padding-top: .9rem;
}

.admin-table td, .admin-table th {
  padding-inline: 1rem;
}

/* The number tiles on the admin overview. They are links, so remove the link underline/colour,
   and lift slightly on hover to show they can be clicked. */
.stat-card {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

/* The big number ... */
.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  font-style: italic;
  color: var(--pl-navy);
  line-height: 1.1;
}

/* ... what it counts ... */
.stat-label {
  font-weight: 600;
  color: var(--pl-muted);
}

/* ... and an optional extra line in small print. */
.stat-sub {
  font-size: .82rem;
  color: var(--pl-muted);
  margin-top: .25rem;
}

/* A tile that stands out (blue gradient, white text), for one that needs attention. */
.stat-card-action {
  background: linear-gradient(135deg, var(--pl-navy) 0%, var(--pl-blue) 100%);
}

.stat-card-action .stat-value, .stat-card-action .stat-label {
  color: #fff;
}

/* ---------------------------------------------------------------- Alerts */

/* Bootstrap alerts, borderless and rounded, in the site's own green and red. */
.alert {
  border-radius: 12px;
  border: 0;
}

.alert-success {
  background: #dcf5e6;
  color: #0f5132;
}

.alert-danger {
  background: #fde8e7;
  color: #8c1d15;
}