/* =========================================================
   ROOT / THEME
   ========================================================= */

:root{
  --bg:#0b0f14;
  --panel:#101722;
  --panel2:#0f1520;
  --text:#e6edf3;
  --muted:#9fb0c0;
  --border:#223044;
  --accent:#3b82f6;
  --accent2: rgba(59,130,246,0.18);

  --sidebar-w: 260px;
  --sidebar-w-collapsed: 76px;
}

/* =========================================================
   GLOBAL / BASE
   ========================================================= */

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

h1{
  margin:0 0 14px;
  font-size:28px;
}

.muted-text{
  color:var(--muted);
}

/* =========================================================
   SIDEBAR / APP SHELL
   ========================================================= */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sidebar-w);
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index:30;
  transition: width 170ms ease, padding 170ms ease;
  overflow-x:hidden;
}

.app{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition: margin-left 170ms ease;
}

.brand{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
}

.brand-mark{
  font-size:22px;
  width:30px;
  text-align:center;
}

.brand-title{
  font-weight:900;
  letter-spacing:.3px;
  line-height:1.1;
}

.brand-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.nav{
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:auto;
  padding-right:4px;
}

.nav-section-title{
  font-size:10px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:10px 10px 6px;
  font-weight:700;
  opacity:0.85;
}

.navlink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
  transition:background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.navlink:hover{
  background:rgba(255,255,255,0.06);
  transform:translateY(-1px);
}

.navlink.is-active{
  background:var(--accent2);
  border-color:rgba(59,130,246,0.35);
}

.navicon{
  width:24px;
  text-align:center;
}

.navlabel{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.spacer{
  flex:1;
}

.user{
  color:var(--muted);
  font-size:14px;
}

.main{
  padding:18px;
  max-width:1800px;
  width:100%;
}

/* =========================================================
   GENERIC UI ELEMENTS
   ========================================================= */

.card{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin-bottom:14px;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.input{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  min-width:110px;
  width: 100%;
  box-sizing: border-box;
}

.input.full{
  width:100%;
  min-width:0;
}

.label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:700;
}

.select{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:8px 10px;
}

select.input{
  color:var(--text);
  background:rgba(255,255,255,0.05);
}

select.input option{
  color:#111;
  background:#fff;
}

select option {
    color: #111;
    background: #fff;
}

.pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:16px;
}

.iconbtn{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}

.btn{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

.btn:hover{
  background:rgba(255,255,255,0.08);
}

.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#081018;
  font-weight:800;
}

.btn.sm{
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}

.btn.danger{
  background:rgba(239,68,68,0.14);
  border-color:rgba(239,68,68,0.35);
  color:#f87171;
}

.status{
  padding:10px 14px;
  border-radius:12px;
  margin-bottom:12px;
  font-weight:700;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
}

.status.success{
  background:rgba(34,197,94,0.15);
  border-color:rgba(34,197,94,0.35);
  color:#4ade80;
}

.status.warn{
  background:rgba(245,158,11,0.14);
  border-color:rgba(245,158,11,0.35);
  color:#fbbf24;
}

.status.muted{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border);
  color:var(--muted);
}

/* =========================================================
   TABLES / KEY-VALUE
   ========================================================= */

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

.table th,
.table td{
  border-bottom:1px solid var(--border);
  padding:10px;
  text-align:left;
  vertical-align:middle;
}

.table th{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.kv{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}

.kv:last-child{
  border-bottom:none;
}

.k{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.v{
  color:var(--text);
}

/* =========================================================
   SIMPLE GRID HELPERS
   ========================================================= */

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

@media (max-width: 860px){
  .grid2{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FORM LAYOUT
   ========================================================= */

.card.form-card{
  padding:22px;
}

.form-section{
  margin-bottom:26px;
}

.form-section h2{
  margin:0 0 14px 0;
}

.form-row{
  display:grid !important;
  grid-template-columns:200px minmax(0, 1fr) !important;
  column-gap:18px;
  row-gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}

.form-row:last-child{
  border-bottom:0;
}

.form-label{
  text-align:right;
  font-weight:650;
  opacity:0.9;
  padding-right:6px;
  white-space:nowrap;
}

.form-field{
  width:100%;
}

.form-field .input{
  width:100%;
}

.form-help{
  margin-top:10px;
  font-size:13px;
  opacity:0.7;
}

.form-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.division-card{
  padding:16px;
  margin-top:12px;
}

@media (max-width: 768px){
  .form-row{
    grid-template-columns:1fr !important;
    padding:10px 0;
  }

  .form-label{
    text-align:left;
    padding-right:0;
  }
}

/* =========================================================
   MODALS
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.modal.hidden{
  display:none;
}

.modal-card{
  background:#1e1e1e;
  padding:24px;
  border-radius:8px;
  width:420px;
  max-width:90%;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.modal-title{
  font-weight:700;
  margin-bottom:10px;
  font-size:18px;
}

.modal-message{
  margin-bottom:20px;
  color:#ccc;
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.ocb-modal{
  position:fixed;
  inset:0;
  background:rgba(0, 0, 0, 0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.ocb-modal.hidden{
  display:none;
}

.ocb-modal-card{
  background:#1e1e1e;
  border:1px solid #2c2c2c;
  border-radius:14px;
  padding:22px;
  width:440px;
  max-width:calc(100vw - 28px);
  box-shadow:0 20px 50px rgba(0,0,0,0.6);
}

.ocb-modal-title{
  font-weight:800;
  font-size:17px;
  margin-bottom:8px;
  color:#fff;
}

.ocb-modal-message{
  margin-bottom:18px;
  color:#d0d0d0;
  line-height:1.4;
}

.ocb-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}


/* -------------------------------------------------------
   REGISTRATION HEADER STATUS PILLS
   Used on /registration/index.php
------------------------------------------------------- */

.registration-status-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:6px 0;
}

.registration-status-row .pill{
  padding:8px 18px;
  font-size:15px;
  font-weight:800;
}

/* -------------------------------------------------------
   REGISTRATION ACTION BUTTONS
------------------------------------------------------- */

.reg-checkin-btn{
  white-space: nowrap;
}

/* -------------------------------------------------------
   REGISTRATION TABLE STATUS PILLS
   Used on /registration/index.php row status columns
------------------------------------------------------- */

.reg-status-pill{
  min-width: 42px;
  text-align: center;
  font-weight: 800;
  padding: 6px 10px;
}

/* passed */
.pill.reg-status-pill.status-pass{
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.35);
  color: #86efac;
}

/* not complete yet */
.pill.reg-status-pill.status-pending{
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.ready-row td {
    background: rgba(80, 200, 120, 0.12);
  }

  .ready-row:hover td {
    background: rgba(80, 200, 120, 0.18);
  }

/* =========================================================
   BOT PHOTO PAGE
   ========================================================= */

.bot-photo-search{
  position:relative;
  max-width:640px;
}

.bot-photo-results{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  max-height:280px;
  overflow:auto;
  z-index:40;
  display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.bot-photo-result{
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
}

.bot-photo-result:last-child{
  border-bottom:none;
}

.bot-photo-result:hover{
  background:rgba(255,255,255,0.04);
}

.bot-photo-result-bot{
  font-weight:700;
}

.bot-photo-result-team{
  color:var(--muted);
  font-size:13px;
}

.bot-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
}

.bot-photo-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:var(--panel);
}

.bot-photo-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.bot-photo-status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 9px;
  font-size:12px;
  font-weight:800;
}

.bot-photo-status.missing{
  background:#eee;
  color:#666;
}

.bot-photo-status.saved{
  background:#dff5e1;
  color:#1f6b2a;
}

.bot-photo-status.unsaved{
  background:#fff2cc;
  color:#8a6d00;
}

.bot-photo-status.error{
  background:#f8d7da;
  color:#842029;
}

.bot-photo-preview{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:12px;
  overflow:hidden;
  background:#ddd;
  margin-bottom:10px;
}

.bot-photo-preview video,
.bot-photo-preview img,
.bot-photo-preview canvas{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bot-photo-preview canvas{
  display:none;
}

.bot-photo-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.bot-photo-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.bot-photo-note{
  margin-top:8px;
  min-height:18px;
  font-size:13px;
}

.bot-photo-summary-status{
  display:inline-flex;
  align-items:center;
  margin-left:10px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.bot-photo-summary-status.saved{
  background:#dff5e1;
  color:#1f6b2a;
}

.bot-photo-summary-status.missing{
  background:#fff2cc;
  color:#8a6d00;
}

/* =========================================================
   BOT PHOTO OVERVIEW TABLE / FILTERS
   ========================================================= */

.photo-toolbar{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}

@media (min-width: 900px){
  .photo-toolbar{
    grid-template-columns:minmax(280px, 420px) 1fr;
    align-items:end;
  }
}

.photo-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.filter-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text);
}

.filter-check input{
  width:16px;
  height:16px;
}

.photo-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:14px;
}

.stat-pill{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--panel);
  color:var(--text);
  font-size:14px;
}

.stat-pill-complete{
  background:rgba(80,180,120,.12);
  border-color:rgba(80,180,120,.35);
}

.table-wrap{
  overflow-x:auto;
}

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

.photo-table th,
.photo-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  white-space:nowrap;
}

.photo-table th{
  text-align:left;
  font-size:13px;
  color:var(--muted);
  font-weight:800;
}

.photo-table td{
  color:var(--text);
}

.photo-table tbody tr:hover{
  background:rgba(255,255,255,.025);
}

.row-complete{
  background:rgba(80,180,120,.05);
}

.row-selected{
  outline:1px solid rgba(90,140,255,.45);
  outline-offset:-1px;
}

.row-muted{
  opacity:.72;
}

.row-status-badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.mini-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:700;
}

.mini-badge.scratch{
  background:rgba(255,193,7,.12);
  border-color:rgba(255,193,7,.35);
}

.mini-badge.withdrawn{
  background:rgba(255,90,90,.12);
  border-color:rgba(255,90,90,.35);
}

.check-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  font-weight:800;
  border:1px solid var(--border);
}

.check-badge.yes{
  background:rgba(80,180,120,.14);
  color:#8fe3a7;
  border-color:rgba(80,180,120,.35);
}

.check-badge.no{
  background:rgba(255,255,255,.03);
  color:var(--muted);
}

.photo-results-note{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}

.text-truncate-cell{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   SMALL COMPATIBILITY HELPERS USED BY bot_photos.php
   ========================================================= */

.text-muted{
  color:var(--muted);
}

.section-title{
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.btn-primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#081018;
  font-weight:800;
}

.btn-sm{
  padding:6px 10px;
  border-radius:10px;
  font-size:13px;
}

/* =========================================================
   SAFETY PAGE
   ========================================================= */

.safety-page-title{
  font-size:28px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  letter-spacing:.02em;
}

/* Safety header status row */


.safety-status-row{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:16px;
  flex-wrap:wrap;
}

.safety-status-row .pill{
	 background:rgba(255,255,255,0.04);
  padding:8px 16px;
  font-size:15px;
  font-weight:700;
}

.status-pass{
  border-color:rgba(34,197,94,.45);
  color:#4ade80;
}

.status-pending{
  border-color:rgba(245,158,11,.45);
  color:#fbbf24;
}

.safety-hero-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
  width:100%;
  box-sizing:border-box;
}

.safety-hero-section{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:12px;
  padding:16px;

  border:1px solid var(--border);
  border-radius:18px;

  background:rgba(255,255,255,0.035);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.safety-hero-section:hover{
  border-color:rgba(59,130,246,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  transform:translateY(-2px);
}

.safety-label{
  display:inline-block;
  text-align:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
}

.safety-label.pill{
  padding:4px 10px;
}

.safety-division{
  display:flex;
  justify-content:center;
  width:100%;
}

.safety-division .pill{
  font-weight:700;
  color:#cfe2ff;
  border-color:rgba(59,130,246,.35);
}

/* Inline message indicating saved */
.inline-save-msg{
  min-height:20px;
  font-size:14px;
  font-weight:700;
}

.inline-save-msg.success{
  color:#4ade80;
}

.inline-save-msg.warn{
  color:#fbbf24;
}

.inline-save-msg.error{
  color:#f87171;
}


/* Safety photos */

.safety-bot-photo,
.safety-driver-photo,
.safety-photo-placeholder{
  display:block;
  width:100%;
  max-width:180px;
  height:180px;

  object-fit:cover;

  border-radius:16px;
  border:1px solid var(--border);
  background:#f3f4f6;

  margin:0 auto;
}

/* placeholder text alignment */

.safety-photo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.3;
  padding:10px;
  color:var(--muted);
}

.safety-bot-name,
.safety-driver-name,
.safety-team-name{
  width:100%;
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  word-break:break-word;
}

.safety-bot-name{
  font-size:22px;
}

.safety-team-name{
  max-width:260px;
}

.safety-team-bots{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  max-width:260px;
}

.safety-team-bot-link{
  width:100%;
  text-align:center;
}

.safety-team-bot-link.is-current{
  border-color:rgba(59,130,246,.45);
  background:rgba(59,130,246,.18);
  font-weight:800;
}

/* =========================================================
   WAIVERS PAGE
   ========================================================= */

.waiver-recipient-check{
  transform: scale(1.1);
}

/* =========================================================
   WAIVER FORM PAGE
   ========================================================= */

/* =========================================================
   WAIVER FORM PAGE
   ========================================================= */

.waiver-form-header{
  display:flex;
  flex-direction:column;
  gap:10px;
}


.waiver-section{
  margin-top: 12px;
} 

.waiver-header-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
}

.waiver-header-label{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  min-width:90px;
}

.waiver-header-value{
  color:var(--text);
  font-size:16px;
  font-weight:700;
}

.waiver-form-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.waiver-form-header{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.waiver-header-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.waiver-header-pills .pill{
  padding:8px 14px;
  font-size:15px;
  font-weight:800;
}

.waiver-read-note{
  margin-bottom:14px;
}

.waiver-open-row{
  margin-bottom:16px;
}

.waiver-pdf-wrap{
  width:80%;
}

.waiver-pdf-object{
  width:100%;
  min-height:560px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

.waiver-agree-note{
  margin-top:14px;
}

.signature-wrap{
  width:100%;
  border:2px solid rgba(255,255,255,0.14);
  border-radius:12px;
  background:#fff;          /* ← white container */
  padding:8px;
}

.signature-pad{
  width:100%;
  height:180px;
  display:block;
  border-radius:8px;
  touch-action:none;
  background:#fff;          /* ← white drawing surface */
}

@media (max-width: 900px){
  .waiver-pdf-object{
    min-height:420px;
  }
}

/* ########################
 end waiver 
 */


@media (max-width: 900px){

  .safety-hero-grid{
    grid-template-columns:1fr;
  }

  .safety-page-title{
    font-size:24px;
  }

  .safety-hero-section{
    padding:14px;
  }

  
  .safety-bot-name,
  .safety-driver-name,
  .safety-team-name{
    font-size:18px;
  }
  
 


}

/* =========================================================
   RESPONSIVE APP SHELL
   ========================================================= */

/* -------------------------------------------------------
   DESKTOP COLLAPSED SIDEBAR
------------------------------------------------------- */

body.sidebar-collapsed .sidebar{
  width:var(--sidebar-w-collapsed);
  padding-left:10px;
  padding-right:10px;
}

body.sidebar-collapsed .app{
  margin-left:var(--sidebar-w-collapsed);
}

body.sidebar-collapsed .brand{
  justify-content:center;
}

body.sidebar-collapsed .brand-text{
  display:none;
}

body.sidebar-collapsed .navlabel{
  display:none;
}

body.sidebar-collapsed .nav-section-title{
  display:none;
}

body.sidebar-collapsed .navlink{
  justify-content:center;
  padding:10px 6px;
}

.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms ease;
  z-index:25;
}

@media (max-width: 860px){
  .app{
    margin-left:0;
  }

  .sidebar{
    transform:translateX(-105%);
    transition:transform 170ms ease;
    width:min(var(--sidebar-w), 86vw);
  }

  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  body.sidebar-open .backdrop{
    opacity:1;
    pointer-events:auto;
  }
}

/* =========================================================
   MISC
   ========================================================= */

#challongeTestResult{
  padding-left:6px;
}



/* ========================================
   SAFETY MOBILE IMAGE OVERRIDE
   (must stay at very end of file)
   ======================================== */

@media (max-width: 900px){

  .safety-bot-photo,
  .safety-driver-photo,
  .safety-photo-placeholder{
    width:120px !important;
    max-width:120px !important;
    height:120px !important;
    min-width:120px !important;
    min-height:120px !important;
    margin:0 auto !important;
  }

}
/* =========================================================
   VOLUNTEER PAGE
   ========================================================= */

.volunteer-locked-context{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:18px;
}

.volunteer-locked-context .k{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:2px;
}

.volunteer-locked-context .v{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
}

.volunteer-locked-context .v:last-child{
  margin-bottom:0;
}

.volunteer-wrong-event{
  font-size:13px;
  color:var(--muted);
  margin:0 0 18px;
}

.volunteer-wrong-event a{
  color:var(--accent);
  text-decoration:none;
}

.volunteer-wrong-event a:hover{
  text-decoration:underline;
}

.btn.volunteer{
  background:#fde68a;
  border-color:#f59e0b;
  color:#78350f;
  font-weight:700;
}

.btn.volunteer:hover{
  background:#fcd34d;
  border-color:#d97706;
}
.volunteer-row-mine{
  background:rgba(34,197,94,.12);
}

.position-note{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.staffing-block{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  margin-bottom:10px;
}

.staffing-title{
  font-weight:800;
  margin-bottom:4px;
}

.staffing-meta{
  color:var(--muted);
  font-size:13px;
  margin-bottom:8px;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:13px;
  color:var(--text);
  background:rgba(255,255,255,0.04);
}

/* =========================================================
   EVENT SWITCHER (topbar)
   ========================================================= */
 
.event-switcher-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  white-space:nowrap;
}
 
.event-switcher-select{
  max-width:260px;
  font-weight:700;
  border-color:rgba(59,130,246,.45);
  color:var(--text);
}
 
.event-switcher-none{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:10px;
  padding:5px 10px;
  white-space:nowrap;
}
 
.event-switcher-none a{
  color:var(--accent);
  text-decoration:none;
}
 
.event-switcher-none a:hover{
  text-decoration:underline;
}

/* +++++++++++++++++++++++++++++
choose_event.php css
+++++++++++++++++++++++++++*/

.choose-events-list{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.choose-event-card{
  overflow:visible;
}

.choose-event-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px;
  align-items:start;
}

.choose-event-main{
  min-width:0;
}

.choose-event-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  min-width:0;
}

.choose-event-logo-wrap{
  flex:0 0 72px;
  width:72px;
  min-width:72px;
}

.choose-event-logo,
.choose-event-logo-placeholder{
  display:block;
  width:72px;
  min-width:72px;
  max-width:72px;
  height:72px;
  min-height:72px;
  max-height:72px;
  border-radius:12px;
  border:1px solid var(--border);
}

.choose-event-logo{
  object-fit:cover;
}

.choose-event-logo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6px;
}

.choose-event-text{
  min-width:0;
  flex:1 1 auto;
}

.choose-event-title{
  margin:0;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.choose-event-meta{
  margin-top:4px;
  line-height:1.35;
}

.choose-event-meta-sep{
  margin:0 4px;
}

.choose-event-links{
  margin-top:8px;
}

.choose-event-classes{
  margin-top:10px;
}

.choose-event-label{
  font-size:12px;
}

.choose-event-division-list{
  margin-top:3px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.choose-event-summary{
  margin-top:10px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.choose-event-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  flex:0 0 auto;
}

@media (max-width: 700px){
  .choose-event-head{
    grid-template-columns:1fr;
    gap:12px;
  }

  .choose-event-top{
    display:grid;
    grid-template-columns:56px minmax(0, 1fr);
    gap:12px;
    align-items:start;
  }

  .choose-event-logo-wrap{
    width:56px;
    min-width:56px;
    flex-basis:56px;
  }

  .choose-event-logo,
  .choose-event-logo-placeholder{
    width:56px;
    min-width:56px;
    max-width:56px;
    height:56px;
    min-height:56px;
    max-height:56px;
  }

  .choose-event-actions{
    justify-content:flex-start;
    margin-top:8px;
  }

  .choose-event-actions .btn{
    width:100%;
  }
}
/*------------ CHOOSE_EVENT end  */
.event-card-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;
  align-items:start;
}

.event-card-main{
  min-width:0;
}

.event-card-title{
  margin:0 0 6px;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.event-card-summary{
  margin:0;
  line-height:1.4;
  color:var(--muted);
}

.event-card-actions{
  display:flex;
  align-items:start;
  justify-content:flex-end;
}

@media (max-width: 700px){
  .event-card-head{
    grid-template-columns:1fr;
  }

  .event-card-actions{
    justify-content:flex-start;
  }

  .event-card-actions .btn{
    width:100%;
  }
}
/* =========================================================
   ORG APPLICATIONS
   ========================================================= */

.pill.pill-pending  { background: rgba(234,179,8,.15);  color: #fbbf24; border-color: rgba(234,179,8,.35);  }
.pill.pill-approved { background: rgba(34,197,94,.12);  color: #4ade80; border-color: rgba(34,197,94,.35); }
.pill.pill-denied   { background: rgba(239,68,68,.1);   color: #f87171; border-color: rgba(239,68,68,.35); }

.pending-badge {
    display: inline-block;
    background: rgba(239,68,68,.85);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
}

/* Responsive */
@media (max-width:1100px){
  .vol-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:700px){
  .vol-stats{ grid-template-columns:1fr; }
}
/* =========================================================
   MATCHES PAGE
   ========================================================= */

.matches-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-bottom:16px;
}

.matches-toolbar{
  display:grid;
  grid-template-columns:minmax(220px, 1.2fr) 220px auto auto auto;
  gap:12px;
  align-items:end;
}

.metric-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,0.03);
}

.metric-label{
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}

.metric-value{
  font-size:28px;
  font-weight:900;
  line-height:1.1;
}

.metric-sub{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

.metric-value.is-good{ color:#15803d; }
.metric-value.is-warn{ color:#b45309; }
.metric-value.is-bad{ color:#b91c1c; }

.matches-table-wrap{
  overflow:auto;
}

.matches-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 12px;
  min-width:1160px;
}

.matches-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--bg);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  font-weight:900;
  white-space:nowrap;
  padding:12px 10px;
  border-bottom:1px solid var(--border);
  text-align:left;
}

.matches-table tbody td{
  padding:0;
  border-bottom:0;
  vertical-align:top;
}

.matches-table tbody tr:hover{
  background:transparent;
}

.matches-division-row td{
  padding:0 0 6px;
}

.matches-division-title{
  font-size:18px;
  font-weight:900;
  padding:8px 2px 2px;
}

.match-row-grid{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:150px minmax(460px, 1fr) 180px 180px;
  gap:12px;
  align-items:stretch;
  padding:12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}

.match-row-grid.is-fighting{
  border-color:rgba(59,130,246,.6);
  box-shadow:0 0 0 1px rgba(59,130,246,.25), 0 0 18px rgba(59,130,246,.10);
}

.match-row-grid.is-awaiting-judges::after{
  content:"AWAITING JUDGES DECISION";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  pointer-events:none;
}

.match-row-grid.is-judges-ready::after{
  content:"JUDGES DECISION READY!";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.16);
  background:rgba(59,130,246,.06);
  pointer-events:none;
}

.score-wrap .btn.is-attention{
  animation:matches-score-pulse 1s ease-in-out infinite;
  box-shadow:0 0 0 1px rgba(59,130,246,.35), 0 0 14px rgba(59,130,246,.18);
}

@keyframes matches-score-pulse{
  0%, 100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.03);
  }
}

.match-row-grid.is-complete{
  opacity:.82;
}

.match-row-grid.is-complete::before{
  content:"COMPLETE";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.11);
  pointer-events:none;
}

@keyframes matches-shimmer{
  from { background-position:0 0; }
  to { background-position:140px 0; }
}

.match-meta{
  min-width:0;
}

.match-title{
  font-weight:900;
  margin-bottom:4px;
}

.match-sub{
  font-size:12px;
  color:var(--muted);
  line-height:1.25;
  margin-bottom:3px;
}

.match-status-text{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  line-height:1.3;
}

.started-time{
  font-size:13px;
  font-weight:700;
  margin-top:8px;
}

.muted-small{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.arena-assign-wrap{
  display:flex;
  gap:4px;
  margin-top:8px;
  flex-wrap:wrap;
}

.arena-assign-btn{
  min-width:32px;
  height:26px;
  padding:0 8px;
  font-size:11px;
  font-weight:700;
  border-radius:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
  transition:background 0.15s, color 0.15s, border-color 0.15s;
}

.arena-assign-btn:hover{
  background:rgba(255,255,255,0.12);
  color:var(--text);
}

.arena-assign-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.queue-bots-wrap{
  display:grid;
  grid-template-columns:auto auto auto;
  gap:14px;
  align-items:center;
  justify-content:start;
  min-width:0;
}

.bot-card{
  position:relative;
  display:inline-grid;
  grid-template-rows:auto auto;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  min-width:0;
  background:rgba(255,255,255,0.02);
}

.bot-card-red{
  border:2px solid #b91c1c;
}

.bot-card-blue{
  border:2px solid #1d4ed8;
}

.bot-card.is-winner::after{
  content:"WINNER";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(134,239,172,.92);
  background:rgba(20,83,45,.18);
  pointer-events:none;
}

.bot-card.is-loser::after{
  content:"LOSER";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(255,255,255,.22);
  background:rgba(0,0,0,.28);
  pointer-events:none;
}

.bot-name{
  font-weight:800;
  line-height:1.2;
  word-break:break-word;
  max-width:190px;
}

.bot-card-main{
  display:grid;
  grid-template-columns:40px 140px;
  gap:10px;
  align-items:end;
}

.queue-pill{
  width:40px;
  height:110px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  border-radius:12px;
}

.queue-pill.bad{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fecaca;
}

.queue-pill.ok{
  color:#166534;
  background:#dcfce7;
  border-color:#bbf7d0;
}

.pill.is-toggle{
  cursor:pointer;
  user-select:none;
}

.match-bot-thumb{
  width:140px;
  height:110px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
}

.match-bot-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.match-bot-thumb .bot-photo-empty{
  position:static;
  inset:auto;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  text-align:center;
  padding:4px;
}

.vs-pill{
  align-self:center;
  justify-self:center;
  padding:8px 14px;
  font-size:13px;
  font-weight:900;
}

.fight-actions{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:8px;
  min-width:0;
}

.fight-controls-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  min-width:0;
}

.fight-controls-grid .btn{
  min-height:42px;
  padding:6px 6px;
  font-size:12px;
  text-align:center;
  white-space:normal;
}

.score-wrap{
  display:flex;
  align-items:stretch;
}

.score-wrap .btn{
  width:100%;
  min-height:42px;
  font-weight:900;
}

.score-wrap .btn.is-done{
  opacity:.8;
}

.match-score-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:16px 0;
}

.match-score-card{
  border:2px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:rgba(255,255,255,0.03);
  cursor:pointer;
}

.match-score-card.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(59,130,246,.35);
}

.match-score-name{
  font-weight:900;
  margin-bottom:10px;
  text-align:center;
}

.match-score-thumb{
  width:100%;
  max-width:220px;
  height:150px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  pointer-events:none;
}

.match-score-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

.match-score-name{
  font-weight:900;
  margin-bottom:10px;
  text-align:center;
  pointer-events:none;
}

.match-score-thumb .bot-photo-empty{
  position:static;
  width:100%;
  height:100%;
  pointer-events:none;
}

.match-score-extra{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.match-score-extra .btn{
  width:100%;
  min-height:42px;
}

.match-score-extra .filter-check{
  justify-content:center;
  opacity:0.5;
  transition:opacity 0.15s;
}

.match-score-extra .filter-check.is-active{
  opacity:1;
}

.ocb-modal-message{
  margin-bottom:16px;
}

.ocb-modal-actions{
  margin-top:16px;
}

@media (max-width: 1100px){
  .matches-stats{
    grid-template-columns:1fr 1fr;
  }

  .matches-toolbar{
    grid-template-columns:1fr 1fr;
  }

  .match-row-grid{
    grid-template-columns:150px minmax(0, 1fr);
    grid-template-areas:
      "meta bots"
      "actions actions";
  }

  .match-meta{ grid-area:meta; }
  .queue-bots-wrap{ grid-area:bots; }
  .fight-actions{ grid-area:actions; }
}

@media (max-width: 700px){
  .matches-stats,
  .matches-toolbar{
    grid-template-columns:1fr;
  }

  .matches-table-wrap{
    overflow:visible;
  }

  .matches-table,
  .matches-table thead,
  .matches-table tbody,
  .matches-table tr,
  .matches-table td{
    display:block;
    width:100%;
    min-width:0;
  }

  .matches-table{
    min-width:0;
  }

  .matches-table thead{
    display:none;
  }

  .matches-table tbody tr{
    margin-bottom:12px;
  }

  .match-row-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "meta"
      "bots"
      "actions";
  }

  .queue-bots-wrap{
    grid-template-columns:1fr;
    justify-content:stretch;
    gap:10px;
  }

  .vs-pill{
    justify-self:start;
  }

  .bot-card{
    display:grid;
    width:100%;
  }

  .bot-name{
    max-width:none;
  }

  .bot-card-main{
    grid-template-columns:36px 120px;
  }

  .queue-pill{
    width:36px;
    height:96px;
    font-size:16px;
  }

  .match-bot-thumb{
    width:120px;
    height:96px;
  }

  .fight-controls-grid .btn{
    min-height:38px;
    padding:6px 4px;
    font-size:11px;
  }

  .score-wrap .btn{
    min-height:40px;
  }

  .match-score-modal-grid{
    grid-template-columns:1fr;
  }

  .match-score-thumb{
    max-width:180px;
    height:120px;
  }
}

/* ── Pending brackets warning banner ── */

.pending-bracket-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}

.pending-bracket-row:last-child{
  border-bottom:none;
}

.pending-bracket-info{
  display:flex;
  align-items:center;
  gap:10px;
}

.pending-bracket-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(245,158,11,0.8);
  border:1px solid rgba(245,158,11,0.5);
  flex-shrink:0;
}

.pending-bracket-name{
  font-weight:700;
  font-size:14px;
  color:var(--text);
}

/* ── Fight Control Modal ── */

.fight-control-modal-card{
  width:500px;
  max-width:calc(100vw - 28px);
}

.fight-ctrl-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}

.fight-ctrl-title{
  font-weight:800;
  font-size:17px;
  color:#fff;
}

.fight-ctrl-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:3px;
}

.fight-ctrl-timer-wrap{
  text-align:center;
  padding:16px 0 20px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:18px;
}

.fight-ctrl-timer{
  font-size:64px;
  font-weight:900;
  letter-spacing:0.02em;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  transition:color 0.3s;
}

.fight-ctrl-timer.is-warn{ color:#fbbf24; }
.fight-ctrl-timer.is-bad{  color:#f87171; }
.fight-ctrl-timer.is-done{ color:var(--muted); }

.fight-ctrl-timer-status{
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  margin-bottom:14px;
}

.fight-ctrl-timer-btns{
  display:flex;
  gap:10px;
  justify-content:center;
}

.fight-ctrl-section-label{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:6px;
}

.fight-ctrl-stream-wrap{
  margin-bottom:16px;
}

.fight-ctrl-message{
  font-size:14px;
  color:var(--text);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  line-height:1.4;
  word-break:break-word;
}

.fight-ctrl-response{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  min-height:18px;
}

.fight-ctrl-response.ok   { color:#4ade80; }
.fight-ctrl-response.error{ color:#f87171; }

.fight-ctrl-arena-wrap{
  border-top:1px solid var(--border);
  padding-top:14px;
}

.fight-ctrl-arena-status{
  font-size:13px;
  color:var(--muted);
}

.fight-ctrl-arena-status.ok   { color:#4ade80; }
.fight-ctrl-arena-status.error{ color:#f87171; }

/* =======================
   MATCHES SECTION ENDED
   ======================= */