:root {
  --race-red: #df1421;
  --race-gold: #d3a81e;
  --race-black: #050505;
  --race-panel: #0b0b0b;
  --race-border: #2d2d2d;
  --race-muted: #a5a5a5;
}

body.race-admin-page {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 12px),
    #050505;
  color: #fff;
  min-height: 100vh;
}

.race-admin-shell {
  width: min(1380px, calc(100% - 32px));
  margin: 0 auto;
  padding: 30px 0 70px;
}

.race-admin-header {
  border-top: 4px solid var(--race-red);
  border-bottom: 1px solid var(--race-border);
  background: #080808;
  padding: 18px 22px 22px;
  margin-bottom: 22px;
}

.race-back-link {
  color: var(--race-gold);
  text-decoration: none;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
}

.race-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
}

.race-brand-row h1 {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  line-height: .92;
  font-style: italic;
  letter-spacing: -.025em;
}

.race-admin-subtitle {
  color: var(--race-muted);
  max-width: 760px;
  margin: 10px 0 0;
}

.race-admin-logo {
  display: block;
  width: min(250px, 28vw);
  height: auto;
}

.race-auth-warning {
  margin-top: 18px;
  border: 1px solid var(--race-red);
  padding: 14px;
  color: #fff;
}

.race-auth-warning a { color: var(--race-gold); }
.hidden { display: none !important; }

.race-status-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: #0a0a0a;
  border: 1px solid var(--race-border);
  border-left: 5px solid var(--race-gold);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.race-status-bar span,
.race-stats-grid span {
  display: block;
  color: var(--race-muted);
  font-size: .75rem;
  letter-spacing: .08em;
  font-weight: 700;
}

