/* ============================================================
  Copyright © 2025 Kevin Shuck. All Rights Reserved.
  Project: Online Wrestling Match Book

  This file and its contents are the intellectual property of
  Kevin Shuck. Unauthorized reproduction, distribution, or
  modification of this code, in whole or in part, is strictly
  prohibited without prior written consent.

  For licensing, permissions, or collaboration inquiries,
  contact: [wrestlingmatchbook@gmail.com]
============================================================ */


/* ============================================================
   THEME TOKENS
   - Default = Light
   - Dark enabled via: html[data-theme="dark"]
============================================================ */
@font-face {
  font-family: 'LED Dot Matrix';
  src: url('../../../fonts/led_dot_matrix/LED%20Dot-Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* =========================================
   SCOREBOARD TOTALS — DOT MATRIX STYLE
========================================= */

#total-home-score,
#total-away-score {
  font-family: 'LED Dot Matrix', 'Digital-7', monospace;
  font-size: 75px;            /* match your table sizing */
  text-align: center;
  line-height: 1;
  font-weight: normal;
  padding: 0;
  background: transparent;
}

/* ---------- HOME (GREEN) ---------- */
#total-home-score {
  border: none;
  color: #19ff19;
  text-shadow:
    0 0 4px rgba(25, 255, 25, 0.7),
    0 0 10px rgba(25, 255, 25, 0.55),
    0 0 18px rgba(25, 255, 25, 0.35);
}

/* ---------- AWAY (RED) ---------- */
#total-away-score {
  border: none;
  color: #ff2a2a;
  text-shadow:
    0 0 4px rgba(255, 42, 42, 0.7),
    0 0 10px rgba(255, 42, 42, 0.55),
    0 0 18px rgba(255, 42, 42, 0.35);
}


#total-home-score:empty::before {
  content: "0";
}
#total-away-score:empty::before {
  content: "0";
}

/* ===============================
   BASE (LIGHT MODE DEFAULT)
   =============================== */
.themeToggle{
  cursor:pointer;
  font-weight:800;
}


/* example */
table {
  background-color: #ffffff;
}

/* ===============================
   DARK MODE (MANUAL ONLY)
   =============================== */

html[data-theme="dark"] {
  background-color: #0f1115;
  color: #e6e6e6;
}

html[data-theme="dark"] body {
  background-color: #0f1115;
  color: #e6e6e6;
}

/* tables */
html[data-theme="dark"] table {
  background-color: #151922;
  color: #e6e6e6;
}

/* borders */
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: #565d6b;
}

/* buttons (example neutral conversion) */
html[data-theme="dark"] .bout-button,
html[data-theme="dark"] .expand-toggle,
html[data-theme="dark"] .commit-cell {
  background: linear-gradient(
    to bottom,
    #2b2f3a 0%,
    #1f2330 55%,
    #171b26 100%
  );

  color: #eaeaea;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -2px 0 rgba(0,0,0,0.6),
    0 4px 0 #0b0e14,
    0 8px 14px rgba(0,0,0,0.6);
}


:root{
  /* Layout surfaces */
  --bg: #ffffff;
  --surface: #ffffff;          /* primary surfaces (tables, cards) */
  --surface-2: #f3f5fb;        /* elevated / muted surface */
  --surface-3: #eef2ff;        /* subtle highlight surface */
  --sticky-bg: #ffffff;

  /* Text */
  --text: #0f172a;
  --text-muted: #475569;
  --text-invert: #ffffff;
  --text-sw: red;

  /* Borders / lines */
  --line: #d1d5e6;             /* general lines */
  --grid: #124de9;             /* your grid blue */
  --focus: #7aa7ff;

  /* Brand / primary blues (header / commit) */
  --blue-1: #c9d4ff;
  --blue-2: #aab9ff;
  --blue-3: #9cb1f9;           /* main */
  --blue-4: #8fa4f4;
  --blue-edge: #5e73c9;
  --blue-border: #0056b3;
  --nav: #0c3960;
  --nav-hover: #5698ed;
  --dropdown: #003e7e;

  /* Semantic */
  --green: #22c55e;
  --red: #ef4444;
  --yellow: #f59e0b;
  --yellow-soft: #fde68a;
  --yellow-deep: #d97706;


  /* Home / Away cell fills (light) */
  --home-fill: #d4edda;
  --away-fill: #f8d7da;

  /* 3D shadow system (light) */
  --shadow-soft: 0 6px 10px rgba(0,0,0,0.25);
  --shadow-soft-2: 0 9px 14px rgba(0,0,0,0.30);
  --shadow-hard: 0 3px 0 rgba(0,0,0,0.25);
  --shadow-hard-2: 0 4px 0 rgba(0,0,0,0.25);

  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.85);
  --inset-lo: inset 0 -2px 0 rgba(0,0,0,0.18);

  /* Modal */
  --modal-shadow: 0 8px 16px rgba(0,0,0,0.50);
}

/* Dark mode: tuned to preserve your hierarchy + contrast */
html[data-theme="dark"]{
  --bg: #0b1020;
  --surface: #121a33;
  --surface-2: #0f1830;
  --surface-3: #18234a;
  --sticky-bg: #10172f;

  --text: #eaf0ff;
  --text-muted: #b3c0ff;
  --text-invert: #0b1020;
  --text-sw: #ffffff;

  --line: #2a3566;
  --grid: #3f63ff;
  --focus: #79a6ff;

  --blue-1: #2a3a86;
  --blue-2: #2f44a6;
  --blue-3: #3b57d6;
  --blue-4: #2f4ad0;
  --blue-edge: #1f2d7d;
  --blue-border: #1c3aa6;

  --nav: #0b1f3a;
  --nav-hover: #2b63d9;
  --dropdown: #0f2a52;

  --green:#22c55e;
  --red:#ef4444;
  --yellow:#facc15;

  /* Dark home/away fills: readable, not neon */
  --home-fill: #22c55e;
  --away-fill: #ef4444;

  --shadow-soft: 0 10px 20px rgba(0,0,0,0.60);
  --shadow-soft-2: 0 14px 28px rgba(0,0,0,0.65);
  --shadow-hard: 0 3px 0 rgba(0,0,0,0.65);
  --shadow-hard-2: 0 4px 0 rgba(0,0,0,0.70);

  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.10);
  --inset-lo: inset 0 -2px 0 rgba(0,0,0,0.35);

  --modal-shadow: 0 12px 26px rgba(0,0,0,0.70);
}

/* =========================================
   FIRST SCORE HIGHLIGHT — DARK MODE ONLY
========================================= */

html[data-theme="dark"] .first-score {
    color: #3b82f6;        /* clean readable blue */
    font-weight: 600;
}

/* ============================================================
   GLOBAL RESET / BASE
============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  width:100%;
  min-height:100vh;
  overflow-x:hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
}

/* You forced overflow visible to allow sticky – keep it */
html, body, .container{
  overflow: visible !important;
}

/* Tables */
table{
  background-color: var(--surface);
  color: var(--text);
}

/* Hide metadata-only elements */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============================================================
   NAVIGATION + DROPDOWN
============================================================ */
nav{
  position: fixed;
  top:0;
  width:100%;
  z-index:4;
  background-color: var(--nav);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

nav ul{
  display:flex;
  justify-content: space-around;
  list-style:none;
  margin:0;
  padding:0;
}

nav ul li{ position:relative; }

nav ul li a{
  display:block;
  padding:10px;
  color: white;
  text-decoration:none;
  border-radius:10px;
}

nav ul li a:hover{
  background-color: var(--nav-hover);
}

/* Dropdown container in nav */
nav ul li .dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background-color: var(--dropdown);
  z-index:9999;
  width:auto;
  box-shadow: var(--modal-shadow);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text)
}

nav ul li:hover .dropdown{ display:block; }

nav ul li .dropdown ul{
  display:block;
  width:100%;
}

nav ul li .dropdown li{ display:block; }

nav ul li .dropdown li a{
  display:block;
  white-space:nowrap;
  padding:10px;
  color: var(--text-invert);
  text-align:left;
}
#swap {
	color:var(--green);
}

#colors {
	color:var(--red);
}
/* Buttons in special nav areas */
#print button,
#sch button{
  font-family: Arial, sans-serif;
  background-color: var(--nav);
  border:none;
  cursor:pointer;
  border-radius:5px;
  position:relative;
  top:9px;
  font-size:16px;
  color: white;
}

#print button:hover,
#sch button:hover{
  background-color: var(--nav-hover);
}

/* Dropdown buttons */
.dropdown button{
  font-family: Arial, sans-serif;
  background-color: var(--nav);
  color: var(--text-invert);
  border:none;
  cursor:pointer;
  border-radius:3px;
  width:100%;
  text-align:left;
  color: var(--text)
}

.dropdown button:hover{
  background-color: var(--nav-hover);
}

/* ============================================================
   CONTAINER + MATCH INFO
============================================================ */
.container{
  width:100%;
  max-width:100%;
  padding:20px;
}

.match-info{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:15px;
  padding:15px;
  border-radius:8px;
  width:100%;
  background: var(--surface);
  border: 1px solid rgba(18,77,233,0.15);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

html[data-theme="dark"] .match-info{
  border: 1px solid rgba(63,99,255,0.25);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35);
}

.match-info label{ font-weight:bold; color: var(--text); }

.match-info input{
  width:100%;
  padding:10px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius:6px;
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .match-info input{
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface-2);
}

/* ============================================================
   MATCH TABLE / GRID
============================================================ */
.match-table{
  width:100%;
  border-collapse: collapse;
  margin-top:20px;
}

.match-table th,
.match-table td{
  padding:12px;
  text-align:center;
}

th, td{
  text-align:center;
  border: .5px solid var(--grid);
}

th{
  background-color: var(--blue-3);
  color: var(--text-invert);
}

.match-table th{ color: var(--text-invert); }

td.details{ min-width:150px; }

table.match-book-table{ width:100%; }
table.details-table{ width:100%; }

.details:focus{ border-color:#aaa; }
.hidden{ display:none; }
.detailst{ overflow:hidden; }

.details-toggle-button{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

/* ============================================================
   CHECKBOXES
============================================================ */
input[type="checkbox"]{
  transform: scale(1.5);
  margin:5px;
}

/* ============================================================
   STICKY ROWS / TOOLBARS
============================================================ */
.draggable{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  border-spacing: .4vw;
  position: sticky;
  top: 37px;
  z-index:2;
  background-color: var(--sticky-bg);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#matchDetails{
  position: sticky;
  top: 5px;
  z-index:1;
  background-color: var(--sticky-bg);
}

.sticky{
  position: sticky;
  top: 143px;
  z-index:2;
  background-color: var(--sticky-bg);
}

/* ============================================================
   HOME / AWAY CELL COLORING
============================================================ */
[id^=home-cell-], [id^=home-otc-],
.home-cell, .home-cell-1{
  background-color: var(--home-fill);
  color: var(--text);
}

[id^=away-cell-],
.away-cell, .away-cell-1{
  background-color: var(--away-fill);
  color: var(--text);
}

.total-away-score{
  background-color: var(--away-fill);
  color: var(--text);
}

/* Ensure legibility inside tinted cells in dark mode */
html[data-theme="dark"] [id^=home-cell-],
html[data-theme="dark"] [id^=away-cell-],
html[data-theme="dark"] .home-cell,
html[data-theme="dark"] .away-cell{
  color: var(--text);
}

/* ============================================================
   RUNOUT CELL — 3D FULL-CELL BUTTON
============================================================ */
.intro-cell{
  padding:0;
  vertical-align: middle;
  height:10px;
}

.runout-cell{
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:
    background .25s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

/* Not loaded (red) */
.runout-not-loaded{
  background: linear-gradient(to bottom,
    /* light: #ffb3b3 -> #ff4d4d */
    color-mix(in srgb, var(--red) 20%, #ffffff 80%),
    color-mix(in srgb, var(--red) 70%, #000000 0%)
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -2px 0 rgba(160,0,0,0.50),
    0 3px 0 color-mix(in srgb, var(--red) 55%, #000 45%),
    var(--shadow-soft);
}

/* Loaded (green) */
.runout-loaded{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--green) 18%, #ffffff 82%),
    color-mix(in srgb, var(--green) 35%, #ffffff 65%)
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -2px 0 rgba(0,120,0,0.45),
    0 3px 0 color-mix(in srgb, var(--green) 55%, #000 45%),
    var(--shadow-soft);
}

.runout-cell:hover{ transform: translateY(-1px); }

.runout-cell:active{
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 1px 0 rgba(0,0,0,0.40);
}

.intro-controls{
  width:100%;
  height:100%;
  display: contents;
}

.intro-btn{
  width:100%;
  height:100%;
  background: transparent;
  border:none;
  cursor:pointer;
  font-size:20px;
  font-weight:800;
  color: color-mix(in srgb, var(--green) 30%, #134713 70%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.50);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, opacity .12s ease;
}

html[data-theme="dark"] .intro-btn{
  color: color-mix(in srgb, var(--green) 70%, #c8ffd8 30%);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.runout-cell:hover .intro-btn{ opacity:0.90; }
.runout-cell:active .intro-btn{ opacity:0.75; }

/* ============================================================
   COMMIT CELL — 3D PRESSABLE BUTTON
============================================================ */
.commit-cell{
  position: relative;
  padding:0;
  height:100%;
  cursor:pointer;

  background: linear-gradient(to bottom,
    var(--blue-1) 0%,
    var(--blue-3) 55%,
    var(--blue-4) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -2px 0 rgba(60,80,160,0.45),
    0 3px 0 var(--blue-edge),
    var(--shadow-soft);

  transition: transform .12s ease, box-shadow .12s ease, background .25s ease;
}

.commit-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:0.9rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--text) 20%, #1b2a66 80%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.40);
  pointer-events:none;
  z-index:1;
}

html[data-theme="dark"] .commit-label{
  color: #dfe6ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

.commit-btn{
  position:absolute;
  inset:0;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:2;
}

.commit-cell:hover{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--blue-1) 35%, #ffffff 65%) 0%,
    color-mix(in srgb, var(--blue-3) 60%, #ffffff 40%) 55%,
    var(--blue-4) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -2px 0 rgba(60,80,160,0.50),
    0 4px 0 var(--blue-edge),
    var(--shadow-soft-2);

  transform: translateY(-1px);
}

.commit-cell:active{
  background: linear-gradient(to bottom,
    var(--blue-4) 0%,
    color-mix(in srgb, var(--blue-4) 85%, #000000 15%) 100%
  );

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(60,80,160,0.60),
    0 1px 0 var(--blue-edge),
    0 2px 4px rgba(0,0,0,0.20);

  transform: translateY(2px);
}

.commit-cell.flash{ animation: commitFlash 0.7s ease-out; }

@keyframes commitFlash{
  0%{
    background-color: var(--blue-3);
    box-shadow: inset 0 0 0 2px rgba(60,80,160,0.50), var(--shadow-soft);
  }
  40%{
    background-color: color-mix(in srgb, var(--blue-1) 60%, #ffffff 40%);
    box-shadow: inset 0 0 0 4px rgba(90,110,200,0.80), var(--shadow-soft-2);
  }
  100%{
    background-color: var(--blue-3);
    box-shadow: inset 0 0 0 1px rgba(60,80,160,0.35), var(--shadow-soft);
  }
}

/* ============================================================
   TH FULL-CELL 3D BUTTON
============================================================ */
th{ padding:0; position:relative; }

.th-btn{
  width:100%;
  height:100%;
  min-height:36px;
  background: var(--blue-3);
  color: var(--text-invert);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.5px;
  border: 1px solid var(--blue-border);
  border-radius:0;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 2px 0 color-mix(in srgb, var(--blue-border) 50%, #003f7f 50%);

  transition: background .15s ease, transform .10s ease, box-shadow .10s ease;
}

.th-btn:hover{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--nav-hover) 60%, #3fa2ff 40%),
    #148bff
  );
}

html[data-theme="dark"] .th-btn:hover{
  background: linear-gradient(to bottom, #3a6cff, #2b5bff);
}

.th-btn:active{
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.30), 0 0 0 transparent;
}

.th-btn:focus{ outline:none; }


/* ============================================================
   SW FULL-CELL 3D BUTTON
============================================================ */
.sw{ padding:0; position:relative; }

.sw-btn{
  width:100%;
  height:100%;
  min-height:36px;
  background: var(--blue-3);
  color: var(--text-sw);
  font-weight:700;
  font-size:0.6rem;
  letter-spacing:0.5px;
  border: 1px solid var(--blue-border);
  border-radius:0;
  cursor:pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 2px 0 color-mix(in srgb, var(--blue-border) 50%, #003f7f 50%);

  transition: background .15s ease, transform .10s ease, box-shadow .10s ease;
}

.sw-btn:hover{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--nav-hover) 60%, #3fa2ff 40%),
    #148bff
  );
}

html[data-theme="dark"] .sw-btn:hover{
  background: linear-gradient(to bottom, #3a6cff, #2b5bff);
}

.sw-btn:active{
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.30), 0 0 0 transparent;
}

.sw-btn:focus{ outline:none; }

/* ============================================================
   CHOICE POPUP
============================================================ */
#choicePopup{
  display:none;
  position:fixed;
  left:50%;
  transform: translate(-50%, -50%);
  background-color: var(--surface);
  padding:10px;
  box-shadow: var(--modal-shadow);
  z-index:1000;
  border-radius:8px;
  border: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="dark"] #choicePopup{
  border: 1px solid rgba(255,255,255,0.10);
}

#choicePopup .tBtn .btn{
  border:none;
  color: var(--text);
  padding:10px 20px;
  margin:2px;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  position:relative;
  transition: all .10s ease;
  box-shadow: 0 4px #999;
  border-radius:6px;
  background: var(--surface-2);
}

html[data-theme="dark"] #choicePopup .tBtn .btn{
  box-shadow: 0 4px rgba(0,0,0,0.55);
}

#choicePopup .tBtn .btn:hover{
  box-shadow: 0 6px #666;
  transform: translateY(-2px);
}

#choicePopup .tBtn .btn:active{
  box-shadow: 0 2px #666;
  transform: translateY(4px);
}

/* keep your per-button coloring intent */
#choicePopup .tBtn .btn[id^="btn13"],
#choicePopup .tBtn .btn[id^="btn14"],
#choicePopup .tBtn .btn[id^="btn15"],
#choicePopup .tBtn .btn[id^="btn16"]{
  background-color: color-mix(in srgb, var(--home-fill) 85%, #ffffff 15%);
}

#choicePopup .tBtn .btn[id^="btn29"],
#choicePopup .tBtn .btn[id^="btn30"],
#choicePopup .tBtn .btn[id^="btn31"],
#choicePopup .tBtn .btn[id^="btn32"]{
  background-color: color-mix(in srgb, var(--away-fill) 85%, #ffffff 15%);
}

/* ============================================================
   BASE 3D BUTTON ENGINE (ROW + SAVE + UNDO)
============================================================ */
.button-row .btn,
#saveMatchBook,
#undoButton{
  position:relative;
  border:none;
  border-radius:6px;
  padding:7px 24px;
  cursor:pointer;
  color: var(--text);
  font-weight:600;
  letter-spacing:0.03em;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    inset 0 -2px 0 rgba(0,0,0,0.15),
    0 3px 0 rgba(0,0,0,0.25),
    var(--shadow-soft);

  transition: transform .12s ease, box-shadow .12s ease, background .20s ease;
}

html[data-theme="dark"] .button-row .btn,
html[data-theme="dark"] #saveMatchBook,
html[data-theme="dark"] #undoButton{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 3px 0 rgba(0,0,0,0.70),
    var(--shadow-soft);
}

.button-row .btn:hover,
#saveMatchBook:hover,
#undoButton:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -2px 0 rgba(0,0,0,0.20),
    0 4px 0 rgba(0,0,0,0.25),
    var(--shadow-soft-2);
}

.button-row .btn:active,
#saveMatchBook:active,
#undoButton:active{
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 0 rgba(0,0,0,0.25),
    0 2px 4px rgba(0,0,0,0.25);
}

/* Row-scoped gradients */
#top-row .btn{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--home-fill) 55%, #ffffff 45%) 0%,
    var(--home-fill) 55%,
    color-mix(in srgb, var(--home-fill) 75%, #000 0%) 100%
  );
}

#bottom-row .btn{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--away-fill) 55%, #ffffff 45%) 0%,
    var(--away-fill) 55%,
    color-mix(in srgb, var(--away-fill) 75%, #000 0%) 100%
  );
}

/* Save / Undo */
#saveMatchBook,
#undoButton{
  background: linear-gradient(to bottom,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 70%, #f5f5f5 30%) 55%,
    color-mix(in srgb, var(--surface) 70%, #e6e6e6 30%) 100%
  );
}

td.tBtn{ border:none; }
/* ============================================================
   SAVE BUTTON — STATE INDICATOR (PERSISTENT)
============================================================ */

#saveMatchBook {
  outline: none;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

/* DIRTY = RED */
#saveMatchBook.save-dirty {
  box-shadow:
    0 0 0 1px rgba(231, 76, 60, 0.9),
    0 0 3px rgba(231, 76, 60, 0.6),
    var(--shadow-soft) !important;
}

/* CLEAN = GREEN */
#saveMatchBook.save-clean {
  box-shadow:
    0 0 0 1px rgba(46, 204, 113, 0.9),
    0 0 3px rgba(46, 204, 113, 0.6),
    var(--shadow-soft) !important;
}



/* ============================================================
   EXPAND TOGGLE — MODERN 3D FULL-CELL BUTTON
============================================================ */
.expand-toggle{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(to bottom,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 75%, #f3f3f3 25%) 55%,
    color-mix(in srgb, var(--surface) 75%, #e2e2e2 25%) 100%
  );

  border:none;
  border-radius:6px;
  cursor:pointer;

  font-size:30px;
  font-weight:700;

  color: color-mix(in srgb, var(--text) 70%, #333 30%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.60);

  padding:0;
  box-sizing:border-box;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -2px 0 rgba(0,0,0,0.15),
    0 3px 0 #9a9a9a,
    var(--shadow-soft);

  transition: transform .12s ease, box-shadow .12s ease, background .20s ease;
}

td.expand-toggle{ border:none; }

.expand-toggle:hover{
  background: linear-gradient(to bottom,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 70%, #f7f7f7 30%) 55%,
    color-mix(in srgb, var(--surface) 70%, #e9e9e9 30%) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 4px 0 #9a9a9a,
    var(--shadow-soft-2);

  transform: translateY(-1px);
}

.expand-toggle:active{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--surface) 70%, #e6e6e6 30%) 0%,
    color-mix(in srgb, var(--surface) 70%, #dcdcdc 30%) 100%
  );

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 0 #9a9a9a,
    0 2px 4px rgba(0,0,0,0.25);

  transform: translateY(2px);
}

#matchDetailsContainer{ position:relative; top:35px; }

.details-table{
  border-collapse: separate;
  border-spacing:10px;
}

/* ============================================================
   BOUT BUTTON — MODERN 3D
============================================================ */
.bout-button{
  width:90%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  font-weight:700;

  color: color-mix(in srgb, var(--text) 75%, #333 25%);
  text-shadow: 0 1px 0 rgba(255,255,255,0.60);

  border:none;
  border-radius:6px;

  background: linear-gradient(to bottom,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 70%, #f3f3f3 30%) 55%,
    color-mix(in srgb, var(--surface) 70%, #e2e2e2 30%) 100%
  );

  padding:0;
  box-sizing:border-box;

  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.90),
    inset 0 -2px 0 rgba(0,0,0,0.15),
    0 6px 0 #9a9a9a,
    0 6px 5px rgba(0,0,0,0.25);

  transition: transform .12s ease, box-shadow .12s ease, background .20s ease;
}

.bout-button:hover{
  background: linear-gradient(to bottom,
    var(--surface) 0%,
    color-mix(in srgb, var(--surface) 70%, #f7f7f7 30%) 55%,
    color-mix(in srgb, var(--surface) 70%, #e9e9e9 30%) 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 4px 0 #9a9a9a,
    var(--shadow-soft-2);

  transform: translateY(-1px);
}

.bout-button:active{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--surface) 70%, #e6e6e6 30%) 0%,
    color-mix(in srgb, var(--surface) 70%, #dcdcdc 30%) 100%
  );

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(0,0,0,0.25),
    0 1px 0 #9a9a9a,
    0 2px 4px rgba(0,0,0,0.25);

  transform: translateY(2px);
}

/* Notes highlight indicator (yellow) */
.bout-button.highlighted{
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--yellow) 20%, #fff 80%) 0%,
    var(--yellow-soft) 55%,
    color-mix(in srgb, var(--yellow) 80%, #000 0%) 100%
  ) !important;

  color: color-mix(in srgb, var(--text) 20%, #5a3b00 80%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -2px 0 rgba(0,0,0,0.25),
    0 4px 0 var(--yellow-deep),
    var(--shadow-soft-2) !important;

  text-shadow: 0 1px 0 rgba(255,255,255,0.60);
}

/* legacy helper class used elsewhere */
.highlighted{
  background-color: #ffcc00 !important;
  color: black !important;
}

/* First score indicator */
.first-score{ color: var(--red); }

/* ============================================================
   NOTES MODAL
============================================================ */
.notes-section{
  position:fixed;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  color: var(--text);
  padding:20px;
  border-radius:8px;
  box-shadow: var(--modal-shadow);
  z-index:1000;
  width:320px;
  display:block;
  border: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="dark"] .notes-section{
  border: 1px solid rgba(255,255,255,0.10);
}

.notes-table{
  width:100%;
  border-collapse: collapse;
}

.notes-cell{
  padding:10px;
  text-align:center;
}

.notes-area{
  width:100%;
  height:100px;
  padding:5px;
  font-size:14px;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius:5px;
  background: var(--surface-2);
  color: var(--text);
}

html[data-theme="dark"] .notes-area{
  border: 1px solid rgba(255,255,255,0.12);
}

.close-notes-btn{
  margin-top:10px;
  padding:8px 12px;
  background-color: var(--red);
  color: var(--text-invert);
  border:none;
  cursor:pointer;
  border-radius:6px;
}

/* ============================================================
   SIGNATURE PAD
============================================================ */
.signature-container{
  display:none;
  position:absolute;
  top:100px;
  left:50%;
  transform: translateX(-50%);
  z-index:10;
  border: 2px solid rgba(0,0,0,0.20);
  background-color: var(--surface);
  padding:10px;
  box-shadow: var(--modal-shadow);
  border-radius:8px;
}

html[data-theme="dark"] .signature-container{
  border: 2px solid rgba(255,255,255,0.12);
}

.signature-canvas{
  width:100%;
  height:100%;
  border: 1px solid rgba(0,0,0,0.20);
  background: var(--surface);
}

html[data-theme="dark"] .signature-canvas{
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface-2);
}

.signature-buttons{ margin-top:10px; }

.referee-box{
  position:relative;
  width:100%;
  height:100px;
  border: 1px solid rgba(0,0,0,0.20);
  background: var(--surface);
}

html[data-theme="dark"] .referee-box{
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--surface-2);
}

.signature-image{
  position:absolute;
  top:0;
  left:0;
  z-index:5;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-size: contain;
  background-position:center;
}
/* ============================================================
   Fall Tech Cal
============================================================ */
/* ============================================================
   Fall / Tech Calculator (Notes-Style)
============================================================ */

.ftc-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  color: var(--text);
  padding: 16px;
  border-radius: 8px;
  box-shadow: var(--modal-shadow);
  z-index: 1000;
  width: 280px;
  display: none;
  border: 1px solid rgba(0,0,0,0.08);
}

html[data-theme="dark"] .ftc-modal{
  border: 1px solid rgba(255,255,255,0.10);
}

.ftc-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 600;
}

.ftc-close{
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
}

.ftc-periods{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
}

.ftc-periods label{
  display: flex;
  align-items: center;
  gap: 4px;
}

.ftc-row{
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

#ftcPeriod,
#ftcRemaining,
#ftcDirect{
  height: 28px;
  padding: 4px 6px;
  font-size: 13px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.20);
  background: var(--surface-2);
  color: var(--text);
}

html[data-theme="dark"] #ftcPeriod,
html[data-theme="dark"] #ftcDirect,
html[data-theme="dark"] #ftcRemaining{
  border: 1px solid rgba(255,255,255,0.12);
}

#ftcRemaining,
#ftcDirect{
  width: 105px;
  text-align: center;
}

.ftc-result{
  margin-left: auto;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

.ftc-actions{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.ftc-confirm{
  background: var(--blue-3);
  color: var(--text-invert);
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}

.ftc-cancel{
  background: var(--red);
  color: var(--text-invert);
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}






/* ============================================================
   BOUT ACTIVE “POP-OUT” STATE
============================================================ */
.weight-class{
  transition:
    height 300ms ease,
    transform 300ms ease,
    box-shadow 300ms ease,
    background-color 300ms ease;
  transform: translateZ(0);
  position:relative;
  z-index:1;
}

.weight-class.bout-active{
  transform: translateY(-2px) scale(1.00);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.30),
    inset 0 1px rgba(255,255,255,0.40);
  background-color: var(--surface-3);
  z-index:1;
}

@keyframes popPulse{
  0%   { box-shadow: 0 0 0 rgba(0,0,0,0); }
  60%  { box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
  100% { box-shadow: 0 4px 10px rgba(0,0,0,0.18); }
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 810px){
  html{
    width:1280px;
    overflow-x: scroll;
    transform-origin: top left;
  }
  .sticky{ top:135px; }
}

/* =========================================================
   EXPORT / PRINT SAFE MODE (html2canvas compatible)
========================================================= */

.export-mode * {
  /* Disable unsupported modern color functions */
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Replace color-mix gradients with flat colors */
.export-mode .home-cell {
  background-color: #d4edda !important;
}

.export-mode .away-cell {
  background-color: #f8d7da !important;
}

/* Buttons flatten */
.export-mode button,
.export-mode .btn,
.export-mode .commit-cell,
.export-mode .runout-cell {
  background: #f0f0f0 !important;
  color: #000 !important;
}

/* Scoreboard text stays readable */
.export-mode #total-home-score {
  color: #008000 !important;
}

.export-mode #total-away-score {
  color: #a00000 !important;
}

.export-mode .remove {
  display: none !important;
}

.export-mode .selected {
  display: none !important;
}

.export-mode .intro-cell {
  display: none !important;
}
.export-mode .sticky {
  position: auto !important;
  top: 30px !important;
}

/* Remove animations (html2canvas hates these too) */
.export-mode * {
  animation: none !important;
  transition: none !important;
}

/* =========================================================
   EXPORT / PRINT — BLACK & WHITE SAFE MODE
   ========================================================= */

.export-mode,
.export-mode * {
  color: #000 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  text-shadow: none !important;

  animation: none !important;
  transition: none !important;
}
/* =========================================================
   EXPORT MODE — FORCE HOME / AWAY CELLS TO WHITE
========================================================= */

.export-mode [id^="home-cell-"],
.export-mode [id^="home-otc-"],
.export-mode .home-cell,
.export-mode .home-cell-1,
.export-mode [id^="away-cell-"],
.export-mode .away-cell,
.export-mode .away-cell-1 {
  background-color: #fff !important;
  color: #000 !important;
}


/* Force ALL borders to solid black */
.export-mode table,
.export-mode th,
.export-mode td,
.export-mode tr,
.export-mode div,
.export-mode span,
.export-mode button,
.export-mode input {
  border-color: #000 !important;
}

/* Ensure borders are visible even if thin */
.export-mode table {
  border-collapse: collapse !important;
}

/* Buttons look like plain boxes */
.export-mode button {
  background: transparent !important;
  border: 1px solid #000 !important;
}

/* Dot-matrix scores remain readable */
.export-mode #total-home-score,
.export-mode #total-away-score {
  font-family: monospace !important;
  font-weight: bold;
}

/* Undo / Redo focus pulse */
.undo-focus {
    animation: undoPulse 1.2s ease-out;
}

@keyframes undoPulse {
    0% {
        box-shadow: inset 0 0 0 2px rgba(59,130,246,0.9);
        background-color: rgba(59,130,246,0.15);
    }
    100% {
        box-shadow: none;
        background-color: transparent;
    }
}

/* ============================================================
   COLOR SWAP MODE (UI ONLY — NO DATA SWAP)
   Triggered by: document.documentElement.classList.toggle("swap-colors")
============================================================ */

/* LIGHT MODE swap */
html.swap-colors{
  --home-fill: #f8d7da; /* was away-fill */
  --away-fill: #d4edda; /* was home-fill */

  --green: #ef4444; /* swap semantic colors */
  --red: #22c55e;
}

/* DARK MODE swap */
html[data-theme="dark"].swap-colors{
  --home-fill: #ef4444;
  --away-fill: #22c55e;

  --green: #ef4444;
  --red: #22c55e;
}

/* Scoreboard totals swap */
html.swap-colors #total-home-score{
  color: #ff2a2a;
  text-shadow:
    0 0 4px rgba(255, 42, 42, 0.7),
    0 0 10px rgba(255, 42, 42, 0.55),
    0 0 18px rgba(255, 42, 42, 0.35);
}

html.swap-colors #total-away-score{
  color: #19ff19;
  text-shadow:
    0 0 4px rgba(25, 255, 25, 0.7),
    0 0 10px rgba(25, 255, 25, 0.55),
    0 0 18px rgba(25, 255, 25, 0.35);
}

#swap { color: var(--green); }
#colors { color: var(--red); }


/* ============================================================
   SAVE BUTTON — ACTIVE REQUEST STATE
============================================================ */
#saveMatchBook.save-saving {
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.95),
    0 0 7px rgba(245, 158, 11, 0.75),
    var(--shadow-soft) !important;
  animation: ombSavePulse 1s ease-in-out infinite;
}

@keyframes ombSavePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  #saveMatchBook.save-saving { animation: none; }
}