.race-status-bar strong { font-size: 1.15rem; }
.race-status-bar p { margin: 0; color: #ccc; }
.draft-status { color: var(--race-gold); }
.published-status { color: #58d97a; }

.race-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.race-stats-grid article {
  border: 1px solid var(--race-border);
  background: #090909;
  padding: 18px;
  min-height: 94px;
}

.race-stats-grid strong {
  display: block;
  font-size: 2rem;
  margin-top: 8px;
  color: #fff;
}

.race-admin-card {
  background: var(--race-panel);
  border: 1px solid var(--race-border);
  border-left: 4px solid var(--race-red);
  padding: 22px;
  margin-bottom: 18px;
}

.race-admin-card .panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.race-admin-card h2,
.race-admin-card h3 { margin: 0; font-style: italic; }
.section-eyebrow { color: var(--race-gold); font-size: .78rem; margin: 0 0 4px; font-weight: 700; letter-spacing: .08em; }

.draft-pill {
  border: 1px solid var(--race-gold);
  color: var(--race-gold);
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 800;
}

.heat-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.race-admin-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #d6d6d6;
  font-size: .83rem;
  font-weight: 600;
}

.race-admin-card input,
.race-admin-card select,
.race-admin-card textarea {
  box-sizing: border-box;
  width: 100%;
  background: #050505;
  border: 1px solid #3b3b3b;
  color: #fff;
  border-radius: 0;
  padding: 12px 13px;
  font: inherit;
}

.race-admin-card textarea { resize: vertical; line-height: 1.45; }
.race-admin-card input:focus,
.race-admin-card select:focus,
.race-admin-card textarea:focus { outline: 1px solid var(--race-gold); border-color: var(--race-gold); }

.helper-text,
.race-copy { color: var(--race-muted); line-height: 1.55; }
.import-format { display: inline-block; border: 1px solid #333; background: #050505; color: var(--race-gold); padding: 7px 10px; margin: 10px 0; font-family: ui-monospace, monospace; }

.button-row,
.publish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.publish-button {
  background: var(--race-red);
  border: 1px solid var(--race-red);
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  cursor: pointer;
  font-family: inherit;
}
.publish-button:disabled { opacity: .35; cursor: not-allowed; }

.danger-outline-button {
  background: transparent;
  border: 1px solid #7b1c24;
  color: #ff7982;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.validation-badge { padding: 6px 9px; border: 1px solid #555; font-size: .75rem; }
.validation-badge.ready { color: #58d97a; border-color: #267e3d; }
.validation-badge.blocked { color: #ff7e87; border-color: #7b1c24; }
.validation-badge.waiting { color: #bbb; }
.validation-success { border: 1px solid #267e3d; color: #58d97a; padding: 12px; }
.validation-block { padding: 12px 14px; margin-top: 10px; }
.validation-block ul { margin: 8px 0 0 18px; padding: 0; max-height: 260px; overflow: auto; }
.validation-block li { margin: 5px 0; color: #d5d5d5; }
.error-block { border: 1px solid #7b1c24; background: rgba(223,20,33,.06); }
.warning-block { border: 1px solid #6f5b1f; background: rgba(211,168,30,.05); }

.draft-round { margin-top: 18px; border-top: 1px solid #2e2e2e; padding-top: 14px; }
.round-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.round-heading strong { color: var(--race-gold); font-size: 1.2rem; }
.round-heading span { color: var(--race-muted); font-size: .75rem; }
.draft-heats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.draft-heat-card { border: 1px solid #303030; background: #070707; }
.draft-heat-card header { display: flex; justify-content: space-between; gap: 10px; padding: 13px; border-bottom: 1px solid #2b2b2b; border-top: 3px solid var(--race-red); }
.draft-heat-card header span { color: var(--race-gold); font-size: .7rem; font-weight: 700; }
.draft-heat-card header h3 { font-size: 1.45rem; }
.draft-heat-card header p { margin: 2px 0 0; color: #aaa; font-size: .8rem; }
.heat-card-actions { display: flex; gap: 5px; }
.small-action { align-self: flex-start; background: #111; border: 1px solid #333; color: #ddd; padding: 6px 8px; font-size: .68rem; cursor: pointer; }
.heat-grid-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid #202020; padding: 8px 11px; }
.heat-grid-row:last-child { border-bottom: 0; }
.heat-grid-row > strong { display: grid; place-items: center; width: 31px; height: 31px; background: var(--race-gold); color: #090909; }
.heat-grid-row span { display: block; font-weight: 600; }
.heat-grid-row small { display: block; color: #888; overflow-wrap: anywhere; }
.empty-round { opacity: .45; }

.admin-message.success { color: #58d97a; }
.admin-message.error { color: #ff7e87; }

@media (max-width: 900px) {
  .race-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .heat-fields { grid-template-columns: 1fr 1fr; }
  .draft-heats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .race-admin-shell { width: min(100% - 18px, 1380px); padding-top: 12px; }
  .race-brand-row { align-items: flex-start; }
  .race-admin-logo { width: 120px; }
  .race-status-bar { grid-template-columns: 1fr; }
  .race-stats-grid { grid-template-columns: 1fr 1fr; }
  .heat-fields { grid-template-columns: 1fr; }
  .draft-heats { grid-template-columns: 1fr; }
  .race-admin-card { padding: 15px; }
}

/* Notification controls */
.notification-master-toggle {
  margin: 14px 0;
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  padding: 13px 14px;
  border: 1px solid #3a3a3a;
  border-left: 4px solid var(--race-red);
  background: #080808;
  color: #fff !important;
  font-weight: 800 !important;
}
.notification-master-toggle input,
.notification-setting-group input { width: auto !important; accent-color: var(--race-red); }
.notification-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.notification-setting-group { border:1px solid #303030; background:#070707; padding:14px; }
.notification-setting-group h3 { margin:0 0 10px; color:var(--race-gold); font-size:1rem; }
.notification-setting-group > label { flex-direction:row; align-items:center; }
.notification-checks { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.notification-checks label { flex-direction:row; align-items:center; gap:6px; padding:8px 10px; background:#111; border:1px solid #353535; color:#fff; font-size:.74rem; font-weight:800; }
@media (max-width: 620px) { .notification-settings-grid { grid-template-columns:1fr; } }
.notification-test-row { display:grid; grid-template-columns:minmax(220px,1fr) auto; gap:12px; align-items:end; margin-top:18px; padding-top:16px; border-top:1px solid #2c2c2c; }
@media (max-width: 620px) { .notification-test-row { grid-template-columns:1fr; } }


/* Event dates and delayed notification tests */
.event-date-strip { display:inline-flex; gap:10px; align-items:center; margin-top:10px; padding:7px 10px; border:1px solid #383838; border-left:4px solid var(--race-gold); background:#070707; font-size:.78rem; }
.event-date-strip strong { color:var(--race-gold); }
.event-date-strip span { color:#fff; font-weight:700; }
.notification-date-note { margin:12px 0 4px; padding:10px 12px; border:1px solid #333; background:#060606; color:#cfcfcf; font-size:.82rem; }
.notification-date-note strong { color:var(--race-gold); }
.notification-date-note span { color:#666; margin:0 7px; }
.notification-reminder-test { margin-top:14px; padding:14px; border:1px solid #333; border-left:4px solid var(--race-gold); background:#080808; }
.notification-reminder-test > div:first-child strong { color:var(--race-gold); }
.notification-reminder-test p { margin:5px 0 0; color:var(--race-muted); line-height:1.45; }
.reminder-test-buttons { margin-top:12px; }
@media (max-width:620px) { .event-date-strip { display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .notification-date-note span { display:none; } .notification-date-note strong:nth-of-type(2) { display:block; margin-top:6px; } }

/* =====================================================
   RACE ADMIN SECTION TABS
===================================================== */
.race-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 16px 0 0;
  border: 1px solid var(--race-border);
  background: #050505;
}

.race-section-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 0 17px;
  border-right: 1px solid var(--race-border);
  color: #9f9f9f;
  text-decoration: none;
  font-size: .76rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .045em;
}

.race-section-tab:hover {
  color: #fff;
  background: #111;
}

.race-section-tab.active {
  color: #fff;
  background: #151515;
}

.race-section-tab.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: var(--race-red);
}

@media (max-width: 620px) {
  .race-section-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .race-section-tab {
    justify-content: center;
    border-right: 0;
  }

  .race-section-tab + .race-section-tab {
    border-left: 1px solid var(--race-border);
  }
}


/* Optimised numbered heat draw */
.number-draw-settings {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.number-draw-settings input[readonly] { color: var(--race-gold); font-weight: 800; }
.number-draw-notice {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #2d5738;
  border-left: 4px solid #58d97a;
  background: #070b08;
  color: #d7e9dc;
}
.number-draw-notice strong { color: #58d97a; font-size: .78rem; letter-spacing: .06em; white-space: nowrap; }
.number-draw-notice span { color: #aaa; }
.number-draw-notice.bad { border-color: #6f242a; border-left-color: var(--race-red); background: #0c0606; }
.number-draw-notice.bad strong { color: #ff7e87; }
.number-draw-progress-shell { height: 5px; margin-top: 12px; background: #030303; border: 1px solid #222; overflow: hidden; }
.number-draw-progress { height: 100%; width: 0; background: var(--race-gold); transition: width .12s linear; }
.number-draw-workspace { margin-top: 20px; display: grid; gap: 16px; }
.number-draw-panel { border: 1px solid #313131; background: #070707; padding: 16px; }
.number-draw-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.number-draw-quality,
.number-assignment-count { color: var(--race-gold); font-size: .75rem; letter-spacing: .04em; text-align: right; }
.number-draw-round { margin-top: 16px; }
.number-draw-round > header { border-bottom: 2px solid var(--race-red); padding-bottom: 7px; margin-bottom: 9px; color: var(--race-gold); }
.number-draw-heats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.number-draw-heat { border: 1px solid #292929; background: #050505; min-width: 0; }
.number-draw-heat-head { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #262626; }
.number-draw-heat-head strong { color: #fff; }
.number-draw-heat-head span { color: #888; font-size: .72rem; }
.number-draw-grid-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 34px; padding: 5px 9px; border-bottom: 1px solid #1d1d1d; }
.number-draw-grid-row:last-child { border-bottom: 0; }
.number-draw-grid-row > strong { color: var(--race-gold); }
.number-draw-grid-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ddd; font-size: .8rem; }
.driver-number-assignments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.driver-number-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 8px !important; padding: 7px; border: 1px solid #292929; background: #050505; }
.driver-number-row > strong { min-width: 0; min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-left: 4px solid var(--race-gold); background: #0b0b0b; color: #fff; font-size: .9rem; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-number-row select { margin: 0; min-width: 0; }
.driver-number-row option:disabled { color: #555; }
.number-assignment-actions { justify-content: space-between; }
.manual-heat-divider { display: flex; align-items: center; gap: 12px; margin: 30px 0 12px; color: #777; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.manual-heat-divider::before,
.manual-heat-divider::after { content: ""; height: 1px; flex: 1; background: #2b2b2b; }
.manual-heat-divider span { white-space: nowrap; }

@media (max-width: 1100px) {
  .number-draw-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .driver-number-assignments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .number-draw-heats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .number-draw-settings { grid-template-columns: 1fr 1fr; }
  .number-draw-heats,
  .driver-number-assignments { grid-template-columns: 1fr; }
  .number-draw-notice { align-items: flex-start; flex-direction: column; gap: 3px; }
  .number-draw-panel-heading { flex-direction: column; }
  .number-draw-quality,
  .number-assignment-count { text-align: left; }
}

/* Heat membership only: internal backend slot numbers are intentionally hidden. */
.heat-grid-row.heat-member-row { grid-template-columns: 1fr; }


/* LIVE NUMBER DRAW SCREEN */
.number-draw-live-strip{margin-top:12px;padding:11px 12px;border:1px solid rgba(36,209,109,.35);border-radius:10px;background:rgba(36,209,109,.055);display:flex;align-items:center;justify-content:space-between;gap:14px}.number-draw-live-strip>div{display:grid;gap:2px}.number-draw-live-strip strong{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;letter-spacing:.06em}.number-draw-live-strip span{color:#a6a6a6;font-size:.78rem}.number-draw-live-dot{width:8px;height:8px;border-radius:50%;background:#24d16d;box-shadow:0 0 11px rgba(36,209,109,.75)}.number-draw-live-link{text-decoration:none;white-space:nowrap}@media(max-width:700px){.number-draw-live-strip{align-items:stretch;flex-direction:column}.number-draw-live-link{text-align:center}}

.number-draw-live-status{display:block;margin-top:4px;font-size:.72rem;font-weight:900;letter-spacing:.06em;color:#aaa}
.number-draw-live-status[data-state="working"]{color:#facc15}
.number-draw-live-status[data-state="success"]{color:#4ade80}
.number-draw-live-status[data-state="error"]{color:#ff5b6a}


/* USE THIS NUMBER DRAW */
.number-draw-use-button {
  border: 1px solid #f4c400;
  background: #f4c400;
  color: #090909;
  min-height: 48px;
  padding: 0 20px;
  font: inherit;
  font-weight: 950;
  font-style: italic;
  letter-spacing: .035em;
  cursor: pointer;
}
.number-draw-use-button:hover:not(:disabled) {
  filter: brightness(1.08);
}
.number-draw-use-button:disabled {
  opacity: .48;
  cursor: not-allowed;
}
.driver-number-row select:disabled {
  opacity: .45;
  cursor: not-allowed;
}


.driver-number-row .driver-assignment-name {
  text-align: left;
}

.driver-number-row select {
  font-weight: 900;
  text-align: center;
  text-align-last: center;
}

.randomise-driver-order-button {
  border-color: var(--race-gold);
  color: var(--race-gold);
}

@media (max-width: 560px) {
  .driver-number-row {
    grid-template-columns: minmax(0, 1fr) 100px;
  }
}

/* WIKC OFFICIAL HEAT TIMES STYLES */
.official-times-fixed-badge {
  border: 1px solid var(--race-gold);
  color: var(--race-gold);
  padding: 7px 10px;
  font-size: .72rem;
  letter-spacing: .08em;
}
.official-heat-times-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.official-heat-times-grid article {
  display: grid;
  gap: 5px;
  border: 1px solid #2a2a2a;
  border-top: 3px solid var(--race-red);
  background: #090909;
  padding: 11px;
}
.official-heat-times-grid article strong {
  color: var(--race-gold);
  font-size: .76rem;
  margin-bottom: 3px;
}
.official-heat-times-grid article span {
  display: block;
  border-top: 1px solid #1f1f1f;
  padding-top: 4px;
  color: #fff;
  font-size: .84rem;
}
.official-times-actions {
  margin-top: 16px;
}
@media (max-width: 1050px) {
  .official-heat-times-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .official-heat-times-grid {
    grid-template-columns: 1fr;
  }
}
/* WIKC OFFICIAL HEAT TIMES STYLES END */