:root {
  --ivory: #FFFFF0;
  --gunmetal: #1F262A;
  --light-gunmetal: #5B676D;
  --gold: #C89A65;

  --radius-large: 28px;
  --radius-medium: 18px;
  --shadow-soft: 0 24px 60px rgba(31, 38, 42, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.18), transparent 34%),
    linear-gradient(145deg, var(--ivory), #f7f2df);
  color: var(--gunmetal);
}

button,
input,
select {
  font-family: inherit;
}

#app {
  min-height: 100vh;
}

/* LOGIN */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 240, 0.92);
  border: 1px solid rgba(200, 154, 101, 0.35);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 34px;
}

.app-badge {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: var(--gunmetal);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 24px;
}

.auth-card h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 38px;
  line-height: 1;
}

.auth-card h1 span {
  color: var(--gold);
}

.tagline {
  margin: 10px 0 28px;
  color: var(--light-gunmetal);
  font-size: 15px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gunmetal);
}

.form-group input {
  width: 100%;
  border: 1px solid rgba(91, 103, 109, 0.28);
  border-radius: 14px;
  padding: 14px 15px;
  background: white;
  color: var(--gunmetal);
  font-size: 15px;
  outline: none;
}

.form-group input:focus {
  border-color: var(--gold);
}

.primary-button {
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 15px 18px;
  background: var(--gunmetal);
  color: var(--ivory);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}

.primary-button:hover {
  background: #161c1f;
}

.dev-login {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(91, 103, 109, 0.18);
}

.dev-login p {
  margin: 0 0 12px;
  color: var(--light-gunmetal);
  font-size: 13px;
}

.dev-buttons {
  display: grid;
  gap: 10px;
}

.secondary-button {
  border: 1px solid rgba(200, 154, 101, 0.48);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--gunmetal);
  font-weight: 700;
  cursor: pointer;
}

.secondary-button:hover {
  background: rgba(200, 154, 101, 0.12);
}

/* DASHBOARD */

.dashboard {
  min-height: 100vh;
  padding: 24px;
}

.dashboard-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.small-badge {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  background: var(--gunmetal);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  color: var(--gold);
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 700;
}

.brand-lockup h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 28px;
}

.brand-lockup p {
  margin: 3px 0 0;
  color: var(--light-gunmetal);
  font-size: 13px;
}

.logout-button {
  border: none;
  border-radius: 14px;
  padding: 11px 15px;
  background: rgba(31, 38, 42, 0.08);
  color: var(--gunmetal);
  font-weight: 700;
  cursor: pointer;
}

.hero-panel {
  background: var(--gunmetal);
  color: var(--ivory);
  border-radius: var(--radius-large);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 24px;
}

.hero-panel p {
  margin: 0 0 8px;
  color: rgba(255, 255, 240, 0.72);
  font-size: 14px;
}

.hero-panel h1 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: 42px;
}

.hero-panel h1 span {
  color: var(--gold);
}

.content-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.panel {
  background: rgba(255, 255, 240, 0.9);
  border: 1px solid rgba(91, 103, 109, 0.14);
  border-radius: var(--radius-large);
  padding: 24px;
  box-shadow: 0 14px 40px rgba(31, 38, 42, 0.08);
}

.panel h3 {
  margin: 0 0 18px;
  font-size: 20px;
}

.court-list {
  display: grid;
  gap: 12px;
}

.court-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: white;
  border-radius: var(--radius-medium);
  border: 1px solid rgba(91, 103, 109, 0.12);
}

.court-card h4 {
  margin: 0 0 4px;
  font-size: 16px;
}

.court-card p {
  margin: 0;
  color: var(--light-gunmetal);
  font-size: 13px;
}

.status {
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
}

.status.available {
  background: rgba(200, 154, 101, 0.18);
  color: #8a5e2f;
}

.status.booked {
  background: rgba(91, 103, 109, 0.16);
  color: var(--light-gunmetal);
}

.quick-actions {
  display: grid;
  gap: 12px;
}

.action-card {
  padding: 17px;
  border-radius: var(--radius-medium);
  background: white;
  border: 1px solid rgba(91, 103, 109, 0.12);
}

.action-card strong {
  display: block;
  margin-bottom: 5px;
}

.action-card span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

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

  .topbar {
    align-items: flex-start;
  }

  .hero-panel h1 {
    font-size: 34px;
  }
}
.auth-logo {
  width: 245px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 34px;
}

.topbar-logo {
  width: 210px;
  max-width: 52vw;
  height: auto;
  display: block;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(31, 38, 42, 0.07);
  color: var(--light-gunmetal);
  font-size: 13px;
  font-weight: 700;
}
.auth-message {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(200, 154, 101, 0.16);
  color: #8a5e2f;
  font-size: 13px;
  font-weight: 700;
}
.inactivity-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 38, 42, 0.68);
  backdrop-filter: blur(8px);
}

.inactivity-card {
  width: 100%;
  max-width: 430px;
  background: var(--ivory);
  border: 1px solid rgba(200, 154, 101, 0.45);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
  padding: 30px;
  text-align: center;
}

.inactivity-card h2 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: 36px;
  color: var(--gunmetal);
}

.inactivity-card p {
  margin: 0 0 24px;
  color: var(--light-gunmetal);
  line-height: 1.5;
  font-size: 15px;
}

.inactivity-actions {
  display: grid;
  gap: 12px;
}

.inactivity-note {
  display: block;
  margin-top: 18px;
  color: var(--light-gunmetal);
  font-size: 13px;
  font-weight: 600;
}
@media (max-width: 520px) {
  .dashboard {
    padding: 14px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .brand-lockup {
    justify-content: space-between;
    align-items: center;
  }

  .topbar-logo {
    width: 185px;
    max-width: 70vw;
  }

  .role-pill {
    font-size: 12px;
    padding: 8px 11px;
    white-space: nowrap;
  }

  .logout-button {
    width: 100%;
    padding: 14px 16px;
  }

  .hero-panel {
    padding: 24px;
  }

  .hero-panel h1 {
    font-size: 31px;
    line-height: 1.08;
  }

  .panel {
    padding: 18px;
  }

  .court-card {
    padding: 15px;
  }

  .auth-card {
    padding: 26px 22px;
  }

  .auth-logo {
    width: 225px;
    margin-bottom: 30px;
  }
}
/* COURTTRACK SUITE APP SHELL — closer to AttendTrack */

.dashboard {
  min-height: 100vh;
  padding: 14px;
  display: flex;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.16), transparent 34%),
    linear-gradient(145deg, var(--ivory), #f4eedc);
}

.dashboard-shell {
  width: 100%;
  max-width: 520px;
  min-height: calc(100vh - 28px);
  margin: 0;
  padding: 26px 22px;
  border-radius: 26px;
  border: 1px solid rgba(200, 154, 101, 0.42);
  background: rgba(255, 255, 240, 0.88);
  box-shadow: 0 22px 55px rgba(31, 38, 42, 0.12);
}

.topbar {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200, 154, 101, 0.32);
}

.brand-lockup {
  display: grid;
  gap: 14px;
}

.topbar-logo {
  width: 310px;
  max-width: 100%;
}

.role-pill {
  width: fit-content;
  border: 1px solid rgba(200, 154, 101, 0.35);
  background: rgba(255, 255, 255, 0.45);
  color: var(--light-gunmetal);
}

.logout-button {
  width: 100%;
  border: 1px solid rgba(200, 154, 101, 0.45);
  background: rgba(255, 255, 255, 0.42);
}

.hero-panel {
  background: rgba(255, 255, 240, 0.55);
  color: var(--gunmetal);
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 24px;
  box-shadow: none;
  padding: 24px;
}

.hero-panel p {
  color: var(--gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-panel h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  line-height: 1.08;
  font-weight: 800;
  text-transform: uppercase;
}

.hero-panel h1 span {
  color: var(--gunmetal);
}

.content-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

.panel {
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 24px;
  background: rgba(255, 255, 240, 0.55);
  box-shadow: none;
}

.panel h3 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 800;
}

.court-card,
.action-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  background: rgba(255, 255, 255, 0.42);
}

@media (min-width: 900px) {
  .dashboard-shell {
    max-width: 620px;
  }
}
/* THEME TOGGLE */

.login-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.login-topline .auth-logo {
  width: 285px;
  max-width: calc(100% - 66px);
  margin-bottom: 0;
}

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

.theme-toggle {
  width: 52px;
  height: 30px;
  border: 1px solid rgba(200, 154, 101, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  padding: 3px;
  cursor: pointer;
}

.theme-toggle span {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: var(--gunmetal);
  transition: transform 0.2s ease, background 0.2s ease;
}

body.dark-mode .theme-toggle {
  background: rgba(200, 154, 101, 0.16);
}

body.dark-mode .theme-toggle span {
  transform: translateX(22px);
  background: var(--gold);
}

/* DARK MODE */

body.dark-mode {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.16), transparent 34%),
    linear-gradient(145deg, #111719, #1F262A);
  color: var(--ivory);
}

body.dark-mode .auth-page,
body.dark-mode .dashboard {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.16), transparent 34%),
    linear-gradient(145deg, #111719, #1F262A);
}

body.dark-mode .auth-card,
body.dark-mode .dashboard-shell {
  background: linear-gradient(145deg, rgba(31, 38, 42, 0.96), rgba(18, 24, 27, 0.96));
  border-color: rgba(200, 154, 101, 0.38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

body.dark-mode .topbar {
  border-bottom-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .form-group label,
body.dark-mode .court-card h4,
body.dark-mode .action-card strong {
  color: var(--ivory);
}

body.dark-mode .form-group input {
  background: rgba(255, 255, 240, 0.08);
  border-color: rgba(200, 154, 101, 0.28);
  color: var(--ivory);
}

body.dark-mode .form-group input::placeholder {
  color: rgba(255, 255, 240, 0.48);
}

body.dark-mode .hero-panel,
body.dark-mode .panel,
body.dark-mode .court-card,
body.dark-mode .action-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .hero-panel h1,
body.dark-mode .hero-panel h1 span {
  color: var(--ivory);
}

body.dark-mode .hero-panel p,
body.dark-mode .panel h3 {
  color: var(--gold);
}

body.dark-mode .court-card p,
body.dark-mode .action-card span,
body.dark-mode .role-pill,
body.dark-mode .dev-login p,
body.dark-mode .inactivity-card p,
body.dark-mode .inactivity-note {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .role-pill,
body.dark-mode .logout-button,
body.dark-mode .secondary-button {
  background: rgba(255, 255, 240, 0.05);
  border: 1px solid rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .dev-login {
  border-top-color: rgba(200, 154, 101, 0.24);
}

body.dark-mode .inactivity-card {
  background: linear-gradient(145deg, rgba(31, 38, 42, 0.98), rgba(18, 24, 27, 0.98));
}

body.dark-mode .inactivity-card h2 {
  color: var(--ivory);
}

body.dark-mode .auth-message {
  background: rgba(200, 154, 101, 0.16);
  color: var(--gold);
}
/* SMALL HEADER + BUTTON FIX */

.primary-button {
  border: 1px solid rgba(200, 154, 101, 0.42);
}

.topbar {
  position: relative;
}

.topbar .theme-toggle {
  position: absolute;
  top: 24px;
  right: 0;
  width: 56px;
  height: 32px;
}

.topbar .theme-toggle span {
  width: 24px;
  height: 24px;
}

body.dark-mode .topbar .theme-toggle span {
  transform: translateX(24px);
}

.topbar-actions {
  display: block;
}

.topbar-actions .logout-button {
  width: 100%;
  max-width: 310px;
  margin-top: 8px;
}

.brand-lockup {
  padding-right: 72px;
}
/* DASHBOARD PILL + TOGGLE ALIGNMENT FIX */

.dashboard-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 390px;
}

.topbar .theme-toggle {
  position: static;
  flex: 0 0 auto;
}

.topbar-actions {
  display: none;
}

.brand-lockup {
  padding-right: 0;
}

.logout-button {
  width: 100%;
  max-width: 390px;
}
/* PUSH DASHBOARD TOGGLE TO RIGHT SIDE */

.brand-lockup {
  width: 100%;
  padding-right: 0;
}

.dashboard-controls-row {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.topbar .theme-toggle {
  position: static;
  margin-left: auto;
}
 /* FORCE DASHBOARD PILL LEFT + TOGGLE FAR RIGHT */

.topbar {
  width: 100%;
}

.topbar .brand-lockup {
  width: 100% !important;
  max-width: none !important;
  display: grid;
  gap: 18px;
}

.dashboard-controls-row {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.dashboard-controls-row .role-pill {
  grid-column: 1;
}

.dashboard-controls-row .theme-toggle {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}

.logout-button {
  width: 100%;
  max-width: none;
}
/* CLEAN COURTTRACK HEADER CONTROL ROW */

.ct-header-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ct-toggle-slot {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

.ct-toggle-slot .theme-toggle {
  position: static !important;
  margin-left: 0 !important;
}

.topbar-logo {
  display: block;
}

.logout-button {
  width: 100%;
  max-width: none !important;
}
/* FINAL COURTTRACK HEADER RESET */

.ct-dashboard-header {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200, 154, 101, 0.32);
}

.ct-role-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ct-role-row .theme-toggle {
  position: static !important;
  margin-left: auto !important;
}
/* COMPACT LOGOUT BUTTON */

.ct-dashboard-header .logout-button {
  width: auto !important;
  max-width: none !important;
  min-width: 116px;
  justify-self: end;
  padding: 10px 18px;
  border-radius: 14px;
  font-size: 13px;
}
/* COURTTRACK NAV BAR */

.ct-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(31, 38, 42, 0.06);
  border: 1px solid rgba(200, 154, 101, 0.32);
}

.ct-nav-item {
  border: none;
  border-radius: 13px;
  padding: 10px 8px;
  background: transparent;
  color: var(--light-gunmetal);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ct-nav-item.active {
  background: var(--gunmetal);
  color: var(--ivory);
  border: 1px solid rgba(200, 154, 101, 0.42);
}

body.dark-mode .ct-nav {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .ct-nav-item {
  color: rgba(255, 255, 240, 0.72);
}

body.dark-mode .ct-nav-item.active {
  background: var(--gold);
  color: var(--gunmetal);
}
/* AVAILABLE COURT CARDS */

.available-courts-grid {
  display: grid;
  gap: 14px;
}

.available-court-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  background: rgba(255, 255, 255, 0.42);
  border-radius: 22px;
  padding: 18px;
}

.available-court-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.court-type-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 154, 101, 0.38);
  background: rgba(200, 154, 101, 0.10);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.available-court-card h4 {
  margin: 0 0 6px;
  font-size: 20px;
}

.available-court-card p {
  margin: 0;
  color: var(--light-gunmetal);
  font-size: 14px;
}

body.dark-mode .available-court-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .court-type-icon {
  background: rgba(200, 154, 101, 0.12);
}

body.dark-mode .available-court-card h4 {
  color: var(--ivory);
}

body.dark-mode .available-court-card p {
  color: rgba(255, 255, 240, 0.72);
}
/* HOME DASHBOARD — ATTENDTRACK STYLE */

.panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-subtitle {
  margin: -10px 0 0;
  color: var(--light-gunmetal);
  font-size: 13px;
  line-height: 1.4;
}

.glance-count {
  min-width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 154, 101, 0.42);
  color: var(--gunmetal);
  font-weight: 900;
  font-size: 17px;
}

.home-action-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.home-mini-action {
  min-width: 118px;
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--gunmetal);
  text-align: left;
  cursor: pointer;
}

.home-mini-action strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.home-mini-action span {
  color: var(--light-gunmetal);
  font-size: 12px;
}

.available-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.available-preview-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 14px 10px;
  background: rgba(255, 255, 255, 0.38);
}

.available-preview-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.available-preview-card span {
  color: var(--light-gunmetal);
  font-size: 11px;
}

body.dark-mode .panel-subtitle,
body.dark-mode .home-mini-action span,
body.dark-mode .available-preview-card span {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .glance-count,
body.dark-mode .home-mini-action,
body.dark-mode .available-preview-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}
/* WEEKLY BOOKING CALENDAR */

.week-selector {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.week-day-card {
  min-width: 74px;
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--gunmetal);
  cursor: pointer;
}

.week-day-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}

.week-day-card span {
  font-size: 20px;
  font-weight: 900;
}

.week-day-card.active {
  background: var(--gold);
  color: var(--gunmetal);
  border-color: var(--gold);
}

.time-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.time-card {
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--gunmetal);
  text-align: left;
  cursor: pointer;
}

.time-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
}

.time-card span {
  color: var(--light-gunmetal);
  font-size: 12px;
  line-height: 1.3;
}

body.dark-mode .week-day-card,
body.dark-mode .time-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .week-day-card.active {
  background: var(--gold);
  color: var(--gunmetal);
}

body.dark-mode .time-card span {
  color: rgba(255, 255, 240, 0.68);
}
/* SPORT SELECTION */

.sport-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.sport-choice-card {
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 18px 14px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--gunmetal);
  text-align: left;
  cursor: pointer;
}

.sport-choice-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}

.sport-choice-card span {
  color: var(--light-gunmetal);
  font-size: 12px;
  line-height: 1.3;
}

.sport-choice-card.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gunmetal);
}

.sport-choice-card.active span {
  color: rgba(31, 38, 42, 0.72);
}

.booking-next-button {
  margin-top: 18px;
}

body.dark-mode .sport-choice-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .sport-choice-card span {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .sport-choice-card.active {
  background: var(--gold);
  color: var(--gunmetal);
}
/* THREE-ITEM NAV */

.ct-nav {
  grid-template-columns: repeat(3, 1fr);
}
/* INACTIVITY POPUP CLEAR ACTION COLORS */

body.dark-mode .inactivity-card h2 {
  color: var(--gold);
}

.inactivity-actions .primary-button {
  background: #2f6f55;
  border-color: rgba(47, 111, 85, 0.8);
  color: #FFFFF0;
}

.inactivity-actions .primary-button:hover {
  background: #285f49;
}

.inactivity-actions .secondary-button {
  background: rgba(142, 54, 54, 0.08);
  border-color: rgba(142, 54, 54, 0.45);
  color: #8e3636;
}

.inactivity-actions .secondary-button:hover {
  background: rgba(142, 54, 54, 0.14);
}

body.dark-mode .inactivity-actions .primary-button {
  background: #3f7f63;
  border-color: rgba(93, 153, 124, 0.75);
  color: #FFFFF0;
}

body.dark-mode .inactivity-actions .secondary-button {
  background: rgba(190, 92, 92, 0.10);
  border-color: rgba(190, 92, 92, 0.50);
  color: #e29a9a;
}
/* COURT CHOICE + FULL DAY TIME SLOTS */

.court-choice-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.court-choice-button {
  min-width: 112px;
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--gunmetal);
  text-align: left;
  cursor: pointer;
}

.court-choice-button strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.court-choice-button span {
  color: var(--light-gunmetal);
  font-size: 12px;
}

.court-choice-button.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--gunmetal);
}

.court-choice-button.active span {
  color: rgba(31, 38, 42, 0.72);
}

.time-card.available {
  cursor: pointer;
}

.time-card.unavailable {
  opacity: 0.42;
  cursor: not-allowed;
  background: rgba(91, 103, 109, 0.12);
}

.time-card.unavailable strong,
.time-card.unavailable span {
  color: var(--light-gunmetal);
}

.empty-state-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.empty-state-card strong {
  display: block;
  margin-bottom: 5px;
}

.empty-state-card span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

body.dark-mode .court-choice-button,
body.dark-mode .empty-state-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .court-choice-button span,
body.dark-mode .empty-state-card span {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .court-choice-button.active {
  background: var(--gold);
  color: var(--gunmetal);
}

body.dark-mode .time-card.unavailable {
  background: rgba(255, 255, 240, 0.035);
}
.booking-change-button {
  margin-top: 10px;
}
/* BOOKING REVIEW ACTION COLORS */

.booking-confirm-button {
  margin-top: 18px;
  background: #2f6f55;
  border-color: rgba(47, 111, 85, 0.8);
  color: #FFFFF0;
}

.booking-confirm-button:hover {
  background: #285f49;
}

.booking-change-time-button {
  margin-top: 10px;
  background: rgba(142, 54, 54, 0.08);
  border-color: rgba(142, 54, 54, 0.45);
  color: #8e3636;
}

.booking-change-time-button:hover {
  background: rgba(142, 54, 54, 0.14);
}

body.dark-mode .booking-confirm-button {
  background: #3f7f63;
  border-color: rgba(93, 153, 124, 0.75);
  color: #FFFFF0;
}

body.dark-mode .booking-change-time-button {
  background: rgba(190, 92, 92, 0.10);
  border-color: rgba(190, 92, 92, 0.50);
  color: #e29a9a;
}
/* LOGIN FADE IN */

.login-enter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.login-enter.login-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ADMIN NAV */

.ct-nav.admin-nav {
  grid-template-columns: repeat(4, 1fr);
}
/* SPORTSTRACK SELECT / DROPDOWN STYLE */

.form-group select {
  width: 100%;
  border: 1px solid rgba(91, 103, 109, 0.28);
  border-radius: 14px;
  padding: 14px 42px 14px 15px;
  background:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%),
    rgba(255, 255, 255, 0.72);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  color: var(--gunmetal);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200, 154, 101, 0.14);
}

body.dark-mode .form-group select {
  background:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%),
    rgba(255, 255, 240, 0.08);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 16px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  border-color: rgba(200, 154, 101, 0.28);
  color: var(--ivory);
}

body.dark-mode .form-group select option {
  background: var(--gunmetal);
  color: var(--ivory);
}
/* MANAGE COURTS */

.manage-court-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.manage-court-card strong {
  display: block;
  margin-bottom: 5px;
}

.manage-court-card span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

.manage-court-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.court-admin-status {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
}

.court-admin-status.active {
  background: rgba(47, 111, 85, 0.12);
  color: #2f6f55;
}

.court-admin-status.inactive {
  background: rgba(142, 54, 54, 0.10);
  color: #8e3636;
}

.small-admin-button {
  border: 1px solid rgba(200, 154, 101, 0.38);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--gunmetal);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

body.dark-mode .manage-court-card,
body.dark-mode .small-admin-button {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .court-admin-status.active {
  background: rgba(63, 127, 99, 0.16);
  color: #8fc9ad;
}

body.dark-mode .court-admin-status.inactive {
  background: rgba(190, 92, 92, 0.12);
  color: #e29a9a;
}
/* DELETE COURT BUTTON */

.delete-court-button {
  border-color: rgba(142, 54, 54, 0.45);
  background: rgba(142, 54, 54, 0.08);
  color: #8e3636;
}

.delete-court-button:hover {
  background: rgba(142, 54, 54, 0.14);
}

body.dark-mode .delete-court-button {
  border-color: rgba(190, 92, 92, 0.50);
  background: rgba(190, 92, 92, 0.10);
  color: #e29a9a;
}
/* SPORTSTRACK MODAL */

.ct-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(31, 38, 42, 0.68);
  backdrop-filter: blur(8px);
}

.ct-modal-card {
  width: 100%;
  max-width: 430px;
  border-radius: var(--radius-large);
  border: 1px solid rgba(200, 154, 101, 0.45);
  background: var(--ivory);
  box-shadow: var(--shadow-soft);
  padding: 30px;
  text-align: center;
}

.ct-modal-kicker {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ct-modal-card h2 {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 34px;
  color: var(--gunmetal);
}

.ct-modal-text {
  margin: 0 0 24px;
  color: var(--light-gunmetal);
  font-size: 14px;
  line-height: 1.5;
}

.ct-modal-actions {
  display: grid;
  gap: 12px;
}

.modal-safe-button,
.modal-danger-button {
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.modal-safe-button {
  border: 1px solid rgba(47, 111, 85, 0.55);
  background: rgba(47, 111, 85, 0.10);
  color: #2f6f55;
}

.modal-danger-button {
  border: 1px solid rgba(142, 54, 54, 0.50);
  background: rgba(142, 54, 54, 0.10);
  color: #8e3636;
}

body.dark-mode .ct-modal-card {
  background: linear-gradient(145deg, rgba(31, 38, 42, 0.98), rgba(18, 24, 27, 0.98));
  border-color: rgba(200, 154, 101, 0.38);
}

body.dark-mode .ct-modal-card h2 {
  color: var(--gold);
}

body.dark-mode .ct-modal-text {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .modal-safe-button {
  border-color: rgba(93, 153, 124, 0.75);
  background: rgba(63, 127, 99, 0.16);
  color: #8fc9ad;
}

body.dark-mode .modal-danger-button {
  border-color: rgba(190, 92, 92, 0.50);
  background: rgba(190, 92, 92, 0.12);
  color: #e29a9a;
}
/* EDIT COURT BUTTON */

.edit-court-button {
  border-color: rgba(200, 154, 101, 0.45);
  background: rgba(200, 154, 101, 0.10);
  color: #8a5e2f;
}

.edit-court-button:hover {
  background: rgba(200, 154, 101, 0.16);
}

.modal-form-group {
  text-align: left;
  margin-bottom: 16px;
}

body.dark-mode .edit-court-button {
  border-color: rgba(200, 154, 101, 0.45);
  background: rgba(200, 154, 101, 0.12);
  color: var(--gold);
}
/* MY BOOKINGS */

.booking-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.booking-card strong {
  display: block;
  margin-bottom: 5px;
}

.booking-card span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

body.dark-mode .booking-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .booking-card span {
  color: rgba(255, 255, 240, 0.68);
}
/* PAST TIME SLOTS */

.time-card.past {
  opacity: 0.34;
  cursor: not-allowed;
}

.time-card.past span {
  color: var(--light-gunmetal);
}

body.dark-mode .time-card.past {
  background: rgba(255, 255, 240, 0.03);
}

body.dark-mode .time-card.past span {
  color: rgba(255, 255, 240, 0.45);
}
/* SECURITY / HOTEL VIEW */

.ct-nav.security-nav {
  grid-template-columns: repeat(2, 1fr);
}

.ct-nav.hotel-nav {
  grid-template-columns: repeat(3, 1fr);
}

.security-booking-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.security-booking-card strong {
  display: block;
  margin-bottom: 5px;
}

.security-booking-card span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

.security-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(47, 111, 85, 0.12);
  color: #2f6f55 !important;
  font-size: 11px !important;
  font-weight: 900;
}

body.dark-mode .security-booking-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .security-booking-card span {
  color: rgba(255, 255, 240, 0.68);
}

body.dark-mode .security-status-pill {
  background: rgba(63, 127, 99, 0.16);
  color: #8fc9ad !important;
}
/* SECURITY ARRIVAL STATUS */

.security-card-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.security-status-pill.arrived {
  background: rgba(200, 154, 101, 0.16);
  color: #8a5e2f !important;
}

body.dark-mode .security-status-pill.arrived {
  background: rgba(200, 154, 101, 0.16);
  color: var(--gold) !important;
}
/* SECURITY CARD LAYOUT FIX */

.security-booking-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}

.security-booking-card > div:first-child {
  min-width: 0;
}

.security-booking-card strong {
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
  word-break: normal;
}

.security-booking-card > div:first-child span {
  display: block;
  line-height: 1.35;
}

.security-card-actions {
  min-width: 112px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.security-card-actions .small-admin-button {
  white-space: normal;
  text-align: center;
  line-height: 1.15;
  min-width: 104px;
}

@media (max-width: 520px) {
  .security-booking-card {
    grid-template-columns: 1fr;
  }

  .security-card-actions {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .security-card-actions .small-admin-button {
    width: 100%;
  }

  .security-status-pill {
    width: fit-content;
  }
}
/* SECURITY NO SHOW STATUS */

.no-show-button {
  border-color: rgba(142, 54, 54, 0.45);
  background: rgba(142, 54, 54, 0.08);
  color: #8e3636;
}

.no-show-button:hover {
  background: rgba(142, 54, 54, 0.14);
}

.security-status-pill.no-show {
  background: rgba(142, 54, 54, 0.10);
  color: #8e3636 !important;
}

body.dark-mode .no-show-button {
  border-color: rgba(190, 92, 92, 0.50);
  background: rgba(190, 92, 92, 0.10);
  color: #e29a9a;
}

body.dark-mode .security-status-pill.no-show {
  background: rgba(190, 92, 92, 0.12);
  color: #e29a9a !important;
}
/* SECURITY SUMMARY */

.security-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.security-summary-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px 10px;
  background: rgba(255, 255, 255, 0.38);
  text-align: center;
}

.security-summary-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 26px;
  line-height: 1;
}

.security-summary-card span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.security-summary-card.expected strong,
.security-summary-card.expected span {
  color: #2f6f55;
}

.security-summary-card.arrived strong,
.security-summary-card.arrived span {
  color: #8a5e2f;
}

.security-summary-card.no-show strong,
.security-summary-card.no-show span {
  color: #8e3636;
}

body.dark-mode .security-summary-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .security-summary-card.expected strong,
body.dark-mode .security-summary-card.expected span {
  color: #8fc9ad;
}

body.dark-mode .security-summary-card.arrived strong,
body.dark-mode .security-summary-card.arrived span {
  color: var(--gold);
}

body.dark-mode .security-summary-card.no-show strong,
body.dark-mode .security-summary-card.no-show span {
  color: #e29a9a;
}
/* COURTTRACK HOME REDESIGN */

.home-primary-panel {
  display: grid;
  gap: 14px;
}

.home-main-book-button {
  width: 100%;
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 22px;
  padding: 22px;
  background: var(--gunmetal);
  color: var(--ivory);
  text-align: left;
  cursor: pointer;
}

.home-main-book-button strong {
  display: block;
  margin-bottom: 8px;
  font-size: 22px;
}

.home-main-book-button span {
  color: rgba(255, 255, 240, 0.72);
  font-size: 14px;
  line-height: 1.4;
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.home-quick-card {
  border: 1px solid rgba(200, 154, 101, 0.32);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
  color: var(--gunmetal);
  text-align: left;
  cursor: pointer;
}

.home-quick-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.home-quick-card span {
  color: var(--light-gunmetal);
  font-size: 12px;
  line-height: 1.35;
}

.home-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.home-status-card {
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px 10px;
  background: rgba(255, 255, 255, 0.38);
  text-align: center;
}

.home-status-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 26px;
  line-height: 1;
}

.home-status-card span {
  color: var(--light-gunmetal);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.dark-mode .home-main-book-button {
  background: rgba(200, 154, 101, 0.16);
  border-color: rgba(200, 154, 101, 0.42);
}

body.dark-mode .home-quick-card,
body.dark-mode .home-status-card {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
  color: var(--ivory);
}

body.dark-mode .home-quick-card span,
body.dark-mode .home-status-card span {
  color: rgba(255, 255, 240, 0.68);
}
/* HOME MAIN COURT ICON */

.home-main-book-button {
  display: flex;
  align-items: center;
  gap: 16px;
}

.home-main-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
}

.home-main-book-button div {
  min-width: 0;
}
/* GLOBAL PANEL BREATHING ROOM */

.dashboard-shell > .panel + .panel {
  margin-top: 22px;
}

.dashboard-shell > .hero-panel + .panel {
  margin-top: 0;
}

.home-primary-panel {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .dashboard-shell > .panel + .panel {
    margin-top: 18px;
  }
}
/* AVAILABLE COURTS PAGE */

.available-court-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(200, 154, 101, 0.28);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.38);
}

.available-court-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.available-court-row strong {
  display: block;
  margin-bottom: 5px;
}

.available-court-row span {
  color: var(--light-gunmetal);
  font-size: 13px;
}

body.dark-mode .available-court-row {
  background: rgba(255, 255, 240, 0.045);
  border-color: rgba(200, 154, 101, 0.34);
}

body.dark-mode .available-court-row span {
  color: rgba(255, 255, 240, 0.68);
}
/* ADMIN THREE-ITEM NAV */

.ct-nav.admin-nav {
  grid-template-columns: repeat(3, 1fr);
}
/* ADMIN BOOKINGS SPACING */

.admin-bookings-list-panel {
  margin-top: 22px !important;
}
/* ADMIN BOOKING ACTIONS */

.admin-booking-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-booking-charge-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  margin-top: 10px !important;
}

.admin-booking-charge-summary span {
  margin: 0 !important;

  font-size: 11px !important;
  font-weight: 800 !important;
}

.admin-booking-charge-summary strong {
  margin: 0 !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
}

.admin-booking-charge-list {
  display: grid !important;
  gap: 6px !important;

  margin-top: 8px !important;
}

.admin-booking-charge-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;
  gap: 10px !important;

  padding: 8px 10px !important;

  border: 1px solid rgba(200, 154, 101, 0.22) !important;
  border-radius: 10px !important;

  background: rgba(255, 255, 255, 0.30) !important;
}

.admin-booking-charge-copy {
  min-width: 0;
}

.admin-booking-charge-copy strong {
  margin: 0 0 2px !important;

  font-size: 11px !important;
  line-height: 1.2 !important;
}

.admin-booking-charge-copy span {
  margin: 0 !important;

  font-size: 11px !important;
  line-height: 1.25 !important;
}

.admin-void-charge-button {
  min-width: 58px !important;
  min-height: 32px !important;

  padding: 0 10px !important;

  border: 1px solid rgba(160, 62, 62, 0.48) !important;
  border-radius: 10px !important;

  background: rgba(160, 62, 62, 0.06) !important;
  color: #9b3333 !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
}

.admin-void-charge-button:hover {
  background: rgba(160, 62, 62, 0.12) !important;
}

.admin-void-charge-button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

body.dark-mode .admin-booking-charge-row {
  background: #20282b !important;
  border-color: rgba(200, 154, 101, 0.22) !important;
}

body.dark-mode .admin-void-charge-button {
  background: rgba(194, 74, 64, 0.025) !important;
  color: #e7a3a3 !important;
  border-color: rgba(220, 110, 110, 0.48) !important;
}

body.dark-mode .admin-void-charge-button:hover {
  background: rgba(194, 74, 64, 0.07) !important;
}

.admin-cancel-booking-button {
  border: 1px solid rgba(160, 62, 62, 0.55);
  background: rgba(160, 62, 62, 0.08);
  color: #a03e3e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-cancel-booking-button:hover {
  background: rgba(160, 62, 62, 0.16);
}

body.dark-mode .admin-cancel-booking-button {
  border-color: rgba(220, 110, 110, 0.42);
  background: rgba(220, 110, 110, 0.08);
  color: #e08f8f;
}

body.dark-mode .admin-cancel-booking-button:hover {
  background: rgba(220, 110, 110, 0.15);
}

@media (max-width: 520px) {
  .admin-booking-card {
    align-items: flex-start;
  }

  .admin-booking-actions {
    justify-content: flex-start;
    width: 100%;
  }
}
/* BOOKING RESIDENT DETAILS */

.booking-resident-line {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gunmetal);
}

body.dark-mode .booking-resident-line {
  color: rgba(255, 255, 240, 0.86);
}
/* LOGIN ACTION ROW */

.login-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.login-action-row button {
  width: 100%;
  min-height: 56px;
}

.signup-login-button {
  margin-top: 0;
}

@media (max-width: 380px) {
  .login-action-row {
    grid-template-columns: 1fr;
  }
}
/* COURTTRACK LOGIN - CLEAN ATTENDTRACK-STYLE HEADER */

.auth-card .login-topline {
  position: relative;
  padding-bottom: 24px;
  margin-bottom: 70px;
  border-bottom: 1px solid rgba(200, 154, 101, 0.24);
}

/* Small theme toggle below separator */
.auth-card .login-topline button {
  position: absolute !important;
  right: 0 !important;
  bottom: -43px !important;

  width: 46px !important;
  height: 24px !important;
  min-width: 46px !important;
  min-height: 24px !important;
  max-width: 46px !important;
  max-height: 24px !important;

  padding: 3px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(200, 154, 101, 0.65) !important;
  background: rgba(31, 38, 42, 0.12) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
/* LOGIN / SIGNUP BUTTON ROW - CLEAN */

.login-action-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 14px;
  margin-top: 22px;
  align-items: center;
}

.login-action-row .primary-button,
.login-action-row .secondary-button {
  width: 100%;
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  margin: 0;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  border-radius: 18px;
  background: var(--gunmetal);
  color: var(--ivory);
  border: 1px solid rgba(200, 154, 101, 0.48);
}

body.dark-mode .login-action-row .primary-button,
body.dark-mode .login-action-row .secondary-button {
  background: rgba(255, 255, 240, 0.035);
  color: var(--ivory);
  border-color: rgba(200, 154, 101, 0.5);
}

.login-action-row .primary-button {
  border-color: rgba(200, 154, 101, 0.72);
}

@media (max-width: 420px) {
  .login-action-row {
    grid-template-columns: 1fr;
  }

  .login-action-row .primary-button,
  .login-action-row .secondary-button {
    height: 52px;
    min-height: 52px;
    max-height: 52px;
  }
}
/* COURTTRACK LOGIN TOGGLE - MATCH ATTENDTRACK */

.auth-card .login-topline .theme-toggle {
  position: absolute !important;
  right: 0 !important;
  bottom: -42px !important;

  width: 44px !important;
  height: 24px !important;
  min-width: 44px !important;
  min-height: 24px !important;
  max-width: 44px !important;
  max-height: 24px !important;

  padding: 3px !important;
  margin: 0 !important;

  border-radius: 999px !important;
  border: 1px solid rgba(200, 154, 101, 0.65) !important;
  background: rgba(255, 255, 240, 0.88) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

.auth-card .login-topline .theme-toggle span {
  display: block !important;

  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;

  margin: 0 !important;
  border-radius: 50% !important;

  background: #1f262a !important;
  transform: translateX(0) !important;
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Dark mode */
body.dark-mode .auth-card .login-topline .theme-toggle {
  background: rgba(31, 38, 42, 0.72) !important;
  border-color: rgba(200, 154, 101, 0.7) !important;
}

body.dark-mode .auth-card .login-topline .theme-toggle span {
  transform: translateX(18px) !important;
  background: #c89a65 !important;
}
/* RESIDENT SIGNUP PAGE - CLEAN V1 */

.signup-card {
  max-width: 620px;
}

.signup-card .auth-copy {
  margin-bottom: 24px;
}

.signup-card .auth-copy p {
  margin: 0 0 10px;
  color: var(--champagne);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signup-card .auth-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 7vw, 48px);
  line-height: 0.98;
}

.signup-card .auth-copy span {
  display: block;
  max-width: 460px;
  color: rgba(255, 255, 240, 0.78);
  font-size: 17px;
  line-height: 1.4;
}

.signup-form {
  display: grid;
  gap: 16px;
}

.signup-form label {
  display: grid !important;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ivory);
}

.signup-form input[type="text"],
.signup-form input[type="password"] {
  width: 100%;
  height: 56px;
  border: 1px solid rgba(200, 154, 101, 0.35);
  border-radius: 18px;
  padding: 0 18px;
  font: inherit;
  font-size: 17px;
  color: var(--ivory);
  background: rgba(255, 255, 240, 0.055);
  outline: none;
  box-sizing: border-box;
}

.signup-form input[type="text"]:focus,
.signup-form input[type="password"]:focus {
  border-color: rgba(200, 154, 101, 0.78);
  box-shadow: 0 0 0 3px rgba(200, 154, 101, 0.12);
}

.rules-check-row {
  display: flex !important;
  align-items: center;
  gap: 12px !important;

  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(200, 154, 101, 0.36);
  border-radius: 18px;
  background: rgba(200, 154, 101, 0.07);
}

.rules-check-row input {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
  accent-color: var(--champagne);
}

.rules-check-row span {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.signup-form .primary-button,
.signup-form .secondary-button {
  width: 100%;
  min-height: 54px;
  margin: 0;
}

.signup-form .secondary-button {
  background: transparent;
}

/* Light mode signup */

body:not(.dark-mode) .signup-card .auth-copy span {
  color: var(--light-gunmetal);
}

body:not(.dark-mode) .signup-form label {
  color: var(--gunmetal);
}

body:not(.dark-mode) .signup-form input[type="text"],
body:not(.dark-mode) .signup-form input[type="password"] {
  color: var(--gunmetal);
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(91, 103, 109, 0.28);
}

body:not(.dark-mode) .rules-check-row {
  background: rgba(200, 154, 101, 0.08);
}
/* RESIDENT HEADER CARD - COMPACT */

.resident-header-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-top: 10px;
  padding: 8px 12px 8px 8px;

  border: 1px solid rgba(200, 154, 101, 0.38);
  border-radius: 18px;

  background: rgba(255, 255, 240, 0.04);
  max-width: 360px;
}

.resident-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;
  border: 1px solid rgba(200, 154, 101, 0.6);
  background: rgba(200, 154, 101, 0.16);

  color: var(--ivory);
  font-size: 15px;
  font-weight: 900;
}

.resident-header-card span {
  display: block;
  color: var(--champagne);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resident-header-card strong {
  display: block;
  color: var(--ivory);
  font-size: 15px;
  line-height: 1.15;
}

.resident-header-card small {
  display: block;
  color: rgba(255, 255, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

body:not(.dark-mode) .resident-header-card {
  background: rgba(255, 255, 255, 0.42);
}

body:not(.dark-mode) .resident-avatar {
  color: var(--gunmetal);
}

body:not(.dark-mode) .resident-header-card strong {
  color: var(--gunmetal);
}

body:not(.dark-mode) .resident-header-card small {
  color: var(--light-gunmetal);
}
/* COURTTRACK COMPACT DASHBOARD SPACING */

.dashboard-shell {
  padding: 28px !important;
}

.dashboard-header,
.app-header,
.ct-header {
  margin-bottom: 22px !important;
}

.dashboard-header-top,
.app-header-top,
.ct-header-top {
  gap: 16px !important;
}

.ct-nav {
  margin-top: 18px !important;
  margin-bottom: 24px !important;
}

.panel,
.hero-panel {
  padding: 24px !important;
}

.dashboard-shell > .panel + .panel,
.dashboard-shell > .hero-panel + .panel {
  margin-top: 18px !important;
}

@media (max-width: 560px) {
  .dashboard-shell {
    padding: 20px !important;
  }

  .panel,
  .hero-panel {
    padding: 20px !important;
  }
}
/* RESIDENT HOME HERO - FRIENDLY SIZE */

.home-hero-panel {
  padding: 20px 24px !important;
}

.home-hero-panel p {
  margin-bottom: 6px !important;
  font-size: 10px !important;
}

.home-hero-panel h1 {
  max-width: 100% !important;
  font-size: clamp(20px, 2.8vw, 26px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  white-space: normal !important;
}
/* DASHBOARD ROLE + RESIDENT CARD STACK */

.dashboard-role-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.resident-header-card {
  margin-top: 0 !important;
}
/* HOME HERO TITLE - COMPACT */

.home-hero-panel {
  padding: 18px 22px !important;
}

.home-hero-panel p {
  margin-bottom: 6px !important;
  font-size: 13px !important;
}

.home-hero-panel h1 {
  max-width: 100% !important;
  font-size: clamp(17px, 2.2vw, 21px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  .home-hero-panel h1 {
    font-size: 18px !important;
    white-space: normal !important;
  }
}

/* HOME HERO TITLE - SMALLER DAILY-USE SIZE */

.home-hero-panel {
  padding: 18px 22px !important;
}

.home-hero-panel p {
  margin-bottom: 5px !important;
  font-size: 12px !important;
}

.home-hero-panel h1 {
  max-width: 100% !important;
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

@media (max-width: 560px) {
  .home-hero-panel h1 {
    white-space: normal !important;
    font-size: 18px !important;
  }
}

/* HOME HERO TITLE FINAL SMALLER */

.home-hero-panel h1 {
  font-size: clamp(15px, 1.8vw, 18px) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* DASHBOARD HEADER CONTROLS - LOCKED COMPACT LAYOUT */

.dashboard-control-grid {
  width: 100% !important;
  display: grid !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

.dashboard-control-top,
.dashboard-control-bottom {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  column-gap: 18px !important;
}

.dashboard-control-top .role-pill {
  justify-self: start !important;
}

.dashboard-control-top .theme-toggle {
  justify-self: end !important;
}

.dashboard-control-bottom .resident-header-card {
  justify-self: start !important;
  margin: 0 !important;
}

.dashboard-control-bottom .logout-button {
  justify-self: end !important;
  align-self: center !important;

  width: 144px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 560px) {
  .dashboard-control-top,
  .dashboard-control-bottom {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-control-top .theme-toggle,
  .dashboard-control-bottom .logout-button {
    justify-self: start !important;
  }

  .dashboard-control-bottom .logout-button {
    width: 100% !important;
  }
}
/* LOGOUT ALIGNMENT WITH RESIDENT CARD */

.dashboard-control-bottom {
  align-items: end !important;
}

.dashboard-control-bottom .logout-button {
  align-self: end !important;
}
/* GLOBAL HERO PANELS - PREMIUM DAILY-USE SIZE */

.hero-panel {
  padding: 20px 24px !important;
}

.hero-panel p {
  margin-bottom: 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

.hero-panel h1 {
  max-width: 100% !important;

  font-size: clamp(18px, 2.1vw, 24px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0.005em !important;

  text-transform: none !important;
  white-space: normal !important;
  text-wrap: balance;
}

/* Keep Resident Home even calmer */

.home-hero-panel h1 {
  font-size: clamp(16px, 1.9vw, 21px) !important;
  line-height: 1.18 !important;
  text-transform: none !important;
}

/* Slightly tighter panels after navigation */

.ct-nav + .hero-panel,
.ct-nav + section.hero-panel {
  margin-top: 18px !important;
}

@media (min-width: 720px) {
  .hero-panel h1 {
    white-space: nowrap !important;
  }

  .hero-panel h1 br {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero-panel {
    padding: 18px 20px !important;
  }

  .hero-panel h1 {
    font-size: 18px !important;
    white-space: normal !important;
  }

  .home-hero-panel h1 {
    font-size: 17px !important;
  }
}
/* DPRC RULES SIGNUP FLOW */

.rules-box {
  display: grid;
  gap: 10px;
}

.rules-view-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 16px;
  background: rgba(200, 154, 101, 0.08);
  color: var(--ivory);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

body:not(.dark-mode) .rules-view-button {
  color: var(--gunmetal);
  background: rgba(200, 154, 101, 0.09);
}

.rules-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: grid;
  place-items: center;

  padding: 22px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.rules-modal {
  width: min(100%, 560px);
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 28px;
  padding: 28px;
  background: var(--ivory);
  color: var(--gunmetal);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

body.dark-mode .rules-modal {
  background: #1f262a;
  color: var(--ivory);
}

.rules-modal h2 {
  margin: 0 0 18px;
  color: var(--champagne) !important;
  font-size: 22px;
  line-height: 1.2;
}

.rules-modal-content {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
  line-height: 1.5;
}

.rules-modal-content p {
  margin: 0;
}

.rules-modal-content ul {
  margin: 0;
  padding-left: 20px;
}

.rules-modal-content li {
  margin-bottom: 8px;
}
/* SIGNUP STATUS MODAL */

.signup-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;

  display: grid;
  place-items: center;

  padding: 22px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.signup-modal {
  width: min(100%, 460px);
  border: 1px solid rgba(200, 154, 101, 0.42);
  border-radius: 28px;
  padding: 28px;
  background: var(--ivory);
  color: var(--gunmetal);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

body.dark-mode .signup-modal {
  background: #1f262a;
  color: var(--ivory);
}

.signup-modal h2 {
  margin: 0 0 12px;
  color: var(--champagne) !important;
  font-size: 22px;
  line-height: 1.2;
}

.signup-modal p {
  margin: 0 0 22px;
  line-height: 1.5;
}
/* SIGNUP MODAL GOLD TITLE - FINAL */

.signup-modal .signup-modal-title {
  color: #c89a65 !important;
  margin: 0 0 12px !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}
/* COURTTRACK TYPOGRAPHY PASS V1 - CALMER PREMIUM SCALE */

/* General working-screen hero panels */

.hero-panel {
  padding: 18px 22px !important;
}

.hero-panel p {
  margin-bottom: 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  font-weight: 900 !important;
}

.hero-panel h1 {
  max-width: 100% !important;
  font-size: clamp(17px, 1.7vw, 22px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.005em !important;
  white-space: normal !important;
}

/* Resident home hero even calmer */

.home-hero-panel h1 {
  font-size: clamp(16px, 1.55vw, 19px) !important;
  line-height: 1.2 !important;
}

/* Signup page: premium, not billboard */

.signup-card .auth-copy {
  margin-bottom: 22px !important;
}

.signup-card .auth-copy p {
  font-size: 12px !important;
  letter-spacing: 0.09em !important;
  margin-bottom: 8px !important;
}

.signup-card .auth-copy h1 {
  font-size: clamp(30px, 4.6vw, 40px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 10px !important;
}

.signup-card .auth-copy span {
  font-size: 16px !important;
  line-height: 1.42 !important;
  max-width: 480px !important;
}

/* Form typography and input scale */

.signup-form {
  gap: 14px !important;
}

.signup-form label {
  font-size: 14px !important;
  gap: 7px !important;
}

.signup-form input[type="text"],
.signup-form input[type="password"] {
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  padding: 0 16px !important;
}

.signup-form input::placeholder {
  font-size: 15px !important;
}

/* Panel headings */

.panel h3,
.home-primary-panel h3,
.home-status-panel h3 {
  font-size: 15px !important;
  letter-spacing: 0.07em !important;
  line-height: 1.2 !important;
}

/* Cards and quick actions */

.action-card strong,
.home-quick-card strong,
.home-main-book-button strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.action-card span,
.home-quick-card span,
.home-main-book-button span {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Main Book a Court card */

.home-main-book-button {
  min-height: 92px !important;
  padding: 16px 18px !important;
}

.home-main-icon {
  width: 42px !important;
  height: 42px !important;
}

/* Buttons: calmer daily-use size */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button {
  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Navigation */

.ct-nav-item {
  font-size: 14px !important;
}

/* Status number cards */

.home-status-card strong {
  font-size: 24px !important;
  line-height: 1 !important;
}

.home-status-card span {
  font-size: 12px !important;
}

/* Security/Admin booking cards */

.security-booking-card strong {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.security-booking-card span {
  font-size: 13px !important;
}

/* Modal text scale */

.signup-modal .signup-modal-title,
.rules-modal h2 {
  font-size: 21px !important;
  line-height: 1.2 !important;
}

.signup-modal p,
.rules-modal-content {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

@media (max-width: 560px) {
  .hero-panel h1 {
    font-size: 17px !important;
  }

  .signup-card .auth-copy h1 {
    font-size: 32px !important;
  }

  .signup-card .auth-copy span {
    font-size: 15px !important;
  }

  .action-card strong,
  .home-quick-card strong,
  .home-main-book-button strong {
    font-size: 17px !important;
  }
}
/* SIGNUP TYPOGRAPHY FINE TUNE */

.signup-card .auth-copy {
  margin-bottom: 20px !important;
}

.signup-card .auth-copy p {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

.signup-card .auth-copy h1 {
  font-size: clamp(26px, 3.6vw, 34px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
}

.signup-card .auth-copy span {
  font-size: 15px !important;
  line-height: 1.42 !important;
  max-width: 520px !important;
}

.signup-form {
  gap: 12px !important;
}

.signup-form label {
  font-size: 13px !important;
  font-weight: 800 !important;
  gap: 6px !important;
}

.signup-form input[type="text"],
.signup-form input[type="password"] {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 15px !important;
  font-size: 15px !important;
  padding: 0 15px !important;
}

.signup-form input::placeholder {
  font-size: 14px !important;
  font-weight: 700 !important;
  opacity: 0.72;
}

.rules-view-button {
  min-height: 48px !important;
  font-size: 14px !important;
}

.rules-check-row {
  padding: 14px !important;
}

.rules-check-row span {
  font-size: 14px !important;
}
/* RESIDENT ACCOUNT STATUS */

.resident-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 6px;
  width: fit-content;

  border-radius: 999px;
  padding: 4px 9px;

  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resident-status-pill.approved {
  color: #7bd6a0;
  background: rgba(80, 180, 120, 0.13);
  border: 1px solid rgba(80, 180, 120, 0.28);
}

.resident-status-pill.pending {
  color: var(--champagne);
  background: rgba(200, 154, 101, 0.12);
  border: 1px solid rgba(200, 154, 101, 0.28);
}

body:not(.dark-mode) .resident-status-pill.approved {
  color: #216a3f;
  background: rgba(80, 180, 120, 0.12);
}

body:not(.dark-mode) .resident-status-pill.pending {
  color: #8a6338;
}
/* RESIDENT HEADER CARD - SIMPLE IDENTITY ONLY */

.resident-header-card strong {
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.resident-header-card small {
  margin-top: 2px !important;
  font-size: 13px !important;
}
/* RESIDENT HEADER CARD LABEL RESTORE */

.resident-header-card span {
  display: block !important;
  color: var(--champagne);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 3px;
}
/* PENDING STATUS - WARNING STYLE */

.resident-status-pill.pending {
  color: #f1a5a5 !important;
  background: rgba(160, 62, 62, 0.12) !important;
  border: 1px solid rgba(220, 110, 110, 0.5) !important;
  box-shadow: none !important;
}

body.dark-mode .resident-status-pill.pending {
  color: #f1a5a5 !important;
  background: rgba(160, 62, 62, 0.12) !important;
  border-color: rgba(220, 110, 110, 0.5) !important;
}

body:not(.dark-mode) .resident-status-pill.pending {
  color: #9b3333 !important;
  background: rgba(160, 62, 62, 0.08) !important;
  border-color: rgba(160, 62, 62, 0.35) !important;
}
/* BOOKING DATE CARDS - CALMER PREMIUM STYLE */

.date-card,
.day-card,
.booking-day-card {
  min-width: 78px !important;
  min-height: 74px !important;
  border-radius: 18px !important;
  padding: 12px 10px !important;
}

.date-card strong,
.day-card strong,
.booking-day-card strong {
  font-size: 22px !important;
  line-height: 1 !important;
}

.date-card span,
.day-card span,
.booking-day-card span {
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}
/* BOOKING DATE SELECTOR - PREMIUM HORIZONTAL SCROLL */

.date-selector,
.booking-date-row,
.week-selector,
.date-strip {
  display: flex !important;
  gap: 10px !important;

  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 10px !important;

  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(200, 154, 101, 0.45) rgba(255, 255, 240, 0.08);
}

.date-selector::-webkit-scrollbar,
.booking-date-row::-webkit-scrollbar,
.week-selector::-webkit-scrollbar,
.date-strip::-webkit-scrollbar {
  height: 6px;
}

.date-selector::-webkit-scrollbar-track,
.booking-date-row::-webkit-scrollbar-track,
.week-selector::-webkit-scrollbar-track,
.date-strip::-webkit-scrollbar-track {
  background: rgba(255, 255, 240, 0.08);
  border-radius: 999px;
}

.date-selector::-webkit-scrollbar-thumb,
.booking-date-row::-webkit-scrollbar-thumb,
.week-selector::-webkit-scrollbar-thumb,
.date-strip::-webkit-scrollbar-thumb {
  background: rgba(200, 154, 101, 0.45);
  border-radius: 999px;
}

.date-card,
.day-card,
.booking-day-card {
  flex: 0 0 82px !important;
  width: 82px !important;
  min-width: 82px !important;
  min-height: 74px !important;

  border-radius: 18px !important;
  padding: 11px 8px !important;

  scroll-snap-align: start;
  text-align: center !important;
}

.date-card strong,
.day-card strong,
.booking-day-card strong {
  font-size: 21px !important;
  line-height: 1 !important;
}

.date-card span,
.day-card span,
.booking-day-card span {
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}
/* COURT CHOICE CARDS - CLEANER */

.court-choice-card {
  min-height: 62px !important;
  padding: 14px 18px !important;
}

.court-choice-card strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.court-choice-card span {
  display: none !important;
}
/* TIME SLOT GRID - COMPACT PREMIUM */

.time-slot-grid,
.booking-time-grid,
.time-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.time-slot-card,
.time-card,
.booking-time-card {
  min-height: 68px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

.time-slot-card strong,
.time-card strong,
.booking-time-card strong {
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.time-slot-card span,
.time-card span,
.booking-time-card span {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Smaller screens */

@media (max-width: 620px) {
  .time-slot-grid,
  .booking-time-grid,
  .time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* TIME CARD GRID - FINAL COMPACT LAYOUT */

.time-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.time-card-grid .action-card,
.time-card-grid .time-slot-card,
.time-card-grid .time-card,
.time-card-grid .booking-time-card {
  width: 100% !important;
  min-height: 66px !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
}

.time-card-grid .action-card strong,
.time-card-grid .time-slot-card strong,
.time-card-grid .time-card strong,
.time-card-grid .booking-time-card strong {
  font-size: 17px !important;
  line-height: 1.1 !important;
}

.time-card-grid .action-card span,
.time-card-grid .time-slot-card span,
.time-card-grid .time-card span,
.time-card-grid .booking-time-card span {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

@media (max-width: 720px) {
  .time-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .time-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* BOOKING REVIEW - COMPACT SUMMARY */

.booking-review-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.booking-review-grid .action-card {
  min-height: 74px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
}

.booking-review-grid .action-card strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

.booking-review-grid .action-card span {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.booking-review-actions {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin-top: 14px !important;
}

.booking-review-actions .booking-confirm-button,
.booking-review-actions .booking-change-time-button {
  margin-top: 0 !important;
}

.booking-review-actions .booking-change-time-button {
  min-width: 140px !important;
}

@media (max-width: 520px) {
  .booking-review-grid {
    grid-template-columns: 1fr !important;
  }

  .booking-review-actions {
    grid-template-columns: 1fr !important;
  }

  .booking-review-actions .booking-change-time-button {
    min-width: 0 !important;
  }
}
/* BOOKING CONFIRMED ACTIONS ALIGNMENT */

.booking-review-actions {
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.booking-review-actions .primary-button,
.booking-review-actions .secondary-button {
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 520px) {
  .booking-review-actions {
    grid-template-columns: 1fr !important;
  }
}
/* RESIDENT MY BOOKINGS - PREMIUM CARD */

.resident-booking-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 16px 18px !important;
  border-radius: 18px !important;
}

.resident-booking-copy {
  min-width: 0;
}

.resident-booking-copy strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px !important;
  line-height: 1.2;
}

.resident-booking-copy span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px !important;
  line-height: 1.3;
}

.resident-booking-copy em {
  display: inline-flex;
  width: fit-content;

  border-radius: 999px;
  padding: 4px 9px;

  color: #7bd6a0;
  background: rgba(80, 180, 120, 0.13);
  border: 1px solid rgba(80, 180, 120, 0.28);

  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resident-booking-cancel {
  align-self: center;
  white-space: nowrap;
}

body:not(.dark-mode) .resident-booking-copy em {
  color: #216a3f;
  background: rgba(80, 180, 120, 0.12);
}

@media (max-width: 520px) {
  .resident-booking-card {
    grid-template-columns: 1fr !important;
  }

  .resident-booking-cancel {
    width: 100%;
  }
}
/* SECURITY BOOKING CARDS - PREMIUM VERIFICATION VIEW */

.security-booking-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;

  padding: 16px 18px !important;
  border-radius: 18px !important;
}

.security-booking-card strong {
  display: block;
  margin-bottom: 5px;
  font-size: 16px !important;
  line-height: 1.2;
}

.security-booking-card span {
  display: block;
  font-size: 13px !important;
  line-height: 1.3;
}

.security-booking-card .booking-resident-line {
  margin-top: 6px !important;
  color: rgba(255, 255, 240, 0.86) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.security-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.security-card-actions .small-admin-button {
  min-height: 34px !important;
  padding: 8px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
}

body:not(.dark-mode) .security-booking-card .booking-resident-line {
  color: var(--gunmetal) !important;
}

@media (max-width: 620px) {
  .security-booking-card {
    grid-template-columns: 1fr !important;
  }

  .security-card-actions {
    justify-content: flex-start !important;
  }
}
/* ==================================================
   COURTTRACK CP57 / SPORTSTRACK STANDARD UPGRADE — PHASE 1
   Foundation pass only. No redesign. No workflow changes.
   ================================================== */

:root {
  --ivory: #fffff0;
  --soft-ivory: #fffff0;
  --gunmetal: #1f262a;
  --light-gunmetal: #5b676d;
  --gold: #c89a65;
  --champagne: #c89a65;

  --success: #3b8552;
  --success-dark: #145631;
  --danger: #c24a40;
  --danger-dark: #80221c;

  --radius-main: 22px;
  --radius-card: 20px;
  --radius-data: 18px;
  --radius-input: 16px;
  --radius-button: 16px;

  --shadow-soft: 0 18px 46px rgba(31, 38, 42, 0.12);
  --shadow-dark: 0 22px 62px rgba(0, 0, 0, 0.32);

  --font-sans: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
}

/* BASE */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family: var(--font-sans);
  color: var(--gunmetal);

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.13), transparent 34%),
    radial-gradient(circle at bottom right, rgba(91, 103, 109, 0.12), transparent 38%),
    linear-gradient(135deg, #fffff0, #f4efe2);
}

body.dark-mode {
  color: var(--ivory);

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.13), transparent 34%),
    radial-gradient(circle at bottom right, rgba(91, 103, 109, 0.18), transparent 40%),
    linear-gradient(135deg, #111719, #1f262a);
}

button,
input,
select {
  font-family: var(--font-sans);
}

button {
  cursor: pointer;
}

#app {
  min-height: 100vh;
}

/* MAIN CANVAS — CP57 STANDARD */

.dashboard {
  min-height: 100vh !important;
  padding: 42px 34px 52px !important;

  display: flex !important;
  justify-content: center !important;

  background: transparent !important;
}

.dashboard-shell {
  width: 100% !important;
  max-width: 900px !important;
  min-height: auto !important;

  margin: 0 auto !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}

/* AUTH / LOGIN CANVAS */

.auth-page {
  min-height: 100vh !important;
  padding: 24px !important;

  display: grid !important;
  place-items: center !important;

  background: transparent !important;
}

.auth-card {
  width: 100% !important;
  max-width: 480px !important;

  padding: 30px !important;

  border-radius: var(--radius-main) !important;
  border: 1px solid rgba(200, 154, 101, 0.34) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.94), rgba(247, 243, 232, 0.88)) !important;

  box-shadow: var(--shadow-soft) !important;
}

body.dark-mode .auth-card {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.96), rgba(17, 23, 25, 0.94)) !important;

  border-color: rgba(200, 154, 101, 0.28) !important;
  box-shadow: var(--shadow-dark) !important;
}

/* HEADER */

.ct-dashboard-header {
  display: grid !important;
  gap: 18px !important;

  margin-bottom: 22px !important;
  padding-bottom: 18px !important;

  border-bottom: 1px solid rgba(200, 154, 101, 0.26) !important;
}

.topbar-logo {
  width: min(390px, 92%) !important;
  max-width: 100% !important;
  height: auto !important;

  display: block !important;
  object-fit: contain !important;
}

.dashboard-control-grid {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.dashboard-control-top,
.dashboard-control-bottom {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.role-pill {
  width: fit-content !important;

  padding: 8px 13px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(200, 154, 101, 0.34) !important;

  background: rgba(255, 255, 240, 0.40) !important;
  color: var(--light-gunmetal) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

body.dark-mode .role-pill {
  background: rgba(255, 255, 240, 0.045) !important;
  color: rgba(255, 255, 240, 0.72) !important;
}

/* THEME TOGGLE — KEEP SMALL AND STABLE */

.theme-toggle {
  width: 46px !important;
  height: 24px !important;
  min-width: 46px !important;
  min-height: 24px !important;

  padding: 3px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border-radius: 999px !important;
  border: 1px solid rgba(200, 154, 101, 0.58) !important;

  background: rgba(255, 255, 240, 0.72) !important;
  box-shadow: none !important;

  overflow: hidden !important;
}

.theme-toggle span {
  display: block !important;

  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;

  border-radius: 999px !important;

  background: var(--gunmetal) !important;

  transform: translateX(0) !important;
  transition:
    transform 0.2s ease,
    background 0.2s ease !important;
}

body.dark-mode .theme-toggle {
  background: rgba(31, 38, 42, 0.72) !important;
}

body.dark-mode .theme-toggle span {
  transform: translateX(20px) !important;
  background: var(--gold) !important;
}

/* NAV — ORYX PREMIUM SQUARE STANDARD */

.ct-nav {
  display: grid !important;
  gap: 6px !important;

  width: 100% !important;

  margin: 0 0 22px !important;
  padding: 6px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background: rgba(255, 255, 240, 0.56) !important;
  backdrop-filter: blur(14px) !important;

  box-shadow:
    0 14px 36px rgba(31, 38, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

.ct-nav:not(.security-nav) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ct-nav.security-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ct-nav-item {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  border: 1px solid transparent !important;

  background: transparent !important;
  color: var(--light-gunmetal) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;

  box-shadow: none !important;
  transform: none !important;
}

.ct-nav-item:hover {
  transform: none !important;
}

.ct-nav-item.active {
  background:
    linear-gradient(160deg, var(--gunmetal), #111719) !important;

  color: var(--ivory) !important;
  border-color: rgba(200, 154, 101, 0.58) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .ct-nav {
  background: rgba(255, 255, 240, 0.045) !important;
  border-color: rgba(200, 154, 101, 0.26) !important;

  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body.dark-mode .ct-nav-item {
  color: rgba(255, 255, 240, 0.72) !important;
}

body.dark-mode .ct-nav-item.active {
  background:
    linear-gradient(160deg, #d8bd83, #9f7336) !important;

  color: var(--gunmetal) !important;
  border-color: rgba(255, 255, 240, 0.34) !important;
}

/* HERO PANELS */

.hero-panel {
  margin-bottom: 18px !important;
  padding: 22px 24px !important;

  border-radius: var(--radius-main) !important;
  border: 1px solid rgba(200, 154, 101, 0.34) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.30), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.86), rgba(247, 243, 232, 0.74)) !important;

  color: var(--gunmetal) !important;
  box-shadow: var(--shadow-soft) !important;
}

.hero-panel p {
  margin: 0 0 8px !important;

  color: var(--gold) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.hero-panel h1 {
  margin: 0 !important;

  color: var(--gunmetal) !important;

  font-family: var(--font-sans) !important;
  font-size: clamp(21px, 3vw, 28px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
  white-space: normal !important;
}

body.dark-mode .hero-panel {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.92), rgba(17, 23, 25, 0.86)) !important;

  color: var(--ivory) !important;
  border-color: rgba(200, 154, 101, 0.26) !important;

  box-shadow: var(--shadow-dark) !important;
}

body.dark-mode .hero-panel h1 {
  color: var(--ivory) !important;
}

/* PANELS / CARDS */

.panel {
  margin-bottom: 18px !important;
  padding: 24px !important;

  border-radius: var(--radius-main) !important;
  border: 1px solid rgba(200, 154, 101, 0.32) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.78), rgba(247, 243, 232, 0.66)) !important;

  box-shadow:
    0 14px 34px rgba(31, 38, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.panel h3 {
  margin: 0 0 18px !important;

  color: var(--gold) !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.dark-mode .panel {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.72), rgba(17, 23, 25, 0.66)) !important;

  border-color: rgba(200, 154, 101, 0.24) !important;

  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* ACTION / DATA CARDS */

.action-card,
.home-quick-card,
.home-status-card,
.sport-choice-card,
.week-day-card,
.court-choice-button,
.time-card,
.booking-card,
.manage-court-card,
.available-court-row,
.security-booking-card,
.empty-state-card {
  border-radius: var(--radius-data) !important;
  border: 1px solid rgba(200, 154, 101, 0.28) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.58), rgba(247, 243, 232, 0.48)) !important;

  color: var(--gunmetal) !important;

  box-shadow:
    0 8px 20px rgba(31, 38, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

.action-card strong,
.home-quick-card strong,
.home-status-card strong,
.sport-choice-card strong,
.week-day-card strong,
.court-choice-button strong,
.time-card strong,
.booking-card strong,
.manage-court-card strong,
.available-court-row strong,
.security-booking-card strong,
.empty-state-card strong {
  color: var(--gunmetal) !important;
  font-weight: 900 !important;
}

.action-card span,
.home-quick-card span,
.home-status-card span,
.sport-choice-card span,
.week-day-card span,
.court-choice-button span,
.time-card span,
.booking-card span,
.manage-court-card span,
.available-court-row span,
.security-booking-card span,
.empty-state-card span {
  color: var(--light-gunmetal) !important;
  font-weight: 650 !important;
}

body.dark-mode .action-card,
body.dark-mode .home-quick-card,
body.dark-mode .home-status-card,
body.dark-mode .sport-choice-card,
body.dark-mode .week-day-card,
body.dark-mode .court-choice-button,
body.dark-mode .time-card,
body.dark-mode .booking-card,
body.dark-mode .manage-court-card,
body.dark-mode .available-court-row,
body.dark-mode .security-booking-card,
body.dark-mode .empty-state-card {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.065), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.70), rgba(17, 23, 25, 0.62)) !important;

  border-color: rgba(200, 154, 101, 0.24) !important;
  color: var(--ivory) !important;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body.dark-mode .action-card strong,
body.dark-mode .home-quick-card strong,
body.dark-mode .home-status-card strong,
body.dark-mode .sport-choice-card strong,
body.dark-mode .week-day-card strong,
body.dark-mode .court-choice-button strong,
body.dark-mode .time-card strong,
body.dark-mode .booking-card strong,
body.dark-mode .manage-court-card strong,
body.dark-mode .available-court-row strong,
body.dark-mode .security-booking-card strong,
body.dark-mode .empty-state-card strong {
  color: var(--ivory) !important;
}

body.dark-mode .action-card span,
body.dark-mode .home-quick-card span,
body.dark-mode .home-status-card span,
body.dark-mode .sport-choice-card span,
body.dark-mode .week-day-card span,
body.dark-mode .court-choice-button span,
body.dark-mode .time-card span,
body.dark-mode .booking-card span,
body.dark-mode .manage-court-card span,
body.dark-mode .available-court-row span,
body.dark-mode .security-booking-card span,
body.dark-mode .empty-state-card span {
  color: rgba(255, 255, 240, 0.68) !important;
}

/* SELECTED / ACTIVE CARDS */

.sport-choice-card.active,
.week-day-card.active,
.court-choice-button.active {
  background:
    linear-gradient(160deg, rgba(200, 154, 101, 0.95), rgba(172, 125, 72, 0.92)) !important;

  border-color: rgba(200, 154, 101, 0.92) !important;
  color: var(--gunmetal) !important;

  box-shadow:
    0 12px 26px rgba(200, 154, 101, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.sport-choice-card.active strong,
.sport-choice-card.active span,
.week-day-card.active strong,
.week-day-card.active span,
.court-choice-button.active strong,
.court-choice-button.active span,
body.dark-mode .sport-choice-card.active strong,
body.dark-mode .sport-choice-card.active span,
body.dark-mode .week-day-card.active strong,
body.dark-mode .week-day-card.active span,
body.dark-mode .court-choice-button.active strong,
body.dark-mode .court-choice-button.active span {
  color: var(--gunmetal) !important;
}

/* BUTTON STANDARD */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button,
.home-main-book-button,
.small-admin-button,
.admin-cancel-booking-button,
.modal-safe-button,
.modal-danger-button {
  border-radius: var(--radius-button) !important;

  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.primary-button {
  min-height: 54px !important;
  padding: 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(200, 154, 101, 0.50) !important;

  background:
    linear-gradient(160deg, var(--gunmetal), #111719) !important;

  color: var(--ivory) !important;
}

.secondary-button,
.logout-button {
  min-height: 50px !important;
  padding: 0 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(200, 154, 101, 0.34) !important;
  background: rgba(255, 255, 240, 0.48) !important;
  color: var(--gunmetal) !important;
}

body.dark-mode .primary-button {
  background:
    linear-gradient(160deg, #d8bd83, #9f7336) !important;

  color: var(--gunmetal) !important;
  border-color: rgba(255, 255, 240, 0.30) !important;
}

body.dark-mode .secondary-button,
body.dark-mode .logout-button {
  background: rgba(255, 255, 240, 0.045) !important;
  color: var(--ivory) !important;
  border-color: rgba(200, 154, 101, 0.28) !important;
}

/* SUCCESS / DANGER ACTIONS */

.booking-confirm-button,
.inactivity-actions .primary-button {
  background:
    linear-gradient(160deg, var(--success), var(--success-dark)) !important;

  color: var(--ivory) !important;
  border-color: rgba(80, 180, 120, 0.52) !important;
}

.delete-court-button,
.no-show-button,
.admin-cancel-booking-button,
.booking-change-time-button,
.inactivity-actions .secondary-button {
  background: rgba(194, 74, 64, 0.08) !important;
  color: #9b3333 !important;
  border-color: rgba(194, 74, 64, 0.38) !important;
}

body.dark-mode .delete-court-button,
body.dark-mode .no-show-button,
body.dark-mode .admin-cancel-booking-button,
body.dark-mode .booking-change-time-button,
body.dark-mode .inactivity-actions .secondary-button {
  background: rgba(194, 74, 64, 0.12) !important;
  color: #f1a5a5 !important;
  border-color: rgba(220, 110, 110, 0.46) !important;
}

/* FORMS / SELECTS */

.form-group label,
.signup-form label,
.modal-form-group label {
  margin-bottom: 8px !important;

  color: var(--gold) !important;

  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select {
  width: 100% !important;
  min-height: 52px !important;

  border-radius: var(--radius-input) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background: rgba(255, 255, 240, 0.62) !important;
  color: var(--gunmetal) !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  outline: none !important;
}

.form-group input:focus,
.form-group select:focus,
.signup-form input[type="text"]:focus,
.signup-form input[type="password"]:focus,
.modal-form-group input:focus,
.modal-form-group select:focus {
  border-color: rgba(200, 154, 101, 0.78) !important;
  box-shadow: 0 0 0 3px rgba(200, 154, 101, 0.12) !important;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .signup-form input[type="text"],
body.dark-mode .signup-form input[type="password"],
body.dark-mode .modal-form-group input,
body.dark-mode .modal-form-group select {
  background: rgba(255, 255, 240, 0.055) !important;
  color: var(--ivory) !important;
  border-color: rgba(200, 154, 101, 0.28) !important;
}

body.dark-mode input::placeholder {
  color: rgba(255, 255, 240, 0.48) !important;
}

/* MODALS — CP57 SHAPE */

.ct-modal-overlay,
.signup-modal-overlay,
.rules-modal-overlay,
.inactivity-overlay {
  background: rgba(8, 10, 9, 0.58) !important;
  backdrop-filter: blur(8px) !important;
}

.ct-modal-card,
.signup-modal,
.rules-modal,
.inactivity-card {
  width: min(480px, calc(100vw - 24px)) !important;

  padding: 26px !important;

  border-radius: var(--radius-main) !important;
  border: 1px solid rgba(200, 154, 101, 0.34) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.98), rgba(17, 23, 25, 0.96)) !important;

  color: var(--ivory) !important;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.ct-modal-kicker {
  color: var(--gold) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
}

.ct-modal-card h2,
.signup-modal .signup-modal-title,
.rules-modal h2,
.inactivity-card h2 {
  margin: 0 0 14px !important;

  color: var(--ivory) !important;

  font-family: var(--font-sans) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

.ct-modal-text,
.signup-modal p,
.rules-modal-content,
.inactivity-card p {
  color: rgba(255, 255, 240, 0.70) !important;

  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

/* MOBILE */

@media (max-width: 720px) {
  .dashboard {
    padding: 24px 18px 34px !important;
  }

  .dashboard-shell {
    max-width: 100% !important;
  }

  .hero-panel,
  .panel {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .home-quick-grid,
  .sport-choice-grid,
  .booking-review-grid {
    grid-template-columns: 1fr !important;
  }

  .home-status-grid,
  .security-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .dashboard {
    padding: 18px 12px 28px !important;
  }

  .auth-page {
    padding: 14px !important;
  }

  .auth-card {
    padding: 24px !important;
    border-radius: 20px !important;
  }

  .dashboard-control-top,
  .dashboard-control-bottom {
    grid-template-columns: 1fr !important;
  }

  .dashboard-control-top .theme-toggle {
    justify-self: start !important;
  }

  .dashboard-control-bottom .logout-button {
    width: 100% !important;
  }

  .ct-nav {
    gap: 4px !important;
    padding: 5px !important;
  }

  .ct-nav-item {
    font-size: 10px !important;
  }

  .hero-panel h1 {
    font-size: 20px !important;
  }

  .home-status-card,
  .security-summary-card {
    padding: 14px 8px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — SELECTED CARD CONTRAST
   Light: gunmetal selected
   Dark: champagne selected
   Applies to sport/date/court choices
   ================================================== */

/* LIGHT MODE SELECTED */

body:not(.dark-mode) button.sport-choice-card.active,
body:not(.dark-mode) button.week-day-card.active,
body:not(.dark-mode) button.court-choice-button.active {
  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.16), transparent 42%),
    linear-gradient(160deg, #1f262a, #111719) !important;

  background-color: #1f262a !important;

  border-color: rgba(200, 154, 101, 0.72) !important;
  color: #fffff0 !important;

  box-shadow:
    0 12px 26px rgba(31, 38, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body:not(.dark-mode) button.sport-choice-card.active strong,
body:not(.dark-mode) button.sport-choice-card.active span,
body:not(.dark-mode) button.week-day-card.active strong,
body:not(.dark-mode) button.week-day-card.active span,
body:not(.dark-mode) button.court-choice-button.active strong,
body:not(.dark-mode) button.court-choice-button.active span {
  color: #fffff0 !important;
}

/* DARK MODE SELECTED */

body.dark-mode button.sport-choice-card.active,
body.dark-mode button.week-day-card.active,
body.dark-mode button.court-choice-button.active {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 240, 0.22), transparent 42%),
    linear-gradient(160deg, #d8bd83, #c89a65) !important;

  background-color: #c89a65 !important;

  border-color: rgba(255, 255, 240, 0.36) !important;
  color: #1f262a !important;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.dark-mode button.sport-choice-card.active strong,
body.dark-mode button.sport-choice-card.active span,
body.dark-mode button.week-day-card.active strong,
body.dark-mode button.week-day-card.active span,
body.dark-mode button.court-choice-button.active strong,
body.dark-mode button.court-choice-button.active span {
  color: #1f262a !important;
}

/* Make inactive date numbers stay readable */

body.dark-mode button.week-day-card:not(.active) strong,
body.dark-mode button.week-day-card:not(.active) span {
  color: #fffff0 !important;
}

body:not(.dark-mode) button.week-day-card:not(.active) strong {
  color: #1f262a !important;
}

body:not(.dark-mode) button.week-day-card:not(.active) span {
  color: #5b676d !important;
}
/* ==================================================
   COURTTRACK CP57 FIX — COURT + TIME SELECTION SCREEN
   Cleaner court row, clearer available/booked/passed time cards
   ================================================== */

/* COURT CHOICE ROW */

.court-choice-row {
  display: flex !important;
  gap: 10px !important;

  width: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  padding-bottom: 10px !important;

  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin;
  scrollbar-color: rgba(200, 154, 101, 0.45) rgba(255, 255, 240, 0.08);
}

.court-choice-row::-webkit-scrollbar {
  height: 6px;
}

.court-choice-row::-webkit-scrollbar-track {
  background: rgba(255, 255, 240, 0.08);
  border-radius: 999px;
}

.court-choice-row::-webkit-scrollbar-thumb {
  background: rgba(200, 154, 101, 0.45);
  border-radius: 999px;
}

button.court-choice-button {
  flex: 0 0 132px !important;

  min-width: 132px !important;
  min-height: 58px !important;

  padding: 13px 16px !important;

  display: flex !important;
  align-items: center !important;

  scroll-snap-align: start;
}

button.court-choice-button strong {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
}

/* TIME GRID */

.time-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

button.time-card {
  width: 100% !important;
  min-height: 70px !important;

  padding: 13px 14px !important;

  border-radius: 18px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
}

button.time-card strong {
  margin: 0 0 6px !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

button.time-card span {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

/* AVAILABLE TIME */

body:not(.dark-mode) button.time-card.available {
  border-color: rgba(200, 154, 101, 0.34) !important;
}

body:not(.dark-mode) button.time-card.available strong {
  color: #1f262a !important;
}

body:not(.dark-mode) button.time-card.available span {
  color: #3b8552 !important;
}

body.dark-mode button.time-card.available strong {
  color: #fffff0 !important;
}

body.dark-mode button.time-card.available span {
  color: #8fc9ad !important;
}

/* BOOKED / PASSED TIME */

button.time-card.unavailable,
button.time-card.past {
  cursor: not-allowed !important;
  opacity: 1 !important;
}

body:not(.dark-mode) button.time-card.unavailable,
body:not(.dark-mode) button.time-card.past {
  background:
    linear-gradient(180deg, rgba(91, 103, 109, 0.08), rgba(91, 103, 109, 0.05)) !important;

  border-color: rgba(91, 103, 109, 0.18) !important;
}

body:not(.dark-mode) button.time-card.unavailable strong,
body:not(.dark-mode) button.time-card.past strong {
  color: rgba(31, 38, 42, 0.42) !important;
}

body:not(.dark-mode) button.time-card.unavailable span,
body:not(.dark-mode) button.time-card.past span {
  color: rgba(91, 103, 109, 0.62) !important;
}

body.dark-mode button.time-card.unavailable,
body.dark-mode button.time-card.past {
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.035), rgba(255, 255, 240, 0.02)) !important;

  border-color: rgba(200, 154, 101, 0.16) !important;
}

body.dark-mode button.time-card.unavailable strong,
body.dark-mode button.time-card.past strong {
  color: rgba(255, 255, 240, 0.34) !important;
}

body.dark-mode button.time-card.unavailable span,
body.dark-mode button.time-card.past span {
  color: rgba(255, 255, 240, 0.42) !important;
}

/* HOVER ONLY FOR AVAILABLE */

button.time-card.available:hover,
button.court-choice-button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(200, 154, 101, 0.60) !important;
}

/* MOBILE */

@media (max-width: 720px) {
  .time-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .time-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  button.time-card {
    min-height: 68px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — BOOKING REVIEW BUTTONS
   Better button proportions + green confirm in both modes
   ================================================== */

.booking-review-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 174px !important;
  gap: 14px !important;
  align-items: stretch !important;

  margin-top: 18px !important;
}

.booking-review-actions .primary-button,
.booking-review-actions .secondary-button,
.booking-review-actions .booking-confirm-button,
.booking-review-actions .booking-change-time-button {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 18px !important;

  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Confirm booking = always green */

.booking-review-actions .booking-confirm-button,
body.dark-mode .booking-review-actions .booking-confirm-button {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 240, 0.14), transparent 42%),
    linear-gradient(160deg, #3b8552, #145631) !important;

  color: #fffff0 !important;
  border: 1px solid rgba(80, 180, 120, 0.54) !important;

  box-shadow:
    0 12px 28px rgba(20, 86, 49, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Change time = calm red utility */

.booking-review-actions .booking-change-time-button,
body.dark-mode .booking-review-actions .booking-change-time-button {
  background: rgba(194, 74, 64, 0.09) !important;
  color: #c96f6a !important;
  border: 1px solid rgba(194, 74, 64, 0.42) !important;

  box-shadow: none !important;
}

body:not(.dark-mode) .booking-review-actions .booking-change-time-button {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.06) !important;
  border-color: rgba(194, 74, 64, 0.34) !important;
}

/* Mobile stack */

@media (max-width: 560px) {
  .booking-review-actions {
    grid-template-columns: 1fr !important;
  }

  .booking-review-actions .primary-button,
  .booking-review-actions .secondary-button,
  .booking-review-actions .booking-confirm-button,
  .booking-review-actions .booking-change-time-button {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — CONFIRMED + MY BOOKINGS
   Clean confirmation summary and resident booking cards
   ================================================== */

/* CONFIRMED / REVIEW SUMMARY CARDS */

.booking-review-grid .action-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  min-height: 86px !important;
  padding: 16px 18px !important;

  border-radius: 18px !important;
}

.booking-review-grid .action-card strong {
  margin: 0 0 8px !important;

  color: inherit !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.booking-review-grid .action-card span {
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

/* MY BOOKINGS LIST */

.resident-booking-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;

  padding: 17px 18px !important;

  border-radius: 18px !important;
}

.resident-booking-copy strong {
  display: block !important;

  margin: 0 0 6px !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.resident-booking-copy span {
  display: block !important;

  margin: 0 0 9px !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.resident-booking-copy em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;

  padding: 5px 10px !important;
  border-radius: 999px !important;

  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.12) !important;
  border: 1px solid rgba(80, 180, 120, 0.28) !important;

  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.dark-mode .resident-booking-copy em {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.14) !important;
  border-color: rgba(80, 180, 120, 0.30) !important;
}

/* CANCEL BUTTON IN MY BOOKINGS */

.resident-booking-cancel {
  min-width: 104px !important;
  min-height: 38px !important;

  padding: 0 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* MOBILE */

@media (max-width: 560px) {
  .resident-booking-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .resident-booking-cancel {
    width: 100% !important;
    min-height: 44px !important;
  }

  .booking-review-grid .action-card {
    min-height: 78px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — SECURITY + ADMIN STATUS CARDS
   Operational clarity for security/admin staff
   ================================================== */

/* SHARED OPERATIONAL BOOKING CARDS */

.security-booking-card,
.admin-booking-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;

  padding: 17px 18px !important;

  border-radius: 18px !important;
}

.security-booking-card strong,
.admin-booking-card strong {
  display: block !important;

  margin: 0 0 6px !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.security-booking-card span,
.admin-booking-card span {
  display: block !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.booking-resident-line {
  margin-top: 7px !important;

  color: var(--gunmetal) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

body.dark-mode .booking-resident-line {
  color: rgba(255, 255, 240, 0.88) !important;
}

.booking-guest-fee-line {
  margin-top: 7px !important;

  color: var(--gunmetal) !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

body.dark-mode .booking-guest-fee-line {
  color: rgba(255, 255, 240, 0.88) !important;
}

/* STATUS PILLS */

.security-status-pill,
.court-admin-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;

  border-radius: 999px !important;
  padding: 6px 10px !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Expected / Active = green */

.security-status-pill,
.court-admin-status.active {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.12) !important;
  border: 1px solid rgba(80, 180, 120, 0.28) !important;
}

/* Arrived = champagne */

.security-status-pill.arrived {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.15) !important;
  border: 1px solid rgba(200, 154, 101, 0.32) !important;
}

/* No Show / Inactive = red */

.security-status-pill.no-show,
.court-admin-status.inactive {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.08) !important;
  border: 1px solid rgba(194, 74, 64, 0.34) !important;
}

body.dark-mode .security-status-pill,
body.dark-mode .court-admin-status.active {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.14) !important;
  border-color: rgba(80, 180, 120, 0.30) !important;
}

body.dark-mode .security-status-pill.arrived {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.14) !important;
  border-color: rgba(200, 154, 101, 0.30) !important;
}

body.dark-mode .security-status-pill.no-show,
body.dark-mode .court-admin-status.inactive {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.12) !important;
  border-color: rgba(220, 110, 110, 0.46) !important;
}

/* SECURITY ACTIONS */

.security-card-actions,
.admin-booking-actions,
.manage-court-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.security-card-actions .small-admin-button,
.manage-court-actions .small-admin-button,
.admin-cancel-booking-button {
  min-height: 36px !important;
  padding: 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Admin edit button = champagne utility */

.edit-court-button {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.12) !important;
  border-color: rgba(200, 154, 101, 0.34) !important;
}

body.dark-mode .edit-court-button {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.12) !important;
  border-color: rgba(200, 154, 101, 0.34) !important;
}

/* Mobile stack */

@media (max-width: 620px) {
  .security-booking-card,
  .admin-booking-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .security-card-actions,
  .admin-booking-actions,
  .manage-court-actions {
    justify-content: flex-start !important;
  }

  .security-card-actions .small-admin-button,
  .manage-court-actions .small-admin-button,
  .admin-cancel-booking-button {
    min-height: 40px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — RADIUS LOCK
   Apply ORYX SportsTrack UI Standard v1 rounding.
   No redesign. Just cleaner, less bubbly corners.
   ================================================== */

:root {
  --radius-main: 22px;
  --radius-main-mobile: 20px;

  --radius-card: 20px;
  --radius-card-mobile: 18px;

  --radius-data: 18px;
  --radius-data-mobile: 16px;

  --radius-input: 16px;
  --radius-input-mobile: 15px;

  --radius-button: 16px;
  --radius-modal: 22px;
  --radius-modal-mobile: 20px;
}

/* MAIN / HERO / SECTION PANELS */

.auth-card,
.hero-panel,
.panel {
  border-radius: var(--radius-main) !important;
}

/* ACTION / DASHBOARD CARDS */

.home-main-book-button,
.home-quick-card,
.home-status-card,
.sport-choice-card,
.action-card,
.empty-state-card {
  border-radius: var(--radius-card) !important;
}

/* DATA / LIST / BOOKING CARDS */

.booking-card,
.resident-booking-card,
.security-booking-card,
.admin-booking-card,
.manage-court-card,
.available-court-row,
.security-summary-card,
.week-day-card,
.court-choice-button,
.time-card {
  border-radius: var(--radius-data) !important;
}

/* INPUTS / SELECTS / FORM BOXES */

input,
select,
.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select,
.rules-check-row {
  border-radius: var(--radius-input) !important;
}

/* BUTTONS */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button,
.booking-confirm-button,
.booking-change-time-button,
.booking-next-button,
.small-admin-button,
.admin-cancel-booking-button,
.modal-safe-button,
.modal-danger-button {
  border-radius: var(--radius-button) !important;
}

/* TRUE PILLS STAY FULLY ROUND */

.role-pill,
.ct-nav,
.ct-nav-item,
.theme-toggle,
.resident-status-pill,
.security-status-pill,
.court-admin-status,
.resident-booking-copy em,
.resident-booking-cancel,
.delete-court-button,
.no-show-button,
.edit-court-button {
  border-radius: 999px !important;
}

/* MODALS */

.ct-modal-card,
.signup-modal,
.rules-modal,
.inactivity-card {
  border-radius: var(--radius-modal) !important;
}

/* LOGIN / SIGNUP SPECIAL CASES */

.signup-card {
  border-radius: var(--radius-main) !important;
}

.auth-card .login-topline .theme-toggle {
  border-radius: 999px !important;
}

/* MOBILE RADIUS */

@media (max-width: 560px) {
  .auth-card,
  .hero-panel,
  .panel,
  .signup-card {
    border-radius: var(--radius-main-mobile) !important;
  }

  .home-main-book-button,
  .home-quick-card,
  .home-status-card,
  .sport-choice-card,
  .action-card,
  .empty-state-card {
    border-radius: var(--radius-card-mobile) !important;
  }

  .booking-card,
  .resident-booking-card,
  .security-booking-card,
  .admin-booking-card,
  .manage-court-card,
  .available-court-row,
  .security-summary-card,
  .week-day-card,
  .court-choice-button,
  .time-card {
    border-radius: var(--radius-data-mobile) !important;
  }

  input,
  select,
  .form-group input,
  .form-group select,
  .signup-form input[type="text"],
  .signup-form input[type="password"],
  .modal-form-group input,
  .modal-form-group select,
  .rules-check-row {
    border-radius: var(--radius-input-mobile) !important;
  }

  .ct-modal-card,
  .signup-modal,
  .rules-modal,
  .inactivity-card {
    border-radius: var(--radius-modal-mobile) !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — TEXT SIZE LOCK
   Calmer premium working-app typography.
   No layout redesign.
   ================================================== */

/* HERO TITLES */

.hero-panel p {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
}

.hero-panel h1 {
  font-size: clamp(22px, 2.7vw, 27px) !important;
  font-weight: 850 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.005em !important;
}

/* Resident home should stay extra calm */

.home-hero-panel h1 {
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.14 !important;
}

/* PANEL HEADINGS */

.panel h3 {
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
}

/* NAV */

.ct-nav-item {
  font-size: 12.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* MAIN ACTION CARDS */

.home-main-book-button strong {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.home-main-book-button span {
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.home-quick-card strong,
.sport-choice-card strong,
.action-card strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
}

.home-quick-card span,
.sport-choice-card span,
.action-card span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* BOOKING DATE CARDS */

.week-day-card strong {
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
}

.week-day-card span {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* COURT + TIME CARDS */

.court-choice-button strong {
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.time-card strong {
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.time-card span {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

/* REVIEW / SUMMARY CARDS */

.booking-review-grid .action-card strong {
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.booking-review-grid .action-card span {
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

/* DATA / LIST CARDS */

.resident-booking-copy strong,
.security-booking-card strong,
.admin-booking-card strong,
.manage-court-card strong,
.available-court-row strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.resident-booking-copy span,
.security-booking-card span,
.admin-booking-card span,
.manage-court-card span,
.available-court-row span,
.booking-resident-line {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* STATUS / NUMBER CARDS */

.home-status-card strong,
.security-summary-card strong {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.home-status-card span,
.security-summary-card span {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

/* PILLS */

.role-pill,
.resident-status-pill,
.security-status-pill,
.court-admin-status,
.resident-booking-copy em {
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
}

/* BUTTONS */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button,
.booking-confirm-button,
.booking-change-time-button,
.small-admin-button,
.admin-cancel-booking-button {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

/* FORM TEXT */

.form-group label,
.signup-form label,
.modal-form-group label {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* MOBILE */

@media (max-width: 560px) {
  .hero-panel h1 {
    font-size: 20px !important;
  }

  .home-hero-panel h1 {
    font-size: 18px !important;
  }

  .ct-nav-item {
    font-size: 11px !important;
  }

  .home-quick-card strong,
  .sport-choice-card strong,
  .action-card strong {
    font-size: 15px !important;
  }

  .booking-review-grid .action-card span {
    font-size: 15px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — FAINT CHAMPAGNE SEPARATOR LINES
   Adds calm section dividers without making the app feel boxed.
   ================================================== */

/* HERO TITLE DIVIDER */

.dashboard .hero-panel h1::after {
  content: "";

  display: block;

  width: 100%;
  height: 1px;

  margin-top: 14px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.52),
      rgba(200, 154, 101, 0.18) 48%,
      transparent 100%
    );
}

/* PANEL HEADING DIVIDER */

.dashboard .panel h3::after {
  content: "";

  display: block;

  width: 100%;
  height: 1px;

  margin-top: 12px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.46),
      rgba(200, 154, 101, 0.16) 48%,
      transparent 100%
    );
}

/* TIGHTEN SPACING AFTER THE NEW LINE */

.dashboard .panel h3 {
  margin-bottom: 18px !important;
}

.dashboard .hero-panel {
  padding-bottom: 20px !important;
}

/* DARK MODE — A TOUCH SOFTER */

body.dark-mode .dashboard .hero-panel h1::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.46),
      rgba(200, 154, 101, 0.14) 48%,
      transparent 100%
    );
}

body.dark-mode .dashboard .panel h3::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.42),
      rgba(200, 154, 101, 0.12) 48%,
      transparent 100%
    );
}

/* MOBILE — SLIGHTLY TIGHTER */

@media (max-width: 560px) {
  .dashboard .hero-panel h1::after {
    margin-top: 12px;
  }

  .dashboard .panel h3::after {
    margin-top: 10px;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — FORMS / INPUTS / SELECTS
   Cleaner SportsTrack field standard.
   Closed select only; native dropdown menu remains browser-controlled.
   ================================================== */

/* FORM GROUP SPACING */

.form-group,
.modal-form-group {
  display: grid !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.signup-form {
  display: grid !important;
  gap: 14px !important;
}

.signup-form select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  padding: 0 44px 0 16px !important;

  border-radius: var(--ct-radius-input, 10px) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  background:
    linear-gradient(45deg, transparent 50%, #c89a65 50%),
    linear-gradient(135deg, #c89a65 50%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(255, 255, 240, 0.76),
      rgba(255, 255, 240, 0.56)
    ) !important;

  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%,
    0 0 !important;

  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;

  background-repeat: no-repeat !important;

  color: #1f262a !important;

  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.signup-form select:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;

  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

body.dark-mode .signup-form select {
  background:
    linear-gradient(45deg, transparent 50%, #c89a65 50%),
    linear-gradient(135deg, #c89a65 50%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(255, 255, 240, 0.075),
      rgba(255, 255, 240, 0.045)
    ) !important;

  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%,
    0 0 !important;

  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;

  background-repeat: no-repeat !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  color-scheme: dark;
}

/* ==================================================
   COURTTRACK HOTEL
   Compact Hotel booking details + guest layout.
   ================================================== */

.hotel-booking-details-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  column-gap: 16px !important;
  row-gap: 14px !important;

  align-items: end !important;
}

.hotel-booking-details-grid .signup-field {
  min-width: 0 !important;
}

.hotel-outside-guests-panel {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.hotel-outside-guests-panel h3 {
  margin-bottom: 6px !important;
}

.hotel-guest-limit-note {
  margin: 0 0 14px !important;

  color: var(--light-gunmetal) !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body.dark-mode .hotel-guest-limit-note {
  color: rgba(255, 255, 240, 0.48) !important;
}

.hotel-guest-list {
  display: grid !important;
  gap: 12px !important;
}

.hotel-guest-entry {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) auto !important;

  gap: 10px !important;
  align-items: end !important;
}

.hotel-guest-entry .signup-field {
  display: grid !important;
  gap: 7px !important;

  min-width: 0 !important;
  margin: 0 !important;
}

.hotel-guest-entry .signup-field span {
  color: var(--champagne) !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.hotel-guest-entry input {
  width: 100% !important;

  height: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: var(--ct-radius-input, 10px) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background:
    rgba(255, 255, 240, 0.62) !important;

  color: var(--gunmetal) !important;

  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
}

.hotel-guest-entry input::placeholder {
  color: rgba(91, 103, 109, 0.72) !important;
}

.hotel-guest-entry input:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;

  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

body.dark-mode .hotel-guest-entry input {
  background:
    rgba(255, 255, 240, 0.055) !important;

  color: var(--ivory) !important;

  border-color:
    rgba(200, 154, 101, 0.28) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .hotel-guest-entry input::placeholder {
  color:
    rgba(255, 255, 240, 0.42) !important;
}

.hotel-remove-guest-button {
  width: auto !important;
  min-width: 86px !important;

  height: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 0 16px !important;
}

.hotel-add-guest-button {
  width: auto !important;
  min-width: 170px !important;

  height: 40px !important;
  min-height: 40px !important;

  margin: 2px 0 0 !important;
  padding: 0 16px !important;
}

.signup-form select option {
  background: #fffff0 !important;
  color: #1f262a !important;
}

body.dark-mode .signup-form select option {
  background: #1f262a !important;
  color: #fffff0 !important;
}

.hotel-booking-actions {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr) auto !important;

  gap: 10px !important;
  align-items: center !important;

  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

.hotel-booking-actions .primary-button,
.hotel-booking-actions .secondary-button {
  margin: 0 !important;
}

.hotel-booking-actions .primary-button {
  width: 100% !important;
}

.hotel-booking-actions .secondary-button {
  width: auto !important;
  min-width: 110px !important;
}


/* HOTEL BOOKING — MOBILE */

@media (max-width: 700px) {
  .hotel-booking-details-grid {
    grid-template-columns:
      1fr !important;

    gap: 12px !important;
  }

  .hotel-guest-entry {
    grid-template-columns:
      1fr !important;
  }

  .hotel-remove-guest-button {
    width: 100% !important;
    min-width: 0 !important;

    height: 40px !important;
    min-height: 40px !important;
  }

  .hotel-add-guest-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .hotel-booking-actions {
    grid-template-columns:
      1fr !important;
  }

  .hotel-booking-actions .secondary-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.add-court-form {
  display: grid !important;
  gap: 14px !important;
}

/* LABELS */

.form-group label,
.signup-form label,
.modal-form-group label {
  display: block !important;

  margin: 0 !important;

  color: #c89a65 !important;

  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* INPUTS + CLOSED SELECT */

.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;

  padding: 0 16px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.76), rgba(255, 255, 240, 0.56)) !important;

  color: #1f262a !important;

  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.form-group input::placeholder,
.signup-form input::placeholder,
.modal-form-group input::placeholder {
  color: rgba(91, 103, 109, 0.62) !important;
  font-weight: 650 !important;
}

/* SELECT ARROW — CLOSED STATE ONLY */

.form-group select,
.modal-form-group select {
  padding-right: 44px !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  background:
    linear-gradient(45deg, transparent 50%, #c89a65 50%),
    linear-gradient(135deg, #c89a65 50%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.76), rgba(255, 255, 240, 0.56)) !important;

  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%,
    0 0 !important;

  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;

  background-repeat: no-repeat !important;
}

/* FOCUS STATE */

.form-group input:focus,
.form-group select:focus,
.signup-form input[type="text"]:focus,
.signup-form input[type="password"]:focus,
.modal-form-group input:focus,
.modal-form-group select:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;

  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

/* DARK MODE FIELDS */

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .signup-form input[type="text"],
body.dark-mode .signup-form input[type="password"],
body.dark-mode .modal-form-group input,
body.dark-mode .modal-form-group select {
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.075), rgba(255, 255, 240, 0.045)) !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .signup-form input::placeholder,
body.dark-mode .modal-form-group input::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
}

body.dark-mode .form-group select,
body.dark-mode .modal-form-group select {
  background:
    linear-gradient(45deg, transparent 50%, #c89a65 50%),
    linear-gradient(135deg, #c89a65 50%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.075), rgba(255, 255, 240, 0.045)) !important;

  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 17px) 50%,
    0 0 !important;

  background-size:
    6px 6px,
    6px 6px,
    100% 100% !important;

  background-repeat: no-repeat !important;
}

/* RULES BOX / CHECKBOX ROW */

.rules-box {
  display: grid !important;
  gap: 10px !important;
}

.rules-check-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 14px 15px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background: rgba(200, 154, 101, 0.07) !important;
}

.rules-check-row input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  accent-color: #c89a65 !important;
}

.rules-check-row span {
  color: inherit !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* LOGIN BUTTON ROW SAFETY */

.login-action-row {
  gap: 12px !important;
  margin-top: 18px !important;
}

.login-action-row .primary-button,
.login-action-row .secondary-button {
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
}

/* MOBILE */

@media (max-width: 560px) {
  .form-group input,
  .form-group select,
  .signup-form input[type="text"],
  .signup-form input[type="password"],
  .modal-form-group input,
  .modal-form-group select {
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  .signup-form,
  .add-court-form {
    gap: 12px !important;
  }

  .rules-check-row {
    border-radius: 15px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — MANAGE COURT ACTION BUTTONS
   Makes Edit feel like a real action, not a tiny badge.
   ================================================== */

.manage-court-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.manage-court-actions .court-admin-status,
.manage-court-actions .small-admin-button {
  height: 40px !important;
  min-height: 40px !important;

  padding: 0 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Give Edit a proper width */

.manage-court-actions .edit-court-button {
  min-width: 74px !important;

  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.12) !important;
  border-color: rgba(200, 154, 101, 0.36) !important;
}

/* Disable should match Edit/Delete size better */

.manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  min-width: 92px !important;
}

/* Delete stays danger */

.manage-court-actions .delete-court-button {
  min-width: 88px !important;
}

/* Active pill */

.manage-court-actions .court-admin-status {
  min-width: 88px !important;
}

/* Dark mode */

body.dark-mode .manage-court-actions .edit-court-button {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.13) !important;
  border-color: rgba(200, 154, 101, 0.38) !important;
}

/* Mobile */

@media (max-width: 620px) {
  .manage-court-actions {
    justify-content: flex-start !important;
  }

  .manage-court-actions .court-admin-status,
  .manage-court-actions .small-admin-button {
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 460px) {
  .manage-court-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .manage-court-actions .court-admin-status,
  .manage-court-actions .small-admin-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — ADMIN ACTION PILLS TONE DOWN
   Calmer Manage Courts row. Less candy. More AttendTrack.
   ================================================== */

.manage-court-card {
  padding: 15px 16px !important;
}

.manage-court-card strong {
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.manage-court-card span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

/* Action row: still clear, less loud */

.manage-court-actions {
  gap: 8px !important;
}

.manage-court-actions .court-admin-status,
.manage-court-actions .small-admin-button {
  height: 36px !important;
  min-height: 36px !important;

  padding: 0 13px !important;

  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

/* Active becomes a soft status chip, not a giant green button */

.manage-court-actions .court-admin-status.active {
  min-width: 78px !important;

  color: #2f6f45 !important;
  background: rgba(47, 111, 69, 0.075) !important;
  border-color: rgba(47, 111, 69, 0.24) !important;
}

/* Edit becomes subtle champagne utility */

.manage-court-actions .edit-court-button {
  min-width: 68px !important;

  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.075) !important;
  border-color: rgba(200, 154, 101, 0.28) !important;
}

/* Disable becomes neutral, not competing */

.manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  min-width: 84px !important;

  color: #1f262a !important;
  background: rgba(255, 255, 240, 0.42) !important;
  border-color: rgba(200, 154, 101, 0.26) !important;
}

/* Delete stays clearly danger, but quieter */

.manage-court-actions .delete-court-button {
  min-width: 82px !important;

  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.26) !important;
}

/* DARK MODE */

body.dark-mode .manage-court-actions .court-admin-status.active {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.095) !important;
  border-color: rgba(80, 180, 120, 0.24) !important;
}

body.dark-mode .manage-court-actions .edit-court-button {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.085) !important;
  border-color: rgba(200, 154, 101, 0.26) !important;
}

body.dark-mode .manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  color: #fffff0 !important;
  background: rgba(255, 255, 240, 0.045) !important;
  border-color: rgba(200, 154, 101, 0.22) !important;
}

body.dark-mode .manage-court-actions .delete-court-button {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.085) !important;
  border-color: rgba(220, 110, 110, 0.30) !important;
}

/* Hover stays very subtle */

.manage-court-actions .small-admin-button:hover,
.manage-court-actions .court-admin-status:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile */

@media (max-width: 620px) {
  .manage-court-card {
    padding: 14px !important;
  }

  .manage-court-actions .court-admin-status,
  .manage-court-actions .small-admin-button {
    height: 38px !important;
    min-height: 38px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — TEXT PASS 2
   Calmer AttendTrack-style typography.
   Less loud. Less chunky. Better daily-use feel.
   ================================================== */

/* HERO */

.hero-panel p {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
}

.hero-panel h1 {
  font-size: clamp(21px, 2.55vw, 26px) !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.015em !important;
}

/* PANEL LABELS */

.panel h3 {
  font-size: 11.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
}

/* NAV */

.ct-nav-item {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* HOME MAIN ACTION */

.home-main-book-button strong {
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.home-main-book-button span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* ACTION CARDS */

.home-quick-card strong,
.sport-choice-card strong,
.action-card strong {
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.home-quick-card span,
.sport-choice-card span,
.action-card span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* DATE CARDS */

.week-day-card strong {
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.week-day-card span {
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* COURT + TIME CARDS */

.court-choice-button strong {
  font-size: 14.5px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.time-card strong {
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.time-card span {
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

/* REVIEW / CONFIRMED SUMMARY */

.booking-review-grid .action-card strong {
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.booking-review-grid .action-card span {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* DATA / LIST CARDS */

.resident-booking-copy strong,
.security-booking-card strong,
.admin-booking-card strong,
.manage-court-card strong,
.available-court-row strong {
  font-size: 15.5px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

.resident-booking-copy span,
.security-booking-card span,
.admin-booking-card span,
.manage-court-card span,
.available-court-row span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.booking-resident-line {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* STATUS / SUMMARY NUMBER CARDS */

.home-status-card strong,
.security-summary-card strong {
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.home-status-card span,
.security-summary-card span {
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

/* PILLS */

.role-pill,
.resident-status-pill,
.security-status-pill,
.court-admin-status,
.resident-booking-copy em {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

/* BUTTONS */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button,
.booking-confirm-button,
.booking-change-time-button,
.small-admin-button,
.admin-cancel-booking-button,
.modal-safe-button,
.modal-danger-button {
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ADMIN ACTION PILL TEXT — extra calm */

.manage-court-actions .court-admin-status,
.manage-court-actions .small-admin-button {
  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

/* FORM TEXT */

.form-group label,
.signup-form label,
.modal-form-group label {
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select {
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* MODALS */

.ct-modal-kicker {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.085em !important;
}

.ct-modal-card h2,
.signup-modal .signup-modal-title,
.rules-modal h2,
.inactivity-card h2 {
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.018em !important;
}

.ct-modal-text,
.signup-modal p,
.rules-modal-content,
.inactivity-card p {
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

/* MOBILE */

@media (max-width: 560px) {
  .hero-panel h1 {
    font-size: 20px !important;
  }

  .panel h3 {
    font-size: 11px !important;
  }

  .ct-nav-item {
    font-size: 10px !important;
  }

  .home-quick-card strong,
  .sport-choice-card strong,
  .action-card strong {
    font-size: 15px !important;
  }

  .booking-review-grid .action-card span {
    font-size: 15px !important;
  }

  .resident-booking-copy strong,
  .security-booking-card strong,
  .admin-booking-card strong,
  .manage-court-card strong,
  .available-court-row strong {
    font-size: 15px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — SPACING / PADDING LOCK
   Calmer daily-use spacing. No redesign.
   ================================================== */

/* MAIN PAGE BREATHING ROOM */

.dashboard {
  padding: 34px 26px 44px !important;
}

.ct-dashboard-header {
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
}

.ct-nav {
  margin-bottom: 20px !important;
}

/* HERO + PANELS */

.hero-panel {
  margin-bottom: 16px !important;
  padding: 20px 22px !important;
}

.panel {
  margin-bottom: 16px !important;
  padding: 22px !important;
}

.dashboard-shell > .panel + .panel,
.dashboard-shell > .hero-panel + .panel {
  margin-top: 0 !important;
}

/* PANEL HEADINGS WITH DIVIDERS */

.panel h3 {
  margin-bottom: 17px !important;
}

.dashboard .panel h3::after {
  margin-top: 11px !important;
}

.dashboard .hero-panel h1::after {
  margin-top: 13px !important;
}

/* CARD GRID GAPS */

.quick-actions,
.home-quick-grid,
.home-status-grid,
.sport-choice-grid,
.security-summary-grid,
.booking-review-grid,
.time-card-grid {
  gap: 11px !important;
}

/* ACTION CARDS */

.action-card,
.home-quick-card,
.sport-choice-card,
.empty-state-card {
  padding: 15px 16px !important;
}

.home-main-book-button {
  min-height: 86px !important;
  padding: 15px 17px !important;
}

/* STATUS / SUMMARY CARDS */

.home-status-card,
.security-summary-card {
  padding: 14px 10px !important;
}

/* DATE CARDS */

.week-selector {
  padding-bottom: 9px !important;
}

.week-day-card {
  min-height: 70px !important;
  padding: 11px 10px !important;
}

/* COURT + TIME */

.court-choice-row {
  padding-bottom: 9px !important;
}

.court-choice-button {
  min-height: 56px !important;
  padding: 12px 15px !important;
}

.time-card {
  min-height: 66px !important;
  padding: 12px 13px !important;
}

/* REVIEW / CONFIRMATION */

.booking-review-grid .action-card {
  min-height: 78px !important;
  padding: 14px 16px !important;
}

.booking-review-actions {
  margin-top: 16px !important;
  gap: 12px !important;
}

.booking-review-actions .primary-button,
.booking-review-actions .secondary-button,
.booking-review-actions .booking-confirm-button,
.booking-review-actions .booking-change-time-button {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

/* LIST CARDS */

.resident-booking-card,
.security-booking-card,
.admin-booking-card,
.manage-court-card,
.available-court-row {
  padding: 15px 16px !important;
}

/* MANAGE COURTS ROW */

.manage-court-actions {
  gap: 7px !important;
}

.manage-court-actions .court-admin-status,
.manage-court-actions .small-admin-button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
}

/* FORMS */

.form-group,
.modal-form-group {
  margin-bottom: 14px !important;
}

.add-court-form,
.signup-form {
  gap: 13px !important;
}

.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.modal-form-group input,
.modal-form-group select {
  height: 50px !important;
  min-height: 50px !important;
}

/* MOBILE */

@media (max-width: 560px) {
  .dashboard {
    padding: 16px 12px 28px !important;
  }

  .hero-panel,
  .panel {
    padding: 18px !important;
  }

  .ct-dashboard-header {
    gap: 16px !important;
  }

  .booking-review-actions .primary-button,
  .booking-review-actions .secondary-button,
  .booking-review-actions .booking-confirm-button,
  .booking-review-actions .booking-change-time-button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
}
/* ==================================================
   COURTTRACK CP57 FIX — TIME STATUS CLARITY
   Clear Available / Booked / Passed without shouting.
   ================================================== */

.time-card-grid button.time-card {
  position: relative !important;

  min-height: 68px !important;
  padding: 13px 14px !important;

  gap: 0 !important;
}

.time-card-grid button.time-card strong {
  width: 100% !important;

  margin: 0 !important;
  padding-bottom: 8px !important;

  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

/* Fine internal separator line */

.time-card-grid button.time-card strong::after {
  content: "";

  display: block;

  width: 100%;
  height: 1px;

  margin-top: 8px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.34),
      rgba(200, 154, 101, 0.10) 58%,
      transparent 100%
    );
}

body.dark-mode .time-card-grid button.time-card strong::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.28),
      rgba(200, 154, 101, 0.08) 58%,
      transparent 100%
    );
}

/* Status text becomes a quiet chip */

.time-card-grid button.time-card span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;

  margin-top: 1px !important;
  padding: 4px 8px !important;

  border-radius: 999px !important;

  font-size: 9.5px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

/* AVAILABLE — calm green */

body:not(.dark-mode) .time-card-grid button.time-card.available {
  border-color: rgba(80, 180, 120, 0.26) !important;
}

body:not(.dark-mode) .time-card-grid button.time-card.available span {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.09) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body.dark-mode .time-card-grid button.time-card.available {
  border-color: rgba(80, 180, 120, 0.22) !important;
}

body.dark-mode .time-card-grid button.time-card.available span {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.10) !important;
  border: 1px solid rgba(80, 180, 120, 0.22) !important;
}

/* BOOKED — muted champagne / unavailable but still readable */

body:not(.dark-mode) .time-card-grid button.time-card.unavailable:not(.past) {
  border-color: rgba(200, 154, 101, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.48), rgba(247, 243, 232, 0.38)) !important;
}

body:not(.dark-mode) .time-card-grid button.time-card.unavailable:not(.past) strong {
  color: rgba(31, 38, 42, 0.66) !important;
}

body:not(.dark-mode) .time-card-grid button.time-card.unavailable:not(.past) span {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.09) !important;
  border: 1px solid rgba(200, 154, 101, 0.22) !important;
}

body.dark-mode .time-card-grid button.time-card.unavailable:not(.past) {
  border-color: rgba(200, 154, 101, 0.20) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.04), rgba(255, 255, 240, 0.025)) !important;
}

body.dark-mode .time-card-grid button.time-card.unavailable:not(.past) strong {
  color: rgba(255, 255, 240, 0.56) !important;
}

body.dark-mode .time-card-grid button.time-card.unavailable:not(.past) span {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.08) !important;
  border: 1px solid rgba(200, 154, 101, 0.20) !important;
}

/* PASSED — quiet grey, lower priority */

body:not(.dark-mode) .time-card-grid button.time-card.past {
  border-color: rgba(91, 103, 109, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(91, 103, 109, 0.055), rgba(91, 103, 109, 0.035)) !important;
}

body:not(.dark-mode) .time-card-grid button.time-card.past strong {
  color: rgba(31, 38, 42, 0.36) !important;
}

body:not(.dark-mode) .time-card-grid button.time-card.past span {
  color: rgba(91, 103, 109, 0.62) !important;
  background: rgba(91, 103, 109, 0.075) !important;
  border: 1px solid rgba(91, 103, 109, 0.14) !important;
}

body.dark-mode .time-card-grid button.time-card.past {
  border-color: rgba(255, 255, 240, 0.10) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.026), rgba(255, 255, 240, 0.016)) !important;
}

body.dark-mode .time-card-grid button.time-card.past strong {
  color: rgba(255, 255, 240, 0.30) !important;
}

body.dark-mode .time-card-grid button.time-card.past span {
  color: rgba(255, 255, 240, 0.42) !important;
  background: rgba(255, 255, 240, 0.035) !important;
  border: 1px solid rgba(255, 255, 240, 0.08) !important;
}

/* Disabled cards should not feel interactive */

.time-card-grid button.time-card.unavailable,
.time-card-grid button.time-card.past {
  cursor: not-allowed !important;
}

.time-card-grid button.time-card.unavailable:hover,
.time-card-grid button.time-card.past:hover {
  transform: none !important;
}
/* ==================================================
   COURTTRACK CP57 FIX — TIME STATUS LEGEND
   Small clarity helper for residents.
   ================================================== */

.time-status-legend {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;

  margin: -4px 0 15px !important;
  padding-bottom: 13px !important;

  border-bottom: 1px solid rgba(200, 154, 101, 0.18) !important;
}

.time-status-legend span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 24px !important;
  padding: 0 9px !important;

  border-radius: 999px !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

/* Available */

.time-status-legend .legend-available {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.09) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

/* Booked */

.time-status-legend .legend-booked {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.09) !important;
  border: 1px solid rgba(200, 154, 101, 0.22) !important;
}

/* Passed */

.time-status-legend .legend-passed {
  color: rgba(91, 103, 109, 0.72) !important;
  background: rgba(91, 103, 109, 0.075) !important;
  border: 1px solid rgba(91, 103, 109, 0.14) !important;
}

/* Dark mode */

body.dark-mode .time-status-legend {
  border-bottom-color: rgba(200, 154, 101, 0.16) !important;
}

body.dark-mode .time-status-legend .legend-available {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.10) !important;
  border-color: rgba(80, 180, 120, 0.22) !important;
}

body.dark-mode .time-status-legend .legend-booked {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.08) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

body.dark-mode .time-status-legend .legend-passed {
  color: rgba(255, 255, 240, 0.46) !important;
  background: rgba(255, 255, 240, 0.035) !important;
  border-color: rgba(255, 255, 240, 0.08) !important;
}
/* ==================================================
   COURTTRACK CP57 FIX — SECURITY / ADMIN STAFF IDENTITY
   Staff signed-in card + calmer security action buttons.
   ================================================== */

/* STAFF LOGGED-IN CARD */

.staff-header-card {
  max-width: 380px !important;
  background: rgba(255, 255, 240, 0.045) !important;
}

.staff-avatar {
  background: rgba(200, 154, 101, 0.14) !important;
  border-color: rgba(200, 154, 101, 0.46) !important;
  color: #fffff0 !important;
}

.resident-avatar.staff-avatar.hotel-logo-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 1px solid rgba(200, 154, 101, 0.55) !important;
}

.resident-avatar.staff-avatar.hotel-logo-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 11px !important;
  transform: none !important;
}

body:not(.dark-mode) .staff-header-card {
  background: rgba(255, 255, 255, 0.42) !important;
}

body:not(.dark-mode) .staff-avatar {
  color: #1f262a !important;
}

.resident-status-pill.staff {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.10) !important;
  border: 1px solid rgba(200, 154, 101, 0.26) !important;
}

body:not(.dark-mode) .resident-status-pill.staff {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.085) !important;
  border-color: rgba(200, 154, 101, 0.24) !important;
}

/* ACTION TRACKING LINE */

.booking-action-line {
  display: block !important;

  margin-top: 6px !important;

  color: rgba(200, 154, 101, 0.92) !important;

  font-size: 11.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body:not(.dark-mode) .booking-action-line {
  color: #8a6338 !important;
}

/* SECURITY SUMMARY — SLIGHT TONE DOWN */

.security-summary-card {
  padding: 13px 10px !important;
}

.security-summary-card strong {
  font-size: 22px !important;
}

.security-summary-card span {
  font-size: 9.5px !important;
}

/* SECURITY BOOKING ACTIONS */

.security-card-actions {
  gap: 8px !important;
}

.security-card-actions .security-status-pill {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 102px !important;

  padding: 0 12px !important;

  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

/* Mark Arrived = calm green action */

.security-card-actions .small-admin-button:not(.no-show-button) {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 124px !important;

  padding: 0 13px !important;

  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.075) !important;
  border: 1px solid rgba(80, 180, 120, 0.22) !important;

  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

/* No Show = clear but quieter */

.security-card-actions .no-show-button {
  height: 36px !important;
  min-height: 36px !important;
  min-width: 104px !important;

  padding: 0 13px !important;

  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.065) !important;
  border: 1px solid rgba(194, 74, 64, 0.28) !important;

  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
}

/* Dark mode security buttons */

body.dark-mode .security-card-actions .small-admin-button:not(.no-show-button) {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.095) !important;
  border-color: rgba(80, 180, 120, 0.24) !important;
}

body.dark-mode .security-card-actions .no-show-button {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.085) !important;
  border-color: rgba(220, 110, 110, 0.30) !important;
}

/* No hover jumping on staff action rows */

.security-card-actions .small-admin-button:hover,
.security-card-actions .security-status-pill:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile */

@media (max-width: 620px) {
  .security-card-actions {
    justify-content: flex-start !important;
  }

  .security-card-actions .security-status-pill,
  .security-card-actions .small-admin-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* ==================================================
   COURTTRACK CP59 — PREMIUM SQUARE RADIUS TEST
   Visual-only radius test.
   Cards 16px / Buttons 12px / Inputs 10px / Floating 18px.
   999px only for true pills, menu, toggle, status chips.
   ================================================== */

:root {
  --ct-radius-card: 16px;
  --ct-radius-button: 12px;
  --ct-radius-input: 10px;
  --ct-radius-floating: 18px;
  --ct-radius-pill: 999px;
}

/* ==================================================
   1. CARDS / PANELS — 16PX
   ================================================== */

.auth-card,
.hero-panel,
.panel,
.action-card,
.home-main-book-button,
.home-quick-card,
.home-status-card,
.sport-choice-card,
.week-day-card,
.court-choice-button,
.time-card,
.booking-card,
.resident-booking-card,
.security-booking-card,
.admin-booking-card,
.manage-court-card,
.available-court-row,
.available-court-card,
.available-preview-card,
.security-summary-card,
.empty-state-card,
.inactivity-card,
.signup-card,
.rules-check-row,
.class-student-box,
.class-list-box,
.student-list-box,
.setup-panel {
  border-radius: var(--ct-radius-card) !important;
}

/* Review / summary cards */

.booking-review-grid .action-card {
  border-radius: var(--ct-radius-card) !important;
}

/* Date cards from older naming patterns */

.date-card,
.day-card,
.booking-day-card {
  border-radius: var(--ct-radius-card) !important;
}

/* ==================================================
   2. BUTTONS — 12PX
   ================================================== */

.primary-button,
.secondary-button,
.logout-button,
.rules-view-button,
.booking-confirm-button,
.booking-change-time-button,
.booking-next-button,
.booking-change-button,
.small-admin-button,
.admin-cancel-booking-button,
.modal-safe-button,
.modal-danger-button,
.edit-court-button,
.delete-court-button,
.no-show-button,
.signup-login-button,
.home-mini-action,
.modal-form-group button,
.form-group button,
button.time-card,
button.sport-choice-card,
button.week-day-card,
button.court-choice-button {
  border-radius: var(--ct-radius-button) !important;
}

/* Booking review action buttons specifically */

.booking-review-actions .primary-button,
.booking-review-actions .secondary-button,
.booking-review-actions .booking-confirm-button,
.booking-review-actions .booking-change-time-button {
  border-radius: var(--ct-radius-button) !important;
}

/* Security / Admin action buttons specifically */

.security-card-actions .small-admin-button,
.admin-booking-actions .small-admin-button,
.manage-court-actions .small-admin-button,
.manage-court-actions .edit-court-button,
.manage-court-actions .delete-court-button,
.admin-cancel-booking-button {
  border-radius: var(--ct-radius-button) !important;
}

/* Tiny utility buttons can stay slightly sharper */

.resident-booking-cancel,
.security-card-actions .small-admin-button,
.manage-court-actions .small-admin-button,
.admin-cancel-booking-button {
  border-radius: 10px !important;
}

/* ==================================================
   3. INPUTS / SELECTS — 10PX
   ================================================== */

input,
select,
textarea,
.form-group input,
.form-group select,
.signup-form input[type="text"],
.signup-form input[type="password"],
.signup-form input[type="tel"],
.modal-form-group input,
.modal-form-group select,
.add-court-form input,
.add-court-form select {
  border-radius: var(--ct-radius-input) !important;
}

/* ==================================================
   4. FLOATING ELEMENTS — 18PX
   ================================================== */

.ct-modal-card,
.signup-modal,
.rules-modal,
.inactivity-card,
.app-modal-panel,
.modal-card,
.popup-card,
.confirmation-card {
  border-radius: var(--ct-radius-floating) !important;
}

/* Splash artwork frame if present */

.splash-image,
.app-splash-inner {
  border-radius: var(--ct-radius-floating) !important;
}

/* ==================================================
   5. TRUE PILLS — KEEP 999PX
   ================================================== */

.role-pill,
.ct-nav,
.ct-nav-item,
.theme-toggle,
.theme-toggle span,
.resident-status-pill,
.security-status-pill,
.court-admin-status,
.resident-booking-copy em,
.time-status-legend span,
.booking-action-line-pill,
.status,
.status.available,
.status.booked,
.glance-count {
  border-radius: var(--ct-radius-pill) !important;
}

/* Avatar stays round */

.resident-avatar,
.staff-avatar {
  border-radius: 50% !important;
}

/* ==================================================
   6. MENU / NAV — TRUE PILL
   ================================================== */

.ct-nav,
.ct-nav-item {
  border-radius: var(--ct-radius-pill) !important;
}

/* ==================================================
   7. MOBILE — KEEP SAME TEST VALUES
   ================================================== */

@media (max-width: 560px) {
  .auth-card,
  .hero-panel,
  .panel,
  .action-card,
  .home-main-book-button,
  .home-quick-card,
  .home-status-card,
  .sport-choice-card,
  .week-day-card,
  .court-choice-button,
  .time-card,
  .booking-card,
  .resident-booking-card,
  .security-booking-card,
  .admin-booking-card,
  .manage-court-card,
  .available-court-row,
  .security-summary-card,
  .empty-state-card,
  .signup-card {
    border-radius: var(--ct-radius-card) !important;
  }

  input,
  select,
  textarea,
  .form-group input,
  .form-group select,
  .signup-form input[type="text"],
  .signup-form input[type="password"],
  .signup-form input[type="tel"],
  .modal-form-group input,
  .modal-form-group select {
    border-radius: var(--ct-radius-input) !important;
  }

  .ct-modal-card,
  .signup-modal,
  .rules-modal,
  .inactivity-card {
    border-radius: var(--ct-radius-floating) !important;
  }
}
/* ==================================================
   COURTTRACK CP7.1 — DARK MODE SURFACE / BORDER TONE
   Visual-only polish after CP7 radius test.
   Goal: less outlined, more premium depth.
   ================================================== */

/* Main dark panels: softer border, calmer surface */

body.dark-mode .auth-card,
body.dark-mode .hero-panel,
body.dark-mode .panel {
  border-color: rgba(200, 154, 101, 0.22) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.88), rgba(17, 23, 25, 0.82)) !important;

  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* Inner cards: less wireframe, softer than outer panels */

body.dark-mode .action-card,
body.dark-mode .home-main-book-button,
body.dark-mode .home-quick-card,
body.dark-mode .home-status-card,
body.dark-mode .sport-choice-card,
body.dark-mode .week-day-card,
body.dark-mode .court-choice-button,
body.dark-mode .time-card,
body.dark-mode .booking-card,
body.dark-mode .resident-booking-card,
body.dark-mode .security-booking-card,
body.dark-mode .admin-booking-card,
body.dark-mode .manage-court-card,
body.dark-mode .available-court-row,
body.dark-mode .available-court-card,
body.dark-mode .available-preview-card,
body.dark-mode .security-summary-card,
body.dark-mode .empty-state-card {
  border-color: rgba(200, 154, 101, 0.18) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.045), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.032), rgba(255, 255, 240, 0.020)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

/* Primary feature card may keep a little more presence */

body.dark-mode .home-main-book-button {
  border-color: rgba(200, 154, 101, 0.28) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.13), transparent 42%),
    linear-gradient(160deg, rgba(200, 154, 101, 0.20), rgba(200, 154, 101, 0.10)) !important;
}

/* Section separator lines: calmer and thinner feeling */

body.dark-mode .dashboard .hero-panel h1::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.34),
      rgba(200, 154, 101, 0.10) 48%,
      transparent 100%
    ) !important;
}

body.dark-mode .dashboard .panel h3::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.30),
      rgba(200, 154, 101, 0.085) 48%,
      transparent 100%
    ) !important;
}

/* Top header divider softer */

body.dark-mode .ct-dashboard-header,
body.dark-mode .topbar,
body.dark-mode .auth-card .login-topline {
  border-bottom-color: rgba(200, 154, 101, 0.20) !important;
}

/* Navigation: softer outer ring, keep active strong */

body.dark-mode .ct-nav {
  border-color: rgba(200, 154, 101, 0.20) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.035), rgba(255, 255, 240, 0.022)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

body.dark-mode .ct-nav-item:not(.active) {
  color: rgba(255, 255, 240, 0.62) !important;
}

/* Inputs in dark mode: less heavy border */

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .signup-form input[type="text"],
body.dark-mode .signup-form input[type="password"],
body.dark-mode .signup-form input[type="tel"],
body.dark-mode .modal-form-group input,
body.dark-mode .modal-form-group select {
  border-color: rgba(200, 154, 101, 0.20) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.055), rgba(255, 255, 240, 0.034)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* Text slightly calmer on secondary lines */

body.dark-mode .action-card span,
body.dark-mode .home-quick-card span,
body.dark-mode .home-status-card span,
body.dark-mode .sport-choice-card span,
body.dark-mode .booking-card span,
body.dark-mode .resident-booking-copy span,
body.dark-mode .security-booking-card span,
body.dark-mode .admin-booking-card span,
body.dark-mode .manage-court-card span,
body.dark-mode .available-court-row span {
  color: rgba(255, 255, 240, 0.66) !important;
}

/* Keep important text bright */

body.dark-mode .action-card strong,
body.dark-mode .home-quick-card strong,
body.dark-mode .sport-choice-card strong,
body.dark-mode .booking-card strong,
body.dark-mode .resident-booking-copy strong,
body.dark-mode .security-booking-card strong,
body.dark-mode .admin-booking-card strong,
body.dark-mode .manage-court-card strong,
body.dark-mode .available-court-row strong {
  color: #fffff0 !important;
}
/* ==================================================
   COURTTRACK CP7.2 — MANAGE COURTS ACTION BALANCE
   Visual only.
   Active stays a true pill, but smaller.
   Action buttons stay 12px.
   ================================================== */

/* Keep the court row calm and aligned */

.manage-court-card {
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

/* Action row */

.manage-court-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* ACTIVE = status chip, not button */

.manage-court-actions .court-admin-status {
  height: 28px !important;
  min-height: 28px !important;
  min-width: 72px !important;

  padding: 0 10px !important;

  border-radius: 999px !important;

  font-size: 8.8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* Action buttons = CP59 12px button radius */

.manage-court-actions .small-admin-button {
  height: 36px !important;
  min-height: 36px !important;

  padding: 0 13px !important;

  border-radius: 12px !important;

  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* Button widths */

.manage-court-actions .edit-court-button {
  min-width: 72px !important;
}

.manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  min-width: 92px !important;
}

.manage-court-actions .delete-court-button {
  min-width: 84px !important;
}

/* Softer ACTIVE chip */

.manage-court-actions .court-admin-status.active {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.08) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body:not(.dark-mode) .manage-court-actions .court-admin-status.active {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.07) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

/* Softer EDIT */

.manage-court-actions .edit-court-button {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.075) !important;
  border: 1px solid rgba(200, 154, 101, 0.22) !important;
}

body:not(.dark-mode) .manage-court-actions .edit-court-button {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.065) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

/* Softer DISABLE */

.manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  color: #fffff0 !important;
  background: rgba(255, 255, 240, 0.035) !important;
  border: 1px solid rgba(200, 154, 101, 0.18) !important;
}

body:not(.dark-mode) .manage-court-actions .small-admin-button:not(.edit-court-button):not(.delete-court-button) {
  color: #1f262a !important;
  background: rgba(255, 255, 240, 0.42) !important;
  border-color: rgba(200, 154, 101, 0.22) !important;
}

/* Softer DELETE */

.manage-court-actions .delete-court-button {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.075) !important;
  border: 1px solid rgba(220, 110, 110, 0.26) !important;
}

body:not(.dark-mode) .manage-court-actions .delete-court-button {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.22) !important;
}

/* No hover jumping */

.manage-court-actions .court-admin-status:hover,
.manage-court-actions .small-admin-button:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* ==================================================
   COURTTRACK CP7.3 — SECURITY VISUAL BALANCE
   Visual only.
   Cards 16px / Action buttons 12px / Status chips 999px.
   ================================================== */

/* Security cards should match the calmer admin cards */

.security-booking-card {
  padding: 14px 16px !important;
  border-radius: 16px !important;

  border-color: rgba(200, 154, 101, 0.18) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.04), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.032), rgba(255, 255, 240, 0.020)) !important;

  box-shadow: none !important;
}

body:not(.dark-mode) .security-booking-card {
  border-color: rgba(200, 154, 101, 0.24) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.68), rgba(247, 243, 232, 0.52)) !important;
}

/* Security card text */

.security-booking-card strong {
  margin-bottom: 6px !important;

  font-size: 15.5px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.security-booking-card span {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.32 !important;
}

.security-booking-card .booking-resident-line {
  margin-top: 5px !important;

  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

/* Security status chip */

.security-status-pill {
  height: 28px !important;
  min-height: 28px !important;
  min-width: 78px !important;

  padding: 0 10px !important;

  border-radius: 999px !important;

  font-size: 8.8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* Expected */

.security-status-pill {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.08) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body:not(.dark-mode) .security-status-pill {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.07) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

/* Arrived */

.security-status-pill.arrived {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.08) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

body:not(.dark-mode) .security-status-pill.arrived {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.07) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

/* No Show */

.security-status-pill.no-show {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.075) !important;
  border-color: rgba(220, 110, 110, 0.24) !important;
}

body:not(.dark-mode) .security-status-pill.no-show {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.22) !important;
}

/* Security Today action row */

.security-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.security-card-actions .security-status-pill {
  flex: 0 0 auto !important;
}

/* Mark Arrived / No Show = buttons, not pills */

.security-card-actions .small-admin-button {
  height: 36px !important;
  min-height: 36px !important;

  padding: 0 13px !important;

  border-radius: 12px !important;

  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* Mark Arrived */

.security-card-actions .small-admin-button:not(.no-show-button) {
  min-width: 116px !important;

  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.075) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body:not(.dark-mode) .security-card-actions .small-admin-button:not(.no-show-button) {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.065) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

/* No Show */

.security-card-actions .no-show-button {
  min-width: 86px !important;

  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.075) !important;
  border: 1px solid rgba(220, 110, 110, 0.24) !important;
}

body:not(.dark-mode) .security-card-actions .no-show-button {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.22) !important;
}

/* Summary cards */

.security-summary-card {
  border-radius: 16px !important;
  padding: 12px 10px !important;
  box-shadow: none !important;
}

.security-summary-card strong {
  font-size: 21px !important;
  font-weight: 850 !important;
}

.security-summary-card span {
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.045em !important;
}

/* No hover jumping */

.security-card-actions .small-admin-button:hover,
.security-card-actions .security-status-pill:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Mobile */

@media (max-width: 620px) {
  .security-booking-card {
    grid-template-columns: 1fr !important;
  }

  .security-card-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 460px) {
  .security-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .security-card-actions .security-status-pill,
  .security-card-actions .small-admin-button {
    width: 100% !important;
  }
}
/* ==================================================
   COURTTRACK CP7.4 — SECURITY TODAY ACTION ROW FIX
   Visual only.
   Expected = small status chip.
   Mark Arrived / No Show = real buttons.
   ================================================== */

/* Security Today card row */

.security-booking-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

/* Force the action area into a cleaner shape */

.security-booking-card .security-card-actions {
  display: grid !important;
  grid-template-columns: 76px 112px 82px !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 8px !important;
}

/* EXPECTED / ARRIVED / NO SHOW status chip inside action row */

.security-booking-card .security-card-actions .security-status-pill {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* MARK ARRIVED button */

.security-booking-card .security-card-actions .small-admin-button:not(.no-show-button) {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  padding: 0 10px !important;

  border-radius: 12px !important;

  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.075) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* NO SHOW button */

.security-booking-card .security-card-actions .no-show-button {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;

  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;

  padding: 0 10px !important;

  border-radius: 12px !important;

  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.075) !important;
  border: 1px solid rgba(220, 110, 110, 0.24) !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* Dark mode status chip colors */

body.dark-mode .security-booking-card .security-card-actions .security-status-pill {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.08) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body.dark-mode .security-booking-card .security-card-actions .security-status-pill.arrived {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.08) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

body.dark-mode .security-booking-card .security-card-actions .security-status-pill.no-show {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.075) !important;
  border-color: rgba(220, 110, 110, 0.24) !important;
}

/* Light mode */

body:not(.dark-mode) .security-booking-card .security-card-actions .security-status-pill {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.07) !important;
  border: 1px solid rgba(80, 180, 120, 0.18) !important;
}

body:not(.dark-mode) .security-booking-card .security-card-actions .small-admin-button:not(.no-show-button) {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.065) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

body:not(.dark-mode) .security-booking-card .security-card-actions .no-show-button {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.22) !important;
}

/* Remove interaction jump */

.security-booking-card .security-card-actions .security-status-pill:hover,
.security-booking-card .security-card-actions .small-admin-button:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Tablet / narrow */

@media (max-width: 760px) {
  .security-booking-card {
    grid-template-columns: 1fr !important;
  }

  .security-booking-card .security-card-actions {
    justify-content: start !important;
  }
}

/* Phone */

@media (max-width: 460px) {
  .security-booking-card .security-card-actions {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .security-booking-card .security-card-actions .security-status-pill,
  .security-booking-card .security-card-actions .small-admin-button,
  .security-booking-card .security-card-actions .no-show-button {
    width: 100% !important;
    max-width: none !important;
  }
}
/* ==================================================
   COURTTRACK CP7.5 — SECURITY BOOKINGS RESULT CHIP FIX
   Visual only.
   Applies to Security Bookings list, not Security Today action buttons.
   ================================================== */

/* Standalone status chip on Security Bookings list */

.security-booking-card > .security-status-pill {
  justify-self: end !important;
  align-self: center !important;

  width: auto !important;
  min-width: 74px !important;
  max-width: none !important;

  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;

  padding: 0 11px !important;

  border-radius: 999px !important;

  font-size: 8.8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

/* ARRIVED chip — calm champagne result */

.security-booking-card > .security-status-pill.arrived {
  color: #c89a65 !important;
  background: rgba(200, 154, 101, 0.075) !important;
  border: 1px solid rgba(200, 154, 101, 0.20) !important;
}

body:not(.dark-mode) .security-booking-card > .security-status-pill.arrived {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.065) !important;
  border-color: rgba(200, 154, 101, 0.20) !important;
}

/* NO SHOW chip — clear but quieter */

.security-booking-card > .security-status-pill.no-show {
  color: #f1a5a5 !important;
  background: rgba(194, 74, 64, 0.070) !important;
  border: 1px solid rgba(220, 110, 110, 0.24) !important;
}

body:not(.dark-mode) .security-booking-card > .security-status-pill.no-show {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border-color: rgba(194, 74, 64, 0.22) !important;
}

/* EXPECTED chip, if visible on Security Bookings */

.security-booking-card > .security-status-pill:not(.arrived):not(.no-show) {
  color: #8fc9ad !important;
  background: rgba(80, 180, 120, 0.075) !important;
  border: 1px solid rgba(80, 180, 120, 0.20) !important;
}

body:not(.dark-mode) .security-booking-card > .security-status-pill:not(.arrived):not(.no-show) {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.065) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

/* Updated-by line should read like audit detail, not main content */

.security-booking-card .booking-action-line {
  margin-top: 6px !important;

  color: rgba(200, 154, 101, 0.84) !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body:not(.dark-mode) .security-booking-card .booking-action-line {
  color: rgba(138, 99, 56, 0.86) !important;
}

/* Keep Security Bookings cards calm */

.security-booking-card {
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

.security-booking-card strong {
  font-size: 15.5px !important;
  font-weight: 850 !important;
}

.security-booking-card span {
  font-size: 12.5px !important;
}
/* ==================================================
   COURTTRACK CP7.6A — SECURITY BADGE TEXT CENTER FIX
   Visual only.
   Fixes ARRIVED / NO SHOW / EXPECTED text alignment inside pills.
   ================================================== */

/* Security Bookings result badges */

.security-booking-card > .security-status-pill {
  display: inline-grid !important;
  place-items: center !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  min-width: 64px !important;
  padding: 0 10px !important;

  border-radius: 999px !important;

  font-size: 8.4px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
}

/* Security Today status chip */

.security-card-actions .security-status-pill {
  display: inline-grid !important;
  place-items: center !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  padding: 0 10px !important;

  border-radius: 999px !important;

  font-size: 8.2px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
}

/* Small optical correction for Montserrat uppercase text */

.security-booking-card > .security-status-pill,
.security-card-actions .security-status-pill {
  transform: none !important;
}

.security-booking-card > .security-status-pill::before,
.security-card-actions .security-status-pill::before {
  content: none !important;
}
/* ==================================================
   COURTTRACK CP7.6B — NO SHOW BADGE OPTICAL CENTER FIX
   Visual only.
   Fixes NO SHOW badge text alignment.
   ================================================== */

/* Security Bookings standalone NO SHOW result badge */

.security-booking-card > .security-status-pill.no-show {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;

  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;

  padding: 1px 0 0 !important;

  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
}

/* Security Today NO SHOW action button remains a button, but text centers cleanly */

.security-card-actions .no-show-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding-top: 1px !important;

  text-align: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
/* ==================================================
   COURTTRACK CP7.7 — SOFT CLUB IVORY LIGHT MODE
   Visual only.
   Based on latest ORYX SportsTrack light mode standard.
   Page #F7F1E4 / Cards #FFFFF0 / Inner #FBF6EA / Inputs #FFFDF3.
   ================================================== */

:root {
  --st-light-page: #f7f1e4;
  --st-light-card: #fffff0;
  --st-light-inner: #fbf6ea;
  --st-light-raised: #fffdf3;

  --st-primary-text: #1f262a;
  --st-secondary-text: #5b676d;
  --st-muted-text: rgba(31, 38, 42, 0.58);

  --st-champagne: #c89a65;
  --st-soft-border: rgba(200, 154, 101, 0.26);
  --st-strong-border: rgba(200, 154, 101, 0.38);
}

/* ==================================================
   1. PAGE BACKGROUND
   ================================================== */

body:not(.dark-mode) {
  color: var(--st-primary-text) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.11), transparent 34%),
    radial-gradient(circle at bottom right, rgba(91, 103, 109, 0.08), transparent 38%),
    linear-gradient(135deg, var(--st-light-page), #f2eadb) !important;
}

/* ==================================================
   2. MAIN CARD SURFACES
   ================================================== */

body:not(.dark-mode) .auth-card,
body:not(.dark-mode) .hero-panel,
body:not(.dark-mode) .panel {
  color: var(--st-primary-text) !important;

  border-color: var(--st-soft-border) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.46), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.96), rgba(255, 255, 240, 0.90)) !important;

  box-shadow:
    0 18px 46px rgba(31, 38, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* ==================================================
   3. INNER PANELS / DATA CARDS
   ================================================== */

body:not(.dark-mode) .action-card,
body:not(.dark-mode) .home-main-book-button,
body:not(.dark-mode) .home-quick-card,
body:not(.dark-mode) .home-status-card,
body:not(.dark-mode) .sport-choice-card,
body:not(.dark-mode) .week-day-card,
body:not(.dark-mode) .court-choice-button,
body:not(.dark-mode) .time-card,
body:not(.dark-mode) .booking-card,
body:not(.dark-mode) .resident-booking-card,
body:not(.dark-mode) .security-booking-card,
body:not(.dark-mode) .admin-booking-card,
body:not(.dark-mode) .manage-court-card,
body:not(.dark-mode) .available-court-row,
body:not(.dark-mode) .available-court-card,
body:not(.dark-mode) .available-preview-card,
body:not(.dark-mode) .security-summary-card,
body:not(.dark-mode) .empty-state-card {
  color: var(--st-primary-text) !important;

  border-color: var(--st-soft-border) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(251, 246, 234, 0.92), rgba(255, 253, 243, 0.82)) !important;

  box-shadow:
    0 10px 24px rgba(31, 38, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

/* Main Book button can stay slightly more champagne */

body:not(.dark-mode) .home-main-book-button {
  border-color: rgba(200, 154, 101, 0.36) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(160deg, rgba(200, 154, 101, 0.22), rgba(200, 154, 101, 0.12)) !important;
}

/* ==================================================
   4. LIGHT MODE TEXT HIERARCHY
   ================================================== */

body:not(.dark-mode) .hero-panel h1,
body:not(.dark-mode) .action-card strong,
body:not(.dark-mode) .home-main-book-button strong,
body:not(.dark-mode) .home-quick-card strong,
body:not(.dark-mode) .home-status-card strong,
body:not(.dark-mode) .sport-choice-card strong,
body:not(.dark-mode) .week-day-card strong,
body:not(.dark-mode) .court-choice-button strong,
body:not(.dark-mode) .time-card strong,
body:not(.dark-mode) .booking-card strong,
body:not(.dark-mode) .resident-booking-copy strong,
body:not(.dark-mode) .security-booking-card strong,
body:not(.dark-mode) .admin-booking-card strong,
body:not(.dark-mode) .manage-court-card strong,
body:not(.dark-mode) .available-court-row strong {
  color: var(--st-primary-text) !important;
}

body:not(.dark-mode) .action-card span,
body:not(.dark-mode) .home-main-book-button span,
body:not(.dark-mode) .home-quick-card span,
body:not(.dark-mode) .home-status-card span,
body:not(.dark-mode) .sport-choice-card span,
body:not(.dark-mode) .booking-card span,
body:not(.dark-mode) .resident-booking-copy span,
body:not(.dark-mode) .security-booking-card span,
body:not(.dark-mode) .admin-booking-card span,
body:not(.dark-mode) .manage-court-card span,
body:not(.dark-mode) .available-court-row span {
  color: var(--st-secondary-text) !important;
}

/* Labels / section titles stay champagne */

body:not(.dark-mode) .hero-panel p,
body:not(.dark-mode) .panel h3,
body:not(.dark-mode) .form-group label,
body:not(.dark-mode) .signup-form label,
body:not(.dark-mode) .modal-form-group label {
  color: var(--st-champagne) !important;
}

/* ==================================================
   5. SEPARATOR LINES
   ================================================== */

body:not(.dark-mode) .dashboard .hero-panel h1::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.42),
      rgba(200, 154, 101, 0.14) 48%,
      transparent 100%
    ) !important;
}

body:not(.dark-mode) .dashboard .panel h3::after {
  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.36),
      rgba(200, 154, 101, 0.12) 48%,
      transparent 100%
    ) !important;
}

body:not(.dark-mode) .ct-dashboard-header {
  border-bottom-color: rgba(200, 154, 101, 0.24) !important;
}

/* ==================================================
   6. INPUTS / SELECTS
   ================================================== */

body:not(.dark-mode) .form-group input,
body:not(.dark-mode) .form-group select,
body:not(.dark-mode) .signup-form input[type="text"],
body:not(.dark-mode) .signup-form input[type="password"],
body:not(.dark-mode) .signup-form input[type="tel"],
body:not(.dark-mode) .modal-form-group input,
body:not(.dark-mode) .modal-form-group select {
  color: var(--st-primary-text) !important;

  border-color: rgba(200, 154, 101, 0.30) !important;

  background:
    linear-gradient(180deg, rgba(255, 253, 243, 0.98), rgba(255, 250, 237, 0.90)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body:not(.dark-mode) input::placeholder {
  color: rgba(31, 38, 42, 0.45) !important;
}

/* ==================================================
   7. NAVIGATION LIGHT MODE
   ================================================== */

body:not(.dark-mode) .ct-nav {
  border-color: rgba(200, 154, 101, 0.30) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.86), rgba(251, 246, 234, 0.72)) !important;

  box-shadow:
    0 12px 28px rgba(31, 38, 42, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

body:not(.dark-mode) .ct-nav-item {
  color: var(--st-secondary-text) !important;
}

body:not(.dark-mode) .ct-nav-item.active {
  color: var(--st-primary-text) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.20), transparent 42%),
    linear-gradient(160deg, #d8bd83, var(--st-champagne)) !important;

  border-color: rgba(200, 154, 101, 0.54) !important;
}

/* ==================================================
   8. SELECTED BOOKING CHOICE CARDS
   ================================================== */

/* In light mode, selected choices should stay dark/gunmetal for clear contrast */

body:not(.dark-mode) button.sport-choice-card.active,
body:not(.dark-mode) button.week-day-card.active,
body:not(.dark-mode) button.court-choice-button.active {
  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.62) !important;

  background:
    radial-gradient(circle at top left, rgba(200, 154, 101, 0.14), transparent 42%),
    linear-gradient(160deg, #1f262a, #111719) !important;

  box-shadow:
    0 12px 24px rgba(31, 38, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body:not(.dark-mode) button.sport-choice-card.active strong,
body:not(.dark-mode) button.sport-choice-card.active span,
body:not(.dark-mode) button.week-day-card.active strong,
body:not(.dark-mode) button.week-day-card.active span,
body:not(.dark-mode) button.court-choice-button.active strong,
body:not(.dark-mode) button.court-choice-button.active span {
  color: #fffff0 !important;
}

/* ==================================================
   9. BUTTON COLOR ROLES
   ================================================== */

/* General primary/create action = champagne */

body:not(.dark-mode) .primary-button,
body:not(.dark-mode) .add-court-form .primary-button,
body:not(.dark-mode) .add-court-button {
  color: var(--st-primary-text) !important;

  border-color: rgba(200, 154, 101, 0.42) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(160deg, #d8bd83, var(--st-champagne)) !important;
}

/* Confirm/save success actions = green */

body:not(.dark-mode) .booking-confirm-button,
body:not(.dark-mode) .booking-review-actions .booking-confirm-button,
body:not(.dark-mode) .modal-safe-button {
  color: #fffff0 !important;

  border-color: rgba(80, 180, 120, 0.42) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 240, 0.12), transparent 42%),
    linear-gradient(160deg, #3b8552, #145631) !important;
}

/* Destructive / warning actions = red */

body:not(.dark-mode) .delete-court-button,
body:not(.dark-mode) .no-show-button,
body:not(.dark-mode) .admin-cancel-booking-button,
body:not(.dark-mode) .booking-change-time-button,
body:not(.dark-mode) .modal-danger-button {
  color: #9b3333 !important;

  border-color: rgba(194, 74, 64, 0.26) !important;
  background: rgba(194, 74, 64, 0.055) !important;
}

/* Secondary buttons */

body:not(.dark-mode) .secondary-button,
body:not(.dark-mode) .logout-button {
  color: var(--st-primary-text) !important;

  border-color: rgba(200, 154, 101, 0.28) !important;
  background: rgba(255, 253, 243, 0.68) !important;
}

/* ==================================================
   10. STATUS CHIPS LIGHT MODE
   ================================================== */

body:not(.dark-mode) .resident-status-pill,
body:not(.dark-mode) .security-status-pill,
body:not(.dark-mode) .court-admin-status,
body:not(.dark-mode) .resident-booking-copy em {
  box-shadow: none !important;
}

body:not(.dark-mode) .resident-status-pill.approved,
body:not(.dark-mode) .security-status-pill,
body:not(.dark-mode) .court-admin-status.active,
body:not(.dark-mode) .resident-booking-copy em {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.065) !important;
  border-color: rgba(80, 180, 120, 0.18) !important;
}

body:not(.dark-mode) .security-status-pill.arrived {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.060) !important;
  border-color: rgba(200, 154, 101, 0.18) !important;
}

body:not(.dark-mode) .security-status-pill.no-show,
body:not(.dark-mode) .court-admin-status.inactive {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.050) !important;
  border-color: rgba(194, 74, 64, 0.20) !important;
}
/* ==================================================
   COURTTRACK CP7.8
   Light mode selected booking cards + admin pill cleanup
   Visual only
   ================================================== */

/* ------------------------------------------
   1) LIGHT MODE — selected booking choice cards
   Make selected sport / court choices feel
   lighter and more premium, less black-heavy.
   ------------------------------------------ */

body:not(.dark-mode) button.sport-choice-card.active,
body:not(.dark-mode) button.court-choice-button.active {
  color: var(--st-primary-text) !important;
  border-color: rgba(200, 154, 101, 0.42) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 42%),
    linear-gradient(160deg, rgba(216, 189, 131, 0.88), rgba(255, 253, 243, 0.96)) !important;

  box-shadow:
    0 10px 24px rgba(31, 38, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

body:not(.dark-mode) button.sport-choice-card.active strong,
body:not(.dark-mode) button.court-choice-button.active strong {
  color: var(--st-primary-text) !important;
}

body:not(.dark-mode) button.sport-choice-card.active span,
body:not(.dark-mode) button.court-choice-button.active span {
  color: var(--st-secondary-text) !important;
}

/* Optional tiny hover polish */
body:not(.dark-mode) button.sport-choice-card.active:hover,
body:not(.dark-mode) button.court-choice-button.active:hover {
  filter: brightness(0.99) !important;
}


/* ------------------------------------------
   2) ADMIN BOOKINGS — status pill cleanup
   Center the text properly inside the pill
   and align it better next to action buttons.
   ------------------------------------------ */

body:not(.dark-mode) .admin-booking-card .security-status-pill,
body:not(.dark-mode) .admin-booking-card .booking-status-pill,
body:not(.dark-mode) .admin-booking-card .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Keep destructive button aligned with the pill */
body:not(.dark-mode) .admin-booking-card .admin-cancel-booking-button,
body:not(.dark-mode) .admin-booking-card .cancel-booking-button {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* If the action row exists, force cleaner alignment */
body:not(.dark-mode) .admin-booking-card .booking-actions,
body:not(.dark-mode) .admin-booking-card .admin-booking-actions,
body:not(.dark-mode) .admin-booking-card .card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
/* ==================================================
   COURTTRACK CP7.9
   Soft Club Ivory booking cards cleanup
   Visual only. Light mode only.
   ================================================== */

/* ------------------------------------------
   1) Booking list cards — resident/admin/security
   ------------------------------------------ */

body:not(.dark-mode) .resident-booking-card,
body:not(.dark-mode) .admin-booking-card,
body:not(.dark-mode) .security-booking-card,
body:not(.dark-mode) .booking-card {
  color: #1f262a !important;

  border-color: rgba(200, 154, 101, 0.24) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(180deg, rgba(255, 253, 243, 0.96), rgba(251, 246, 234, 0.84)) !important;

  box-shadow:
    0 8px 20px rgba(31, 38, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
}

/* Main booking title */

body:not(.dark-mode) .resident-booking-card strong,
body:not(.dark-mode) .admin-booking-card strong,
body:not(.dark-mode) .security-booking-card strong,
body:not(.dark-mode) .booking-card strong {
  color: #1f262a !important;
  font-weight: 850 !important;
}

/* Secondary booking details */

body:not(.dark-mode) .resident-booking-card span,
body:not(.dark-mode) .admin-booking-card span,
body:not(.dark-mode) .security-booking-card span,
body:not(.dark-mode) .booking-card span {
  color: #5b676d !important;
}

/* Resident / villa line should be stronger than audit line */

body:not(.dark-mode) .booking-resident-line,
body:not(.dark-mode) .resident-booking-copy span {
  color: #1f262a !important;
  font-weight: 750 !important;
}

/* Updated by audit line */

body:not(.dark-mode) .booking-action-line {
  color: rgba(31, 38, 42, 0.58) !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


/* ------------------------------------------
   2) Booking card action rows
   ------------------------------------------ */

body:not(.dark-mode) .resident-booking-card,
body:not(.dark-mode) .admin-booking-card,
body:not(.dark-mode) .security-booking-card {
  align-items: center !important;
}

body:not(.dark-mode) .resident-booking-cancel,
body:not(.dark-mode) .admin-cancel-booking-button,
body:not(.dark-mode) .cancel-booking-button {
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.055) !important;
  border: 1px solid rgba(194, 74, 64, 0.22) !important;

  font-size: 9.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}


/* ------------------------------------------
   3) Final status chips in booking cards
   ------------------------------------------ */

body:not(.dark-mode) .resident-booking-copy em,
body:not(.dark-mode) .admin-booking-card .security-status-pill,
body:not(.dark-mode) .security-booking-card > .security-status-pill,
body:not(.dark-mode) .booking-card .security-status-pill {
  display: inline-grid !important;
  place-items: center !important;

  height: 24px !important;
  min-height: 24px !important;

  padding: 0 10px !important;

  border-radius: 999px !important;

  font-size: 8.4px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;

  box-shadow: none !important;
}

/* Confirmed / Expected */

body:not(.dark-mode) .resident-booking-copy em,
body:not(.dark-mode) .security-booking-card > .security-status-pill:not(.arrived):not(.no-show),
body:not(.dark-mode) .admin-booking-card .security-status-pill:not(.arrived):not(.no-show) {
  color: #216a3f !important;
  background: rgba(80, 180, 120, 0.055) !important;
  border: 1px solid rgba(80, 180, 120, 0.18) !important;
}

/* Arrived */

body:not(.dark-mode) .security-booking-card > .security-status-pill.arrived,
body:not(.dark-mode) .admin-booking-card .security-status-pill.arrived {
  color: #8a6338 !important;
  background: rgba(200, 154, 101, 0.055) !important;
  border: 1px solid rgba(200, 154, 101, 0.18) !important;
}

/* No Show */

body:not(.dark-mode) .security-booking-card > .security-status-pill.no-show,
body:not(.dark-mode) .admin-booking-card .security-status-pill.no-show {
  color: #9b3333 !important;
  background: rgba(194, 74, 64, 0.050) !important;
  border: 1px solid rgba(194, 74, 64, 0.20) !important;
}


/* ------------------------------------------
   4) Admin booking row alignment
   ------------------------------------------ */

body:not(.dark-mode) .admin-booking-actions,
body:not(.dark-mode) .booking-actions,
body:not(.dark-mode) .card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Prevent action elements from looking uneven */

body:not(.dark-mode) .admin-booking-actions .security-status-pill,
body:not(.dark-mode) .booking-actions .security-status-pill,
body:not(.dark-mode) .card-actions .security-status-pill {
  height: 28px !important;
  min-height: 28px !important;
}


/* ------------------------------------------
   5) Mobile safety
   ------------------------------------------ */

@media (max-width: 560px) {
  body:not(.dark-mode) .resident-booking-card,
  body:not(.dark-mode) .admin-booking-card,
  body:not(.dark-mode) .security-booking-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body:not(.dark-mode) .admin-booking-actions,
  body:not(.dark-mode) .booking-actions,
  body:not(.dark-mode) .card-actions {
    justify-content: flex-start !important;
  }

  body:not(.dark-mode) .resident-booking-cancel,
  body:not(.dark-mode) .admin-cancel-booking-button,
  body:not(.dark-mode) .cancel-booking-button {
    width: 100% !important;
  }
}
/* ==================================================
   COURTTRACK CP7.11
   Soft Club Ivory Resident Home cleanup
   Visual only. Light mode only.
   ================================================== */

/* ------------------------------------------
   Home hero / dashboard panels
   ------------------------------------------ */

body:not(.dark-mode) .home-hero-panel,
body:not(.dark-mode) .hero-panel {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.44), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.97), rgba(255, 255, 240, 0.91)) !important;

  border-color: rgba(200, 154, 101, 0.24) !important;

  box-shadow:
    0 16px 38px rgba(31, 38, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body:not(.dark-mode) .home-hero-panel h1,
body:not(.dark-mode) .hero-panel h1 {
  color: #1f262a !important;
}

/* ------------------------------------------
   Main Book a Court card
   Make it premium champagne, not heavy gold.
   ------------------------------------------ */

body:not(.dark-mode) .home-main-book-button {
  min-height: 84px !important;

  border-color: rgba(200, 154, 101, 0.34) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(160deg, rgba(216, 189, 131, 0.58), rgba(251, 246, 234, 0.92)) !important;

  box-shadow:
    0 10px 22px rgba(31, 38, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

body:not(.dark-mode) .home-main-book-button strong {
  color: #1f262a !important;
}

body:not(.dark-mode) .home-main-book-button span {
  color: #5b676d !important;
}

/* Icon inside main action card, if present */

body:not(.dark-mode) .home-main-book-button svg,
body:not(.dark-mode) .home-main-book-button img,
body:not(.dark-mode) .home-main-book-button .home-action-icon {
  opacity: 0.82 !important;
}

/* ------------------------------------------
   Quick Access cards
   ------------------------------------------ */

body:not(.dark-mode) .home-quick-card,
body:not(.dark-mode) .action-card {
  border-color: rgba(200, 154, 101, 0.23) !important;

  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 42%),
    linear-gradient(180deg, rgba(255, 253, 243, 0.94), rgba(251, 246, 234, 0.78)) !important;

  box-shadow:
    0 8px 18px rgba(31, 38, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

body:not(.dark-mode) .home-quick-card strong,
body:not(.dark-mode) .action-card strong {
  color: #1f262a !important;
}

body:not(.dark-mode) .home-quick-card span,
body:not(.dark-mode) .action-card span {
  color: #5b676d !important;
}

/* ------------------------------------------
   Club status cards
   ------------------------------------------ */

body:not(.dark-mode) .home-status-card {
  border-color: rgba(200, 154, 101, 0.22) !important;

  background:
    linear-gradient(180deg, rgba(255, 253, 243, 0.94), rgba(251, 246, 234, 0.78)) !important;

  box-shadow:
    0 8px 18px rgba(31, 38, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

body:not(.dark-mode) .home-status-card strong {
  color: #1f262a !important;
}

body:not(.dark-mode) .home-status-card span {
  color: #5b676d !important;
}

/* ------------------------------------------
   Light-mode card hover should stay calm
   ------------------------------------------ */

body:not(.dark-mode) .home-main-book-button:hover,
body:not(.dark-mode) .home-quick-card:hover,
body:not(.dark-mode) .action-card:hover,
body:not(.dark-mode) .home-status-card:hover {
  transform: none !important;
  filter: brightness(0.995) !important;
  box-shadow:
    0 9px 20px rgba(31, 38, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

/* ==================================================
   COURTTRACK CP8.1G LOCKED — ORYX SportsTrack login/access screen
   Final consolidated login CSS.
   Splash removed. Inline login messages only. No login-screen modals.
   ================================================== */

/* Splash screens are no longer part of the app entry. */
.splash-screen {
  display: none !important;
}

.sportstrack-login-page {
  min-height: 100vh !important;
  min-height: 100svh !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 34px 20px !important;
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 50% 24%, rgba(200, 154, 101, 0.20), transparent 24%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 240, 0.055), transparent 36%),
    linear-gradient(180deg, #151b1e 0%, #1f262a 56%, #171d20 100%) !important;

  color: #fffff0 !important;
}

.sportstrack-login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 240, 0.025), transparent),
    radial-gradient(circle at top, rgba(255, 255, 240, 0.035), transparent 42%);
}

.sportstrack-login-shell {
  width: min(100%, 430px) !important;
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sportstrack-login-glow {
  position: absolute !important;
  top: -58px !important;
  left: 50% !important;
  width: 370px !important;
  height: 220px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle,
      rgba(200, 154, 101, 0.18),
      rgba(200, 154, 101, 0.055) 38%,
      transparent 70%
    ) !important;

  filter: blur(10px) !important;
  opacity: 0.85 !important;
}

.sportstrack-login-brand {
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  margin-bottom: 0 !important;
  text-align: center !important;
}

.sportstrack-suite-kicker {
  margin: 0 0 18px !important;

  color: rgba(200, 154, 101, 0.82) !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.sportstrack-login-logo {
  width: min(298px, 78vw) !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: none !important;
}

.sportstrack-login-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.sportstrack-login-field {
  display: grid !important;
  gap: 8px !important;
}

.sportstrack-login-field span {
  margin-top: 4px !important;

  color: rgba(200, 154, 101, 0.9) !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.sportstrack-login-field input {
  width: 100% !important;

  min-height: 54px !important;
  height: 54px !important;
  padding: 0 18px !important;

  border-radius: 10px !important;
  border: 1px solid rgba(200, 154, 101, 0.36) !important;

  background:
    linear-gradient(180deg, rgba(18, 24, 27, 0.96), rgba(12, 17, 19, 0.94)) !important;

  color: #fffff0 !important;
  -webkit-text-fill-color: #fffff0 !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 240, 0.05),
    0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

.sportstrack-login-field input::placeholder {
  color: rgba(255, 255, 240, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 240, 0.32) !important;
  opacity: 1 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.sportstrack-login-field input:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;

  background:
    linear-gradient(180deg, rgba(18, 24, 27, 0.98), rgba(12, 17, 19, 0.96)) !important;

  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.12),
    inset 0 1px 0 rgba(255, 255, 240, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

.sportstrack-login-message {
  display: none !important;
}

.sportstrack-login-notice {
  min-height: 18px !important;
  margin: 2px 0 6px !important;

  color: transparent !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  text-align: center !important;
  letter-spacing: 0 !important;

  opacity: 1 !important;
}

.sportstrack-login-notice.is-visible {
  color: rgba(200, 154, 101, 0.94) !important;
}

.sportstrack-login-notice.is-warning {
  color: rgba(255, 122, 122, 0.96) !important;
}

.sportstrack-login-notice.is-info {
  color: rgba(200, 154, 101, 0.94) !important;
}

.sportstrack-login-button,
.sportstrack-request-button {
  width: 100% !important;

  min-height: 54px !important;
  height: 54px !important;
  padding: 0 18px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(200, 154, 101, 0.46) !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(200, 154, 101, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.055), rgba(255, 255, 240, 0.018)),
    linear-gradient(180deg, rgba(18, 24, 27, 0.98), rgba(10, 15, 17, 0.96)) !important;

  color: #fffff0 !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.11em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;

  cursor: pointer !important;

  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 240, 0.06) !important;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease !important;
}

.sportstrack-login-button {
  margin-top: 4px !important;
}

.sportstrack-request-button {
  margin-top: 0 !important;
}

.sportstrack-login-button:hover,
.sportstrack-login-button:focus,
.sportstrack-request-button:hover,
.sportstrack-request-button:focus {
  transform: translateY(-1px) !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(200, 154, 101, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.068), rgba(255, 255, 240, 0.024)),
    linear-gradient(180deg, rgba(20, 27, 30, 0.98), rgba(11, 16, 18, 0.96)) !important;

  border-color: rgba(200, 154, 101, 0.58) !important;
}

.sportstrack-contact-button {
  align-self: center !important;

  width: fit-content !important;
  margin: 28px auto 0 !important;
  padding: 8px 12px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.045), rgba(255, 255, 240, 0.018)) !important;

  color: rgba(255, 255, 240, 0.72) !important;

  font-family: "Montserrat", "Avenir Next", Avenir, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.105em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;

  cursor: pointer !important;

  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 240, 0.035) !important;
}

.sportstrack-contact-button:hover,
.sportstrack-contact-button:focus {
  color: rgba(255, 255, 240, 0.90) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.06), rgba(255, 255, 240, 0.025)) !important;
}

/* Login screen should never open modal-style signup/contact notices. */
.sportstrack-login-page ~ .app-modal,
.login-enter ~ .app-modal {
  display: none !important;
}

@media (max-width: 420px) {
  .sportstrack-login-page {
    padding: 28px 18px !important;
  }

  .sportstrack-suite-kicker {
    margin-bottom: 16px !important;
    font-size: 9px !important;
    letter-spacing: 0.20em !important;
  }

  .sportstrack-login-logo {
    width: min(286px, 78vw) !important;
  }
}
/* ==================================================
   COURTTRACK CP8.3C
   Resident Home CSS only
   Styles new home modules after CP8.3B.
   ================================================== */

/* Resident home hero: calm daily-use tone */
.home-hero-panel {
  margin-bottom: 16px !important;
}

.home-hero-panel h1 {
  max-width: 680px !important;
}

/* Courts at a glance: make ratios feel like data, not buttons */
.home-status-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.home-status-card {
  min-height: 92px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
}

.home-status-card strong {
  display: block !important;

  margin-bottom: 8px !important;

  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.home-status-card span {
  display: block !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Main availability action */
.home-primary-panel .home-main-book-button {
  min-height: 92px !important;
  width: 100% !important;

  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  text-align: left !important;
}

.home-primary-panel .home-main-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 auto !important;
}

.home-primary-panel .home-main-book-button strong {
  display: block !important;

  margin-bottom: 5px !important;

  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.home-primary-panel .home-main-book-button span {
  display: block !important;

  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

/* Next available list */
.quick-actions .action-card {
  min-height: 72px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.quick-actions .action-card strong {
  margin-bottom: 6px !important;
}

.quick-actions .action-card span {
  line-height: 1.35 !important;
}

/* My activity + support cards */
.home-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px !important;
}

.home-quick-card {
  min-height: 82px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;

  text-align: left !important;
}

/* Div support cards should not feel clickable */
div.home-quick-card {
  cursor: default !important;
}

button.home-quick-card {
  cursor: pointer !important;
}

.home-quick-card strong {
  margin-bottom: 6px !important;
}

.home-quick-card span {
  line-height: 1.35 !important;
}

/* Mobile */
@media (max-width: 560px) {
  .home-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .home-status-card {
    min-height: 86px !important;
    padding: 13px 10px !important;
  }

  .home-status-card strong {
    font-size: 21px !important;
  }

  .home-status-card span {
    font-size: 9px !important;
  }

  .home-quick-grid {
    grid-template-columns: 1fr !important;
  }

  .home-primary-panel .home-main-book-button {
    min-height: 88px !important;
  }
}
/* ==================================================
   COURTTRACK CP8.3E
   Resident Home portrait grid CSS only.
   ================================================== */

/* Two-column home rows on wider screens */
.home-layout-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* Portrait panels should feel balanced side-by-side */
.home-portrait-panel {
  min-height: 100% !important;
  margin-bottom: 0 !important;
}

/* Court hours moved higher: make it compact */
.home-support-panel {
  margin-bottom: 16px !important;
}

.home-support-panel .home-quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.home-support-panel .home-quick-card {
  min-height: 74px !important;
  padding: 13px 14px !important;
}

/* Courts at a glance inside portrait card */
.home-status-grid-portrait {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.home-status-grid-portrait .home-status-card {
  min-height: 68px !important;
  padding: 13px 15px !important;
}

.home-status-grid-portrait .home-status-card strong {
  font-size: 22px !important;
  margin-bottom: 6px !important;
}

.home-status-grid-portrait .home-status-card span {
  font-size: 9.5px !important;
}

/* Start Here card: make main button fill portrait space nicely */
.home-start-panel {
  display: flex !important;
  flex-direction: column !important;
}

.home-start-panel .home-main-book-button {
  flex: 1 !important;
  min-height: 230px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  gap: 16px !important;
  padding: 22px !important;
}

.home-start-panel .home-main-icon {
  width: 48px !important;
  height: 48px !important;
}

.home-start-panel .home-main-book-button strong {
  font-size: 18px !important;
  line-height: 1.12 !important;
}

.home-start-panel .home-main-book-button span {
  max-width: 240px !important;
}

/* Next Available portrait list */
.home-next-panel .quick-actions {
  display: grid !important;
  gap: 10px !important;
}

.home-next-panel .action-card {
  min-height: 68px !important;
  padding: 13px 15px !important;
}

/* My Court Activity portrait card */
.home-activity-panel .home-quick-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.home-activity-panel .home-quick-card {
  min-height: 92px !important;
}

/* Mobile: stack everything cleanly */
@media (max-width: 720px) {
  .home-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .home-portrait-panel {
    margin-bottom: 16px !important;
  }

  .home-support-panel .home-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-start-panel .home-main-book-button {
    min-height: 92px !important;

    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 15px 17px !important;
  }

  .home-start-panel .home-main-icon {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 480px) {
  .home-support-panel .home-quick-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ==================================================
   COURTTRACK CP8.3G-REPAIR
   Home header separators + Start Here neutral card.
   CSS only.
   ================================================== */

/* Home panels: normal block layout, no flex header weirdness */
.home-portrait-panel,
.home-support-panel {
  display: block !important;
}

/* Gold section headers MUST stay on one line */
.home-portrait-panel > h3,
.home-support-panel > h3 {
  display: block !important;

  width: 100% !important;
  min-height: auto !important;

  margin: 0 0 18px !important;

  color: #c89a65 !important;

  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.085em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Separator goes UNDER the header text, never next to it */
.home-portrait-panel > h3::after,
.home-support-panel > h3::after {
  content: "" !important;

  display: block !important;

  width: 100% !important;
  height: 1px !important;

  margin: 12px 0 0 !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      rgba(200, 154, 101, 0.46),
      rgba(200, 154, 101, 0.16) 48%,
      transparent 100%
    ) !important;
}

/* Make all panel bodies start cleanly below the separator */
.home-portrait-panel > h3 + *,
.home-support-panel > h3 + * {
  margin-top: 0 !important;
}

/* Support cards: top-aligned text */
.home-support-panel .home-quick-card {
  justify-content: flex-start !important;
  align-items: flex-start !important;

  min-height: 78px !important;
  padding: 15px 16px !important;
}

.home-support-panel .home-quick-card strong {
  margin: 0 0 8px !important;
  min-height: 18px !important;
}

.home-support-panel .home-quick-card span {
  line-height: 1.3 !important;
}

/* Portrait cards: top-aligned body content */
.home-status-grid-portrait .home-status-card,
.home-next-panel .action-card,
.home-activity-panel .home-quick-card {
  justify-content: flex-start !important;
  align-items: flex-start !important;

  padding-top: 16px !important;
}

.home-status-grid-portrait .home-status-card strong,
.home-next-panel .action-card strong,
.home-activity-panel .home-quick-card strong {
  margin: 0 0 7px !important;
}

/* START HERE: remove the gold promo background completely */
.home-start-panel .home-main-book-button,
body.dark-mode .home-start-panel .home-main-book-button {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 240, 0.035), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.72), rgba(17, 23, 25, 0.66)) !important;

  background-color: #1f262a !important;

  border-color: rgba(200, 154, 101, 0.24) !important;

  color: #fffff0 !important;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.home-start-panel .home-main-book-button:hover,
body.dark-mode .home-start-panel .home-main-book-button:hover {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 240, 0.045), transparent 42%),
    linear-gradient(180deg, rgba(31, 38, 42, 0.78), rgba(17, 23, 25, 0.70)) !important;

  border-color: rgba(200, 154, 101, 0.38) !important;
  transform: translateY(-1px) !important;
}

.home-start-panel .home-main-book-button strong,
body.dark-mode .home-start-panel .home-main-book-button strong {
  color: #fffff0 !important;
}

.home-start-panel .home-main-book-button span,
body.dark-mode .home-start-panel .home-main-book-button span {
  color: rgba(255, 255, 240, 0.72) !important;
}

/* Start Here icon can stay champagne, but less loud */
.home-start-panel .home-main-icon {
  opacity: 0.82 !important;
}

/* Light mode version */
body:not(.dark-mode) .home-start-panel .home-main-book-button {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 240, 0.62), rgba(247, 243, 232, 0.52)) !important;

  background-color: #fffff0 !important;

  color: #1f262a !important;

  border-color: rgba(200, 154, 101, 0.28) !important;

  box-shadow:
    0 8px 20px rgba(31, 38, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
}

body:not(.dark-mode) .home-start-panel .home-main-book-button strong {
  color: #1f262a !important;
}

body:not(.dark-mode) .home-start-panel .home-main-book-button span {
  color: #5b676d !important;
}

/* Mobile safety */
@media (max-width: 720px) {
  .home-portrait-panel > h3,
  .home-support-panel > h3 {
    white-space: nowrap !important;
  }

  .home-start-panel .home-main-icon {
    margin-bottom: 0 !important;
  }
}
/* ==================================================
   COURTTRACK CP9.1C
   Signup CSS repair after email/phone split.
   CSS only.
   ================================================== */

/* Signup title should be app typography, not poster typography */
.signup-card .auth-copy h1 {
  font-family: var(--font-sans) !important;
  font-size: clamp(28px, 4.4vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

/* Signup subtitle */
.signup-card .auth-copy span {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

/* Make email/tel fields match the rest of the signup inputs */
.signup-form input[type="email"],
.signup-form input[type="tel"] {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;

  padding: 0 16px !important;

  border-radius: var(--ct-radius-input, 10px) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.075), rgba(255, 255, 240, 0.045)) !important;

  color: #fffff0 !important;
  -webkit-text-fill-color: #fffff0 !important;

  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

.signup-form input[type="email"]::placeholder,
.signup-form input[type="tel"]::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
  -webkit-text-fill-color: rgba(255, 255, 240, 0.42) !important;
  opacity: 1 !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Focus state for new field types */
.signup-form input[type="email"]:focus,
.signup-form input[type="tel"]:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;

  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.052) !important;
}

/* Light mode support */
body:not(.dark-mode) .signup-form input[type="email"],
body:not(.dark-mode) .signup-form input[type="tel"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.76), rgba(255, 255, 240, 0.56)) !important;

  color: #1f262a !important;
  -webkit-text-fill-color: #1f262a !important;

  border-color: rgba(200, 154, 101, 0.30) !important;
}

body:not(.dark-mode) .signup-form input[type="email"]::placeholder,
body:not(.dark-mode) .signup-form input[type="tel"]::placeholder {
  color: rgba(91, 103, 109, 0.62) !important;
  -webkit-text-fill-color: rgba(91, 103, 109, 0.62) !important;
}

/* Checkbox block: make the longer acceptance text breathe better */
.rules-check-row {
  align-items: flex-start !important;
}

.rules-check-row input {
  margin-top: 2px !important;
}

.rules-check-row span {
  font-size: 13px !important;
  line-height: 1.38 !important;
}
/* ==================================================
   COURTTRACK CP9.1E
   Inline signup warnings.
   ================================================== */

.signup-warning {
  display: none;

  margin-top: 2px;

  color: #f1a5a5;

  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
}

.signup-warning.is-visible {
  display: block;
}

.signup-rules-warning {
  margin-top: -2px;
  padding-left: 2px;
}

body:not(.dark-mode) .signup-warning {
  color: #9b3333;
}
/* ==================================================
   COURTTRACK CP9.1E-REPAIR
   Signup field layout repair after inline warnings.
   CSS only.
   ================================================== */

/* Signup form must stay as a clean vertical form */
.signup-form {
  display: grid !important;
  gap: 13px !important;
}

/* Normal signup labels: label text above full-width input */
.signup-form label:not(.rules-check-row) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;

  width: 100% !important;
  margin: 0 !important;

  color: #c89a65 !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

/* All signup inputs must be full width, including email/tel */
.signup-form label:not(.rules-check-row) input,
.signup-form input[type="text"],
.signup-form input[type="password"],
.signup-form input[type="email"],
.signup-form input[type="tel"] {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 50px !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 0 16px !important;

  border-radius: var(--ct-radius-input, 10px) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.075), rgba(255, 255, 240, 0.045)) !important;

  color: #fffff0 !important;
  -webkit-text-fill-color: #fffff0 !important;

  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  outline: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Placeholder consistency */
.signup-form input::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
  -webkit-text-fill-color: rgba(255, 255, 240, 0.42) !important;
  opacity: 1 !important;

  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Inline warning notes */
.signup-warning {
  display: none !important;

  width: 100% !important;
  margin: 0 !important;

  color: #f1a5a5 !important;

  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.signup-warning.is-visible {
  display: block !important;
}

/* Rules checkbox keeps its own row layout */
.signup-form .rules-check-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 !important;
}

.signup-form .rules-check-row input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;

  margin-top: 3px !important;
  padding: 0 !important;
}

.signup-form .rules-check-row span {
  display: block !important;

  color: #c89a65 !important;

  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Rules warning sits below the checkbox block */
.signup-rules-warning {
  margin-top: -5px !important;
}

/* Signup buttons full-width again */
.signup-form > .primary-button,
.signup-form > .secondary-button {
  width: 100% !important;
  max-width: none !important;
}

/* Light mode support */
body:not(.dark-mode) .signup-form label:not(.rules-check-row) input,
body:not(.dark-mode) .signup-form input[type="text"],
body:not(.dark-mode) .signup-form input[type="password"],
body:not(.dark-mode) .signup-form input[type="email"],
body:not(.dark-mode) .signup-form input[type="tel"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 240, 0.76), rgba(255, 255, 240, 0.56)) !important;

  color: #1f262a !important;
  -webkit-text-fill-color: #1f262a !important;
}

body:not(.dark-mode) .signup-form input::placeholder {
  color: rgba(91, 103, 109, 0.62) !important;
  -webkit-text-fill-color: rgba(91, 103, 109, 0.62) !important;
}

body:not(.dark-mode) .signup-warning {
  color: #9b3333 !important;
}


/* ==================================================
   COURTTRACK CP9.1E-REALFIX
   Signup layout repair only.
   - Restores missing signup-form layout
   - Keeps fields stacked cleanly
   - Places Villa number + Appendix side by side
   - Keeps inline warnings under each field
   ================================================== */

.signup-card .signup-form {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
}

.signup-card .signup-field {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.signup-card .signup-field > span {
  display: block !important;
  color: #c89a65 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.signup-card .signup-field input[type="text"],
.signup-card .signup-field input[type="password"],
.signup-card .signup-field input[type="email"],
.signup-card .signup-field input[type="tel"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: var(--radius-input, 16px) !important;
  border: 1px solid rgba(200, 154, 101, 0.30) !important;
  background: rgba(255, 255, 240, 0.055) !important;
  color: #fffff0 !important;
  -webkit-text-fill-color: #fffff0 !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.signup-card .signup-field input::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
  -webkit-text-fill-color: rgba(255, 255, 240, 0.42) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.signup-card .signup-field input:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(200, 154, 101, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.052) !important;
}

.signup-villa-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.42fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
}

.signup-card .signup-warning {
  display: none !important;
  width: 100% !important;
  margin: 0 !important;
  color: #f1a5a5 !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.signup-card .signup-warning.is-visible {
  display: block !important;
}

.signup-card .rules-box {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}

.signup-card .rules-check-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
}

.signup-card .rules-check-row input {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.signup-card .rules-check-row span {
  display: block !important;
  color: #c89a65 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.signup-card .signup-rules-warning {
  margin-top: -4px !important;
}

body:not(.dark-mode) .signup-card .signup-field input[type="text"],
body:not(.dark-mode) .signup-card .signup-field input[type="password"],
body:not(.dark-mode) .signup-card .signup-field input[type="email"],
body:not(.dark-mode) .signup-card .signup-field input[type="tel"] {
  background: rgba(255, 255, 240, 0.70) !important;
  color: #1f262a !important;
  -webkit-text-fill-color: #1f262a !important;
}

body:not(.dark-mode) .signup-card .signup-field input::placeholder {
  color: rgba(91, 103, 109, 0.62) !important;
  -webkit-text-fill-color: rgba(91, 103, 109, 0.62) !important;
}

body:not(.dark-mode) .signup-card .signup-warning {
  color: #9b3333 !important;
}

@media (max-width: 520px) {
  .signup-villa-row {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 0.42fr) !important;
    gap: 10px !important;
  }
}
/* ==================================================
   COURTTRACK CP9.1F
   Resident-facing R&R modal content.
   Scroll safety only. No redesign.
   ================================================== */

.resident-rules-modal {
  max-height: min(86vh, 760px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.resident-rules-content {
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.rules-modal-intro {
  color: #c89a65 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.resident-rules-list {
  display: grid !important;
  gap: 12px !important;

  margin: 0 !important;
  padding-left: 20px !important;
}

.resident-rules-list li {
  padding-left: 4px !important;
}

.resident-rules-list strong {
  display: block !important;
  margin-bottom: 4px !important;

  color: #fffff0 !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.resident-rules-list span {
  display: block !important;

  color: rgba(255, 255, 240, 0.72) !important;

  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

.rules-modal-note {
  margin-top: 14px !important;

  color: rgba(255, 255, 240, 0.78) !important;

  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

body:not(.dark-mode) .resident-rules-list strong {
  color: #1f262a !important;
}

body:not(.dark-mode) .resident-rules-list span,
body:not(.dark-mode) .rules-modal-note {
  color: #5b676d !important;
}
/* ==================================================
   COURTTRACK CP9.1G
   SportsTrack scrollbar for Resident R&R modal.
   CSS only.
   ================================================== */

/* Firefox */
.resident-rules-content {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(200, 154, 101, 0.72) rgba(255, 255, 240, 0.08) !important;
}

/* Chrome / Edge / Safari */
.resident-rules-content::-webkit-scrollbar {
  width: 8px !important;
}

.resident-rules-content::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(255, 255, 240, 0.07) !important;
}

.resident-rules-content::-webkit-scrollbar-thumb {
  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(216, 189, 131, 0.95),
      rgba(200, 154, 101, 0.88),
      rgba(159, 115, 54, 0.9)
    ) !important;

  border: 2px solid rgba(31, 38, 42, 0.96) !important;
}

.resident-rules-content::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 240, 0.92),
      rgba(200, 154, 101, 0.96)
    ) !important;
}

/* Light mode scrollbar */
body:not(.dark-mode) .resident-rules-content {
  scrollbar-color: rgba(200, 154, 101, 0.78) rgba(31, 38, 42, 0.08) !important;
}

body:not(.dark-mode) .resident-rules-content::-webkit-scrollbar-track {
  background: rgba(31, 38, 42, 0.08) !important;
}

body:not(.dark-mode) .resident-rules-content::-webkit-scrollbar-thumb {
  border: 2px solid rgba(255, 255, 240, 0.92) !important;

  background:
    linear-gradient(
      180deg,
      rgba(216, 189, 131, 0.96),
      rgba(200, 154, 101, 0.9),
      rgba(159, 115, 54, 0.88)
    ) !important;
}
/* ==================================================
   COURTTRACK CP10.8A
   Resident R&R mobile number padding.
   CSS only.
   ================================================== */

.resident-rules-content {
  padding-left: 4px !important;
}

.resident-rules-list {
  padding-left: 30px !important;
  list-style-position: outside !important;
}

.resident-rules-list li {
  padding-left: 2px !important;
}

@media (max-width: 520px) {
  .resident-rules-content {
    padding-left: 6px !important;
    padding-right: 8px !important;
  }

  .resident-rules-list {
    padding-left: 34px !important;
  }
}
/* ==================================================
   COURTTRACK CP11.1A
   AttendTrack visual alignment:
   dark canvas and main surfaces only.

   CSS only.
   No layout or logic changes.
   ================================================== */

/* FLAT DARK PAGE CANVAS */

body.dark-mode {
  background: #101517 !important;
  background-image: none !important;
}

body.dark-mode .dashboard {
  min-height: 100svh !important;

  background: #101517 !important;
  background-image: none !important;
}

body.dark-mode .dashboard-shell {
  background: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
}

/* HEADER FOUNDATION */

body.dark-mode .ct-dashboard-header {
  border-bottom-color: rgba(200, 154, 101, 0.24) !important;
}

body.dark-mode .resident-header-card {
  background: #181f22 !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.28) !important;
  box-shadow: none !important;
}

/* FLAT NAVIGATION SURFACE */

body.dark-mode .ct-nav {
  background: #151b1e !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.26) !important;

  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* HERO SURFACE */

body.dark-mode .hero-panel {
  background: #1a2124 !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.30) !important;
  box-shadow: none !important;
}

/* PRIMARY WORKING PANELS */

body.dark-mode .panel {
  background: #20282c !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.26) !important;
  box-shadow: none !important;
}

/* FLAT CHAMPAGNE SEPARATORS */

body.dark-mode .dashboard .hero-panel h1::after,
body.dark-mode .dashboard .panel h3::after,
body.dark-mode .home-portrait-panel > h3::after,
body.dark-mode .home-support-panel > h3::after {
  background: rgba(200, 154, 101, 0.24) !important;
  background-image: none !important;
}
/* ==================================================
   COURTTRACK CP11.1B
   AttendTrack selected surfaces and hover rims.

   CSS only.
   No layout or logic changes.
   ================================================== */

/* SELECTED NAVIGATION — DARK WITH CHAMPAGNE RIM */

body.dark-mode .ct-nav-item.active {
  background: #1c2427 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.78) !important;
  box-shadow: none !important;
}

/* SELECTED BOOKING CARDS — NO GOLD FILLS */

body.dark-mode button.sport-choice-card.active,
body.dark-mode button.week-day-card.active,
body.dark-mode button.court-choice-button.active {
  background: #1c2427 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.82) !important;
  box-shadow: none !important;
}

body.dark-mode button.sport-choice-card.active strong,
body.dark-mode button.sport-choice-card.active span,
body.dark-mode button.week-day-card.active strong,
body.dark-mode button.week-day-card.active span,
body.dark-mode button.court-choice-button.active strong,
body.dark-mode button.court-choice-button.active span {
  color: #fffff0 !important;
}

/* CALM INTERACTIVE FEEDBACK — NO MOVEMENT OR GLOW */

body.dark-mode .ct-nav-item,
body.dark-mode button.sport-choice-card,
body.dark-mode button.week-day-card,
body.dark-mode button.court-choice-button,
body.dark-mode button.home-quick-card,
body.dark-mode button.home-main-book-button {
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease !important;
}

body.dark-mode .ct-nav-item:hover,
body.dark-mode button.sport-choice-card:hover,
body.dark-mode button.week-day-card:hover,
body.dark-mode button.court-choice-button:hover,
body.dark-mode button.home-quick-card:hover,
body.dark-mode button.home-main-book-button:hover {
  transform: none !important;

  background: #222b2f !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.72) !important;
  box-shadow: none !important;
}

/* KEEP SELECTED STATE CLEAR WHILE HOVERING */

body.dark-mode .ct-nav-item.active:hover,
body.dark-mode button.sport-choice-card.active:hover,
body.dark-mode button.week-day-card.active:hover,
body.dark-mode button.court-choice-button.active:hover {
  background: #242d31 !important;
  border-color: #c89a65 !important;
}
/* ==================================================
   COURTTRACK CP11.3A
   AttendTrack-style positive action buttons.

   Flat green rim and green text.
   CSS only.
   ================================================== */

/* CONFIRM / POSITIVE ACTIONS */

body.dark-mode .booking-review-actions .booking-confirm-button,
body.dark-mode .inactivity-actions .primary-button {
  background: rgba(59, 133, 82, 0.045) !important;
  background-image: none !important;

  color: #8fc9ad !important;

  border: 1px solid rgba(93, 153, 124, 0.74) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* POSITIVE ACTION HOVER */

body.dark-mode .booking-review-actions .booking-confirm-button:hover,
body.dark-mode .inactivity-actions .primary-button:hover {
  background: rgba(59, 133, 82, 0.095) !important;
  background-image: none !important;

  color: #a5ddbf !important;

  border-color: rgba(123, 214, 160, 0.92) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* KEYBOARD FOCUS */

body.dark-mode .booking-review-actions .booking-confirm-button:focus-visible,
body.dark-mode .inactivity-actions .primary-button:focus-visible {
  outline: 2px solid rgba(123, 214, 160, 0.72) !important;
  outline-offset: 3px !important;
}
/* ==================================================
   COURTTRACK CP11.3B
   AttendTrack-style neutral booking actions.

   Flat champagne rim and champagne text.
   CSS only.
   ================================================== */

/* NEUTRAL BOOKING ACTIONS */

body.dark-mode .booking-review-actions .booking-next-button,
body.dark-mode .booking-review-actions .booking-change-time-button,
body.dark-mode .booking-review-actions .secondary-button {
  background: rgba(200, 154, 101, 0.035) !important;
  background-image: none !important;

  color: #c89a65 !important;

  border: 1px solid rgba(200, 154, 101, 0.62) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* NEUTRAL ACTION HOVER */

body.dark-mode .booking-review-actions .booking-next-button:hover,
body.dark-mode .booking-review-actions .booking-change-time-button:hover,
body.dark-mode .booking-review-actions .secondary-button:hover {
  background: rgba(200, 154, 101, 0.085) !important;
  background-image: none !important;

  color: #d8bd83 !important;

  border-color: rgba(216, 189, 131, 0.92) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* KEYBOARD FOCUS */

body.dark-mode .booking-review-actions .booking-next-button:focus-visible,
body.dark-mode .booking-review-actions .booking-change-time-button:focus-visible,
body.dark-mode .booking-review-actions .secondary-button:focus-visible {
  outline: 2px solid rgba(200, 154, 101, 0.72) !important;
  outline-offset: 3px !important;
}
/* ==================================================
   COURTTRACK CP11.3C
   AttendTrack-style inactivity modal shell.

   Flat surface, tighter spacing, restrained shadow.
   CSS only.
   ================================================== */

body.dark-mode .inactivity-overlay {
  background: rgba(6, 9, 10, 0.78) !important;
  backdrop-filter: blur(3px) !important;
}

body.dark-mode .inactivity-card {
  width: min(420px, calc(100vw - 28px)) !important;

  padding: 24px !important;

  background: #1a2124 !important;
  background-image: none !important;

  border: 1px solid rgba(200, 154, 101, 0.34) !important;
  border-radius: 18px !important;

  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28) !important;
}

body.dark-mode .inactivity-card h2 {
  margin: 0 0 10px !important;

  color: #fffff0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

body.dark-mode .inactivity-card p {
  max-width: 310px !important;

  margin: 0 auto 20px !important;

  color: rgba(255, 255, 240, 0.72) !important;

  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

body.dark-mode .inactivity-actions {
  gap: 10px !important;
}

body.dark-mode .inactivity-note {
  margin-top: 14px !important;

  color: rgba(255, 255, 240, 0.58) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}
/* ==================================================
   COURTTRACK CP11.3D
   Calmer inactivity logout action.
   Red rim, minimal red fill.
   ================================================== */

body.dark-mode .inactivity-actions .secondary-button {
  background: rgba(194, 74, 64, 0.025) !important;
  background-image: none !important;

  color: #e7a3a3 !important;

  border-color: rgba(220, 110, 110, 0.58) !important;

  box-shadow: none !important;
}

body.dark-mode .inactivity-actions .secondary-button:hover {
  background: rgba(194, 74, 64, 0.065) !important;

  color: #f1b4b4 !important;

  border-color: rgba(235, 130, 130, 0.82) !important;
}
/* ==================================================
   COURTTRACK CP11.2A
   AttendTrack-style inner card surfaces.

   Flat gunmetal.
   Subtle champagne rim.
   No gradients, glow, lift or heavy shadow.
   ================================================== */

/* STANDARD INNER / DATA CARDS */

body.dark-mode .action-card,
body.dark-mode .home-quick-card,
body.dark-mode .home-status-card,
body.dark-mode .booking-card,
body.dark-mode .resident-booking-card,
body.dark-mode .security-booking-card,
body.dark-mode .admin-booking-card,
body.dark-mode .manage-court-card,
body.dark-mode .available-court-row,
body.dark-mode .security-summary-card,
body.dark-mode .empty-state-card {
  background: #242c30 !important;
  background-image: none !important;

  border: 1px solid rgba(200, 154, 101, 0.24) !important;
  border-radius: 14px !important;

  box-shadow: none !important;
  transform: none !important;
}

/* INACTIVE BOOKING CHOICE CARDS */

body.dark-mode button.sport-choice-card:not(.active),
body.dark-mode button.week-day-card:not(.active),
body.dark-mode button.court-choice-button:not(.active),
body.dark-mode button.time-card {
  background: #242c30 !important;
  background-image: none !important;

  border: 1px solid rgba(200, 154, 101, 0.24) !important;
  border-radius: 14px !important;

  box-shadow: none !important;
  transform: none !important;
}

/* SUBTLE INTERACTIVE FEEDBACK */

body.dark-mode button.sport-choice-card:not(.active):hover,
body.dark-mode button.week-day-card:not(.active):hover,
body.dark-mode button.court-choice-button:not(.active):hover,
body.dark-mode button.time-card.available:hover,
body.dark-mode button.home-quick-card:hover {
  background: #283136 !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.62) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* DISABLED / PASSED TIME CARDS STAY QUIET */

body.dark-mode button.time-card.unavailable,
body.dark-mode button.time-card.past {
  background: #1c2326 !important;
  background-image: none !important;

  border-color: rgba(200, 154, 101, 0.13) !important;

  box-shadow: none !important;
}
/* ==================================================
   COURTTRACK CP11.3E
   Neutral admin utility actions + logout hover.

   Flat champagne rim.
   No gold fill.
   CSS only.
   ================================================== */

/* CREATE ADMIN BOOKING */

body.dark-mode .admin-actions-panel > .primary-button {
  background: rgba(200, 154, 101, 0.035) !important;
  background-image: none !important;

  color: #c89a65 !important;

  border: 1px solid rgba(200, 154, 101, 0.62) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ADD COURT — OPEN FORM BUTTON ONLY */

body.dark-mode button.primary-button[onclick="openAddCourtForm()"] {
  background: rgba(200, 154, 101, 0.035) !important;
  background-image: none !important;

  color: #c89a65 !important;

  border: 1px solid rgba(200, 154, 101, 0.62) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* NEUTRAL ADMIN HOVER */

body.dark-mode .admin-actions-panel > .primary-button:hover,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:hover {
  background: rgba(200, 154, 101, 0.085) !important;
  background-image: none !important;

  color: #d8bd83 !important;

  border-color: rgba(216, 189, 131, 0.92) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* LOGOUT — FLAT NEUTRAL BUTTON */

body.dark-mode .ct-dashboard-header .logout-button {
  background: rgba(200, 154, 101, 0.025) !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.38) !important;

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

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease !important;
}

/* LOGOUT HOVER */

body.dark-mode .ct-dashboard-header .logout-button:hover {
  background: rgba(200, 154, 101, 0.085) !important;
  background-image: none !important;

  color: #d8bd83 !important;

  border-color: rgba(216, 189, 131, 0.86) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* KEYBOARD FOCUS */

body.dark-mode .admin-actions-panel > .primary-button:focus-visible,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:focus-visible,
body.dark-mode .ct-dashboard-header .logout-button:focus-visible {
  outline: 2px solid rgba(200, 154, 101, 0.68) !important;
  outline-offset: 3px !important;
}
/* ==================================================
   COURTTRACK CP11.3F
   AttendTrack-style restrained neutral buttons.

   Ivory text.
   Champagne rim.
   Very subtle hover response.
   ================================================== */

/* NEUTRAL UTILITY BUTTONS */

body.dark-mode .ct-dashboard-header .logout-button,
body.dark-mode .admin-actions-panel > .primary-button,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"],
body.dark-mode .booking-review-actions .booking-next-button,
body.dark-mode .booking-review-actions .booking-change-time-button,
body.dark-mode .booking-review-actions .secondary-button {
  background: rgba(255, 255, 240, 0.018) !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.46) !important;

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

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease !important;
}

/* RESTRAINED HOVER */

body.dark-mode .ct-dashboard-header .logout-button:hover,
body.dark-mode .admin-actions-panel > .primary-button:hover,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:hover,
body.dark-mode .booking-review-actions .booking-next-button:hover,
body.dark-mode .booking-review-actions .booking-change-time-button:hover,
body.dark-mode .booking-review-actions .secondary-button:hover {
  background: rgba(200, 154, 101, 0.045) !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.72) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* KEYBOARD FOCUS */

body.dark-mode .ct-dashboard-header .logout-button:focus-visible,
body.dark-mode .admin-actions-panel > .primary-button:focus-visible,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:focus-visible,
body.dark-mode .booking-review-actions .booking-next-button:focus-visible,
body.dark-mode .booking-review-actions .booking-change-time-button:focus-visible,
body.dark-mode .booking-review-actions .secondary-button:focus-visible {
  outline: 2px solid rgba(200, 154, 101, 0.62) !important;
  outline-offset: 3px !important;
}
/* ==================================================
   COURTTRACK CP11.3G
   AttendTrack-style admin utility restraint.

   Calmer neutral hover.
   Structured court rows.
   Buttons use 12px radius, not pills.
   ================================================== */

/* LARGE NEUTRAL ADMIN ACTIONS */

body.dark-mode .admin-actions-panel > .primary-button,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"] {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.38) !important;

  box-shadow: none !important;
  transform: none !important;
}

body.dark-mode .admin-actions-panel > .primary-button:hover,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:hover {
  background: #1e2629 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.56) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* CURRENT COURT ROWS */

body.dark-mode .manage-court-card {
  background: #242c30 !important;
  background-image: none !important;

  border: 1px solid rgba(200, 154, 101, 0.20) !important;
  border-radius: 14px !important;

  padding: 14px 16px !important;

  box-shadow: none !important;
}

/* COURT ACTION BUTTON SHAPE */

body.dark-mode .manage-court-actions .small-admin-button {
  min-width: 70px !important;
  min-height: 34px !important;

  padding: 0 12px !important;

  border-radius: 12px !important;

  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.30) !important;

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

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease !important;
}

/* EDIT / DISABLE HOVER */

body.dark-mode .manage-court-actions .small-admin-button:hover {
  background: #1f272a !important;

  color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.54) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* DELETE REMAINS DESTRUCTIVE BUT FLAT */

body.dark-mode .manage-court-actions .delete-court-button {
  background: rgba(194, 74, 64, 0.018) !important;

  color: #e7a3a3 !important;

  border-color: rgba(220, 110, 110, 0.44) !important;
}

body.dark-mode .manage-court-actions .delete-court-button:hover {
  background: rgba(194, 74, 64, 0.045) !important;

  color: #f1b4b4 !important;

  border-color: rgba(220, 110, 110, 0.66) !important;
}

/* ACTIVE STATUS REMAINS A TRUE PILL */

body.dark-mode .manage-court-actions .court-admin-status {
  border-radius: 999px !important;
}

/* MOBILE ACTION WRAP */

@media (max-width: 620px) {
  body.dark-mode .manage-court-actions {
    width: 100% !important;
    margin-top: 10px !important;
  }

  body.dark-mode .manage-court-actions .small-admin-button {
    flex: 1 1 auto !important;
    min-width: 76px !important;
  }
}
/* ==================================================
   COURTTRACK CP11.3H
   Neutral action lock.

   Dark background.
   Ivory text.
   Champagne border.
   Brighter border on hover.
   No gold fill.
   ================================================== */

/* ALL NEUTRAL ADMIN / HEADER ACTIONS */

body.dark-mode .ct-dashboard-header .logout-button,
body.dark-mode .admin-actions-panel > button.primary-button,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"],
body.dark-mode .manage-court-actions button.small-admin-button:not(.delete-court-button) {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.40) !important;
  border-radius: 12px !important;

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

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease !important;
}

/* HOVER — BORDER LIGHTS UP ONLY */

body.dark-mode .ct-dashboard-header .logout-button:hover,
body.dark-mode .admin-actions-panel > button.primary-button:hover,
body.dark-mode button.primary-button[onclick="openAddCourtForm()"]:hover,
body.dark-mode .manage-court-actions button.small-admin-button:not(.delete-court-button):hover {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: #c89a65 !important;

  box-shadow: none !important;
  transform: none !important;
}

/* REMOVE OLD EDIT-SPECIFIC GOLD TREATMENT */

body.dark-mode .manage-court-actions .edit-court-button,
body.dark-mode .manage-court-actions .edit-court-button:hover {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-radius: 12px !important;
}

/* KEEP THE NEUTRAL COURT BUTTONS CONSISTENT */

body.dark-mode .manage-court-actions button.small-admin-button:not(.delete-court-button) {
  min-width: 70px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
}

/* ACTIVE IS A STATUS PILL — NOT AN ACTION BUTTON */

body.dark-mode .manage-court-actions .court-admin-status {
  border-radius: 999px !important;
}

/* DELETE REMAINS RED */

body.dark-mode .manage-court-actions .delete-court-button {
  border-radius: 12px !important;
}
/* ==================================================
   COURTTRACK CP11.3I
   Court management action row lock.

   Consistent dimensions and shape.
   Active = green status.
   Edit / Disable = neutral.
   Delete = clear destructive action.
   ================================================== */

/* CONSISTENT SIZE AND SHAPE */

body.dark-mode .manage-court-actions .court-admin-status,
body.dark-mode .manage-court-actions .small-admin-button {
  min-width: 72px !important;
  height: 34px !important;
  min-height: 34px !important;

  padding: 0 12px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;

  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ACTIVE STATUS — SAME SHAPE, QUIET GREEN */

body.dark-mode .manage-court-actions .court-admin-status.active {
  background: rgba(80, 180, 120, 0.035) !important;
  background-image: none !important;

  color: #8fc9ad !important;

  border: 1px solid rgba(80, 180, 120, 0.42) !important;
}

/* EDIT + DISABLE — IDENTICAL NEUTRAL SYSTEM */

body.dark-mode .manage-court-actions .small-admin-button:not(.delete-court-button) {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.40) !important;
}

body.dark-mode .manage-court-actions .small-admin-button:not(.delete-court-button):hover {
  background: #1b2225 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: #c89a65 !important;

  box-shadow: none !important;
  transform: none !important;
}

/* DELETE — CLEARER RED, STILL FLAT */

body.dark-mode .manage-court-actions .delete-court-button {
  background: rgba(194, 74, 64, 0.025) !important;
  background-image: none !important;

  color: #f1a5a5 !important;

  border: 1px solid rgba(220, 110, 110, 0.62) !important;
}

body.dark-mode .manage-court-actions .delete-court-button:hover {
  background: rgba(194, 74, 64, 0.055) !important;

  color: #ffc0c0 !important;

  border-color: rgba(235, 130, 130, 0.88) !important;

  box-shadow: none !important;
  transform: none !important;
}
/* ==================================================
   COURTTRACK CP11.4A
   AttendTrack-style admin inputs and dropdowns.

   Flat gunmetal controls.
   10px radius.
   Champagne focus rim.
   No gradient or glow.
   ================================================== */

/* ADMIN FORM LABELS */

body.dark-mode .add-court-form .form-group label,
body.dark-mode .ct-modal-card .modal-form-group label {
  display: block !important;

  margin: 0 0 7px !important;

  color: #c89a65 !important;

  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

/* ADMIN INPUTS + DROPDOWNS */

body.dark-mode .add-court-form .form-group input,
body.dark-mode .add-court-form .form-group select,
body.dark-mode .ct-modal-card .modal-form-group input,
body.dark-mode .ct-modal-card .modal-form-group select {
  width: 100% !important;
  min-height: 50px !important;

  padding: 0 14px !important;

  border: 1px solid rgba(200, 154, 101, 0.30) !important;
  border-radius: 10px !important;

  background: #161d20 !important;
  background-image: none !important;

  color: #fffff0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 16px !important;
  font-weight: 650 !important;

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

  color-scheme: dark !important;
}

/* USE CLEAN NATIVE DROPDOWN ARROW */

body.dark-mode .add-court-form .form-group select,
body.dark-mode .ct-modal-card .modal-form-group select {
  appearance: auto !important;
  cursor: pointer !important;
}

/* PLACEHOLDERS */

body.dark-mode .add-court-form .form-group input::placeholder,
body.dark-mode .ct-modal-card .modal-form-group input::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
  opacity: 1 !important;
}

/* HOVER */

body.dark-mode .add-court-form .form-group input:hover,
body.dark-mode .add-court-form .form-group select:hover,
body.dark-mode .ct-modal-card .modal-form-group input:hover,
body.dark-mode .ct-modal-card .modal-form-group select:hover {
  border-color: rgba(200, 154, 101, 0.52) !important;
}

/* FOCUS */

body.dark-mode .add-court-form .form-group input:focus,
body.dark-mode .add-court-form .form-group select:focus,
body.dark-mode .ct-modal-card .modal-form-group input:focus,
body.dark-mode .ct-modal-card .modal-form-group select:focus {
  border-color: #c89a65 !important;

  background: #182024 !important;

  box-shadow: none !important;
  outline: none !important;
}

/* DROPDOWN OPTIONS */

body.dark-mode .add-court-form .form-group select option,
body.dark-mode .ct-modal-card .modal-form-group select option {
  background: #161d20 !important;
  color: #fffff0 !important;
}
/* ==================================================
   COURTTRACK CP11.4B
   Admin form semantic actions.

   Save = flat green rim.
   Cancel = flat red rim.
   Restrained hover feedback.
   ================================================== */

/* SAVE COURT */

body.dark-mode .add-court-form .primary-button {
  min-height: 50px !important;

  background: rgba(59, 133, 82, 0.025) !important;
  background-image: none !important;

  color: #8fc9ad !important;

  border: 1px solid rgba(93, 153, 124, 0.62) !important;
  border-radius: 12px !important;

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

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease !important;
}

body.dark-mode .add-court-form .primary-button:hover {
  background: rgba(59, 133, 82, 0.055) !important;

  color: #a5ddbf !important;

  border-color: rgba(123, 214, 160, 0.90) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ADD COURT FORM CANCEL */

body.dark-mode .add-court-form .secondary-button {
  min-height: 50px !important;

  background: rgba(194, 74, 64, 0.018) !important;
  background-image: none !important;

  color: #e7a3a3 !important;

  border: 1px solid rgba(220, 110, 110, 0.48) !important;
  border-radius: 12px !important;

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

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease !important;
}

body.dark-mode .add-court-form .secondary-button:hover {
  background: rgba(194, 74, 64, 0.045) !important;

  color: #f1b4b4 !important;

  border-color: rgba(235, 130, 130, 0.78) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* EDIT MODAL SAVE */

body.dark-mode .ct-modal-card .modal-safe-button {
  background: rgba(59, 133, 82, 0.025) !important;
  background-image: none !important;

  color: #8fc9ad !important;

  border-color: rgba(93, 153, 124, 0.62) !important;

  box-shadow: none !important;
  transform: none !important;
}

body.dark-mode .ct-modal-card .modal-safe-button:hover {
  background: rgba(59, 133, 82, 0.055) !important;

  color: #a5ddbf !important;

  border-color: rgba(123, 214, 160, 0.90) !important;
}

/* EDIT MODAL CANCEL */

body.dark-mode .ct-modal-card .modal-danger-button {
  background: rgba(194, 74, 64, 0.018) !important;
  background-image: none !important;

  color: #e7a3a3 !important;

  border-color: rgba(220, 110, 110, 0.48) !important;

  box-shadow: none !important;
  transform: none !important;
}

body.dark-mode .ct-modal-card .modal-danger-button:hover {
  background: rgba(194, 74, 64, 0.045) !important;

  color: #f1b4b4 !important;

  border-color: rgba(235, 130, 130, 0.78) !important;
}

/* BEST-EFFORT NATIVE DROPDOWN OPTION STYLING */

body.dark-mode .add-court-form select option,
body.dark-mode .ct-modal-card select option {
  background-color: #161d20 !important;
  color: #fffff0 !important;
}

body.dark-mode .add-court-form select option:checked,
body.dark-mode .ct-modal-card select option:checked {
  background-color: #c89a65 !important;
  color: #1f262a !important;
}

/* KEYBOARD FOCUS */

body.dark-mode .add-court-form .primary-button:focus-visible,
body.dark-mode .add-court-form .secondary-button:focus-visible,
body.dark-mode .ct-modal-card .modal-safe-button:focus-visible,
body.dark-mode .ct-modal-card .modal-danger-button:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}
/* ==================================================
   COURTTRACK CP11.5A
   AttendTrack typography and page rhythm.

   CSS only.
   No layout or logic changes.
   ================================================== */

/* PAGE HERO */

body.dark-mode .hero-panel {
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}

body.dark-mode .hero-panel p {
  margin: 0 0 7px !important;

  color: #c89a65 !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.dark-mode .hero-panel h1 {
  margin: 0 !important;

  color: #fffff0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(22px, 2.8vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.01em !important;
}

/* PANEL RHYTHM */

body.dark-mode .panel {
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}

body.dark-mode .panel h3 {
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;

  color: #c89a65 !important;

  border-bottom: 1px solid rgba(200, 154, 101, 0.24) !important;

  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* REMOVE DUPLICATE DECORATIVE HEADING LINES */

body.dark-mode .panel h3::after,
body.dark-mode .hero-panel h1::after {
  display: none !important;
}

/* PRIMARY CARD TEXT */

body.dark-mode .action-card strong,
body.dark-mode .home-quick-card strong,
body.dark-mode .booking-card strong,
body.dark-mode .resident-booking-card strong,
body.dark-mode .security-booking-card strong,
body.dark-mode .admin-booking-card strong,
body.dark-mode .manage-court-card strong,
body.dark-mode .available-court-row strong {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body.dark-mode .action-card span,
body.dark-mode .home-quick-card span,
body.dark-mode .booking-card span,
body.dark-mode .resident-booking-card span,
body.dark-mode .security-booking-card span,
body.dark-mode .admin-booking-card span,
body.dark-mode .manage-court-card span,
body.dark-mode .available-court-row span {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* CONTROLLED VERTICAL SPACING */

body.dark-mode .dashboard-shell > .panel + .panel,
body.dark-mode .dashboard-shell > .hero-panel + .panel {
  margin-top: 0 !important;
}

body.dark-mode .quick-actions,
body.dark-mode .home-quick-grid,
body.dark-mode .booking-review-grid {
  gap: 10px !important;
}

/* MOBILE */

@media (max-width: 560px) {
  body.dark-mode .hero-panel,
  body.dark-mode .panel {
    padding: 18px !important;
  }

  body.dark-mode .hero-panel h1 {
    font-size: 22px !important;
  }

  body.dark-mode .panel h3 {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
  }
}
/* ==================================================
   COURTTRACK CP11.1C
   AttendTrack-aligned login/access canvas.

   Flat dark background.
   No haze, glow, glass or heavy shadow.
   CSS only.
   ================================================== */

/* LOGIN PAGE CANVAS */

body.dark-mode .sportstrack-login-page {
  min-height: 100svh !important;

  background: #101517 !important;
  background-image: none !important;
}

/* REMOVE DECORATIVE LOGIN GLOW */

body.dark-mode .sportstrack-login-glow {
  display: none !important;
}

/* LOGIN SHELL */

body.dark-mode .sportstrack-login-shell {
  background: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* LOGIN INPUTS */

body.dark-mode .sportstrack-login-field input {
  min-height: 52px !important;

  background: #161d20 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.30) !important;
  border-radius: 10px !important;

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

  font-size: 16px !important;
}

/* INPUT HOVER */

body.dark-mode .sportstrack-login-field input:hover {
  border-color: rgba(200, 154, 101, 0.50) !important;
}

/* INPUT FOCUS */

body.dark-mode .sportstrack-login-field input:focus {
  background: #182024 !important;

  border-color: #c89a65 !important;

  box-shadow: none !important;
  outline: none !important;
}

/* PLACEHOLDERS */

body.dark-mode .sportstrack-login-field input::placeholder {
  color: rgba(255, 255, 240, 0.42) !important;
  opacity: 1 !important;
}

/* LOGIN ACTIONS — FLAT NEUTRAL RIMS */

body.dark-mode .sportstrack-login-button,
body.dark-mode .sportstrack-request-button {
  background: #161d20 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.40) !important;
  border-radius: 12px !important;

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

  transition:
    border-color 0.16s ease,
    background-color 0.16s ease !important;
}

body.dark-mode .sportstrack-login-button:hover,
body.dark-mode .sportstrack-request-button:hover {
  background: #161d20 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: #c89a65 !important;

  box-shadow: none !important;
  transform: none !important;
}

/* CONTACT LINK — NO BUBBLY PILL */

body.dark-mode .sportstrack-contact-button {
  border-radius: 10px !important;

  background: transparent !important;
  background-image: none !important;

  color: rgba(255, 255, 240, 0.72) !important;

  box-shadow: none !important;
}

body.dark-mode .sportstrack-contact-button:hover {
  color: #fffff0 !important;

  background: rgba(200, 154, 101, 0.035) !important;
  background-image: none !important;

  box-shadow: none !important;
  transform: none !important;
}
/* ==================================================
   COURTTRACK CP11.1E
   Login surface hierarchy correction.

   Richer page canvas.
   Clearly separated fields and buttons.
   Refined full-width separator.
   No dust, haze or visible centre stripe.
   ================================================== */

/* PAGE CANVAS */

body.dark-mode .sportstrack-login-page {
  background: #1b2327 !important;
  background-image: none !important;
}

/* FORM FIELDS — DARKEST WORKING SURFACE */

body.dark-mode .sportstrack-login-field input {
  background: #101619 !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.32) !important;
  border-radius: 10px !important;

  box-shadow: none !important;
}

body.dark-mode .sportstrack-login-field input:hover {
  background: #101619 !important;
  border-color: rgba(200, 154, 101, 0.48) !important;
}

body.dark-mode .sportstrack-login-field input:focus {
  background: #11181b !important;

  border-color: #c89a65 !important;

  box-shadow: none !important;
  outline: none !important;
}

/* LOGIN BUTTONS — MID SURFACE BETWEEN FIELD AND PAGE */

body.dark-mode .sportstrack-login-button,
body.dark-mode .sportstrack-request-button {
  background: #151c1f !important;
  background-image: none !important;

  color: #fffff0 !important;

  border: 1px solid rgba(200, 154, 101, 0.42) !important;
  border-radius: 12px !important;

  box-shadow: none !important;
  transform: none !important;
}

body.dark-mode .sportstrack-login-button:hover,
body.dark-mode .sportstrack-request-button:hover {
  background: #151c1f !important;
  background-image: none !important;

  color: #fffff0 !important;

  border-color: rgba(216, 189, 131, 0.78) !important;

  box-shadow: none !important;
  transform: none !important;
}
/* ==================================================
   COURTTRACK CP11.1G
   Exact AttendTrack login separator.
   Copied from the approved AttendTrack visual system.
   ================================================== */

body.dark-mode .sportstrack-login-separator {
  width: 100% !important;
  height: 1px !important;

  margin: 30px 0 28px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 154, 101, 0.16),
      rgba(200, 154, 101, 0.82),
      rgba(255, 255, 240, 0.38),
      rgba(200, 154, 101, 0.24),
      transparent
    ) !important;

  box-shadow: 0 0 18px rgba(200, 154, 101, 0.22) !important;
}

body.dark-mode .sportstrack-login-separator::before,
body.dark-mode .sportstrack-login-separator::after {
  content: none !important;
  display: none !important;
}
/* ==================================================
   COURTTRACK CP12.7D-2C
   Chrome / Edge login autofill correction.

   Keeps saved credentials visible on the dark
   SportsTrack login surface.
   ================================================== */

.sportstrack-login-field input:-webkit-autofill,
.sportstrack-login-field input:-webkit-autofill:hover,
.sportstrack-login-field input:-webkit-autofill:focus,
.sportstrack-login-field input:-webkit-autofill:active,
.sportstrack-login-field input:autofill {
  background-color: #161d20 !important;
  background-image: none !important;

  color: #fffff0 !important;
  -webkit-text-fill-color: #fffff0 !important;

  caret-color: #fffff0 !important;

  border-color: rgba(200, 154, 101, 0.55) !important;

  -webkit-box-shadow:
    0 0 0 1000px #161d20 inset !important;

  box-shadow:
    0 0 0 1000px #161d20 inset !important;

  transition:
    background-color 9999s ease-out 0s !important;
}


.sportstrack-login-field input:-webkit-autofill:focus {
  border-color: #c89a65 !important;

  -webkit-box-shadow:
    0 0 0 1000px #182024 inset !important;

  box-shadow:
    0 0 0 1000px #182024 inset !important;
}


/* ==================================================
   COURTTRACK SUITE FOOTER
   AttendTrack-aligned product tagline.
   ================================================== */

.courttrack-footer {
  margin: 28px 0 4px;
  padding: 18px 10px 0;

  border-top:
    1px solid rgba(200, 154, 101, 0.24);

  color: rgba(91, 103, 109, 0.82);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.025em;
  text-align: center;
}


body.dark-mode .courttrack-footer {
  border-top-color:
    rgba(200, 154, 101, 0.22);

  color:
    rgba(255, 255, 240, 0.48);
}


@media (max-width: 560px) {
  .courttrack-footer {
    margin-top: 22px;
    padding-top: 16px;

    font-size: 10px;
    line-height: 1.55;
  }
}
/* ==================================================
   COURTTRACK CP12.7E-3
   Support cards and booking-month label.
   ================================================== */

.home-support-card span {
  display: block;
}

.home-support-card span + span {
  margin-top: 4px;
}

.week-month-label {
  margin: -4px 0 16px;

  color: #5b676d;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

body.dark-mode .week-month-label {
  color: rgba(255, 255, 240, 0.68);
}

/* ==================================================
   COURTTRACK — ADMIN BOOKINGS FILTER SYSTEM
   SportsTrack restrained operational styling
   ================================================== */

.admin-booking-filter-panel {
  background: #1f262a !important;
}

.admin-booking-party-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 1px !important;

  padding: 3px !important;
  margin-bottom: 12px !important;

  border: 1px solid rgba(255, 255, 240, 0.08) !important;
  border-radius: 12px !important;

  background: rgba(0, 0, 0, 0.12) !important;
}

.admin-booking-party-button {
  min-height: 50px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 16px !important;

  border: 1px solid transparent !important;
  border-radius: 9px !important;

  background: transparent !important;
  color: #8f999e !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  box-shadow: none !important;
}

.admin-booking-party-button:hover {
  background: rgba(255, 255, 240, 0.035) !important;
  color: #fffff0 !important;
}

.admin-booking-party-button.active {
  border-color: rgba(200, 154, 101, 0.42) !important;

  background: #252d31 !important;
  color: #fffff0 !important;
}


/* SECONDARY STATUS FILTERS */

.admin-booking-status-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  gap: 6px !important;
}

.admin-booking-status-button {
  min-height: 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 7px 9px !important;

  border: 1px solid rgba(255, 255, 240, 0.065) !important;
  border-radius: 8px !important;

  background: transparent !important;
  color: #7f8a90 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
  box-shadow: none !important;
}

.admin-booking-status-button:hover {
  border-color: rgba(255, 255, 240, 0.12) !important;
  color: #c4cacd !important;
}

.admin-booking-status-button.active {
  border-color: rgba(200, 154, 101, 0.30) !important;

  background: rgba(255, 255, 240, 0.035) !important;
  color: #fffff0 !important;
}


/* QUIETER ADMIN SECTION LABELS */

.admin-booking-filter-panel > h3,
.admin-bookings-list-panel > h3 {
  color: #9aa4a9 !important;
  letter-spacing: 0.055em !important;
}


/* LIGHT MODE */

body:not(.dark-mode) .admin-booking-filter-panel {
  background: #f7f6f1 !important;
}

body:not(.dark-mode) .admin-booking-party-tabs {
  border-color: rgba(31, 38, 42, 0.10) !important;
  background: rgba(31, 38, 42, 0.035) !important;
}

body:not(.dark-mode) .admin-booking-party-button {
  color: #6f7a80 !important;
}

body:not(.dark-mode) .admin-booking-party-button:hover {
  background: rgba(31, 38, 42, 0.035) !important;
  color: #1f262a !important;
}

body:not(.dark-mode) .admin-booking-party-button.active {
  border-color: rgba(200, 154, 101, 0.48) !important;

  background: #ffffff !important;
  color: #1f262a !important;
}

body:not(.dark-mode) .admin-booking-status-button {
  border-color: rgba(31, 38, 42, 0.08) !important;
  color: #7a858a !important;
}

body:not(.dark-mode) .admin-booking-status-button:hover {
  border-color: rgba(31, 38, 42, 0.14) !important;
  color: #1f262a !important;
}

body:not(.dark-mode) .admin-booking-status-button.active {
  border-color: rgba(200, 154, 101, 0.42) !important;

  background: rgba(31, 38, 42, 0.035) !important;
  color: #1f262a !important;
}

body:not(.dark-mode) .admin-booking-filter-panel > h3,
body:not(.dark-mode) .admin-bookings-list-panel > h3 {
  color: #5b676d !important;
}


/* MOBILE */

@media (max-width: 560px) {
  .admin-booking-party-button {
    min-height: 46px !important;
  }

  .admin-booking-status-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-booking-status-button {
    min-height: 36px !important;
  }
}
/* ==================================================
   COURTTRACK — ADMIN FEE SETTINGS
   Restrained SportsTrack operational styling
   ================================================== */

.panel:has(
  button[onclick*="saveAdminFeeSetting"]
) {
  background: #1f262a !important;
}


/* INTRO COPY */

.panel:has(
  button[onclick*="saveAdminFeeSetting"]
) > p {
  max-width: 760px !important;

  margin: 0 0 22px !important;

  color: #9ca6aa !important;

  font-size: 13px !important;
  line-height: 1.55 !important;
}


/* FEE CARD GRID */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 12px !important;
}


/* INDIVIDUAL FEE CARD */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card {
  display: flex !important;
  flex-direction: column !important;

  min-height: 210px !important;

  padding: 20px !important;

  border: 1px solid rgba(255, 255, 240, 0.09) !important;
  border-radius: 14px !important;

  background: #232b2f !important;

  box-shadow: none !important;
}


/* CARD TITLE */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card > strong {
  margin-bottom: 5px !important;

  color: #fffff0 !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}


/* CARD DESCRIPTION */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card > span {
  min-height: 34px !important;

  margin-bottom: 16px !important;

  color: #98a2a7 !important;

  font-size: 11px !important;
  line-height: 1.45 !important;
}


/* AMOUNT FIELD */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) .signup-field {
  display: flex !important;
  flex-direction: column !important;

  gap: 7px !important;

  margin: 0 0 16px !important;
}

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) .signup-field > span {
  color: #8d989d !important;

  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) input[type="number"] {
  width: 100% !important;
  min-height: 46px !important;

  box-sizing: border-box !important;

  padding: 0 14px !important;

  border: 1px solid rgba(255, 255, 240, 0.10) !important;
  border-radius: 10px !important;

  outline: none !important;

  background: #1b2226 !important;
  color: #fffff0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;

  box-shadow: none !important;
}

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) input[type="number"]:focus {
  border-color: rgba(200, 154, 101, 0.55) !important;
}


/* SAVE BUTTON */

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) button[onclick*="saveAdminFeeSetting"] {
  width: 100% !important;
  min-height: 40px !important;

  margin-top: auto !important;
  padding: 9px 14px !important;

  border: 1px solid rgba(200, 154, 101, 0.28) !important;
  border-radius: 10px !important;

  background: transparent !important;
  color: #d8ddd9 !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) button[onclick*="saveAdminFeeSetting"]:hover {
  border-color: rgba(200, 154, 101, 0.55) !important;

  background: rgba(255, 255, 240, 0.025) !important;
  color: #fffff0 !important;
}


/* BACK TO MANAGE */

.panel:has(
  button[onclick*="saveAdminFeeSetting"]
) > .booking-review-actions {
  margin-top: 18px !important;
}

.panel:has(
  button[onclick*="saveAdminFeeSetting"]
) > .booking-review-actions .secondary-button {
  width: auto !important;
  min-width: 190px !important;

  padding-left: 22px !important;
  padding-right: 22px !important;
}


/* LIGHT MODE */

body:not(.dark-mode)
.panel:has(
  button[onclick*="saveAdminFeeSetting"]
) {
  background: #f7f6f1 !important;
}

body:not(.dark-mode)
.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card {
  border-color: rgba(31, 38, 42, 0.10) !important;

  background: #ffffff !important;
}

body:not(.dark-mode)
.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card > strong {
  color: #1f262a !important;
}

body:not(.dark-mode)
.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) > .action-card > span {
  color: #68747a !important;
}

body:not(.dark-mode)
.quick-actions:has(
  button[onclick*="saveAdminFeeSetting"]
) input[type="number"] {
  border-color: rgba(31, 38, 42, 0.12) !important;

  background: #f8f8f5 !important;
  color: #1f262a !important;
}


/* MOBILE */

@media (max-width: 700px) {
  .quick-actions:has(
    button[onclick*="saveAdminFeeSetting"]
  ) {
    grid-template-columns: 1fr !important;
  }

  .quick-actions:has(
    button[onclick*="saveAdminFeeSetting"]
  ) > .action-card {
    min-height: 0 !important;
  }

  .panel:has(
    button[onclick*="saveAdminFeeSetting"]
  ) > .booking-review-actions .secondary-button {
    width: 100% !important;
  }
}
/* ==================================================
   COURTTRACK — SECURITY TODAY MASTER / DETAIL
   AttendTrack-style operational workspace
   ================================================== */


/* --------------------------------------------------
   TOP SUMMARY STRIP
   -------------------------------------------------- */

.security-summary-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;

  margin-bottom: 16px !important;
}

.security-summary-strip .security-summary-card {
  min-height: 68px !important;

  display: grid !important;
  place-items: center !important;
  align-content: center !important;

  padding: 10px !important;

  border: 1px solid rgba(200, 154, 101, 0.20) !important;
  border-radius: 16px !important;

  background: rgba(255, 255, 240, 0.035) !important;

  box-shadow: none !important;
}

.security-summary-strip .security-summary-card strong {
  margin: 0 0 5px !important;

  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.security-summary-strip .security-summary-card span {
  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}


/* --------------------------------------------------
   TWO-CARD WORKSPACE
   -------------------------------------------------- */

.security-today-workspace {
  display: grid !important;

  grid-template-columns:
    minmax(300px, 0.9fr)
    minmax(0, 1.25fr) !important;

  gap: 16px !important;

  align-items: start !important;
}


/* Both primary cards */

.security-today-workspace > .panel {
  margin: 0 !important;

  min-width: 0 !important;

  padding: 20px !important;

  border: 1px solid rgba(200, 154, 101, 0.24) !important;
  border-radius: 16px !important;

  background: rgba(255, 255, 240, 0.035) !important;

  box-shadow: none !important;
}


/* --------------------------------------------------
   LEFT CARD — DATE / BOOKING LIST
   -------------------------------------------------- */

.security-master-heading {
  display: grid !important;
  gap: 3px !important;

  margin-bottom: 16px !important;
  padding-bottom: 14px !important;

  border-bottom: 1px solid rgba(200, 154, 101, 0.16) !important;
}

.security-master-heading > span {
  color: #c89a65 !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.security-master-heading > strong {
  margin-top: 4px !important;

  color: #fffff0 !important;

  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.security-master-heading > small {
  color: rgba(255, 255, 240, 0.58) !important;

  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


.security-master-list {
  display: grid !important;
  gap: 8px !important;

  max-height: 510px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding-right: 3px !important;
}


/* Individual selectable booking */

.security-master-booking-row {
  width: 100% !important;

  display: grid !important;
  gap: 8px !important;

  padding: 13px 14px !important;

  border: 1px solid rgba(255, 255, 240, 0.08) !important;
  border-radius: 12px !important;

  background: rgba(255, 255, 240, 0.025) !important;

  color: #fffff0 !important;

  text-align: left !important;

  box-shadow: none !important;

  transition:
    border-color 0.15s ease,
    background 0.15s ease !important;
}

.security-master-booking-row:hover {
  border-color: rgba(200, 154, 101, 0.30) !important;

  background: rgba(255, 255, 240, 0.045) !important;

  transform: none !important;
}

.security-master-booking-row.is-selected {
  border-color: rgba(200, 154, 101, 0.68) !important;

  background: rgba(200, 154, 101, 0.075) !important;
}


/* Time + Villa / Room */

.security-master-booking-main {
  display: grid !important;

  grid-template-columns:
    minmax(70px, auto)
    minmax(0, 1fr) !important;

  align-items: baseline !important;

  gap: 12px !important;
}

.security-master-booking-main strong {
  margin: 0 !important;

  color: #fffff0 !important;

  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.security-master-booking-main span {
  overflow: hidden !important;

  color: #fffff0 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}


/* Court / sport + status */

.security-master-booking-meta {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;

  gap: 10px !important;
}

.security-master-booking-meta > span {
  overflow: hidden !important;

  color: rgba(255, 255, 240, 0.54) !important;

  font-size: 10.5px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;

  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.security-master-booking-meta .security-status-pill {
  width: auto !important;
  min-width: 62px !important;
  max-width: none !important;

  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;

  padding: 0 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 7.5px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* Empty left side */

.security-master-empty {
  display: grid !important;
  gap: 5px !important;

  padding: 18px !important;

  border: 1px dashed rgba(200, 154, 101, 0.22) !important;
  border-radius: 12px !important;
}

.security-master-empty strong {
  color: #fffff0 !important;

  font-size: 14px !important;
}

.security-master-empty span {
  color: rgba(255, 255, 240, 0.55) !important;

  font-size: 11px !important;
  line-height: 1.4 !important;
}


/* --------------------------------------------------
   RIGHT CARD — BOOKING DETAILS
   -------------------------------------------------- */

.security-detail-title {
  display: grid !important;
  gap: 4px !important;

  margin-bottom: 16px !important;
  padding-bottom: 14px !important;

  border-bottom: 1px solid rgba(200, 154, 101, 0.16) !important;
}

.security-detail-title > span {
  color: #c89a65 !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

.security-detail-title > strong {
  color: #fffff0 !important;

  font-size: 18px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}


/* Booking title row */

.security-detail-header {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: start !important;

  gap: 14px !important;

  margin-bottom: 16px !important;
}

.security-detail-header > div {
  min-width: 0 !important;

  display: grid !important;
  gap: 4px !important;
}

.security-detail-header > div > span {
  color: #c89a65 !important;

  font-size: 9px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}

.security-detail-header > div > strong {
  color: #fffff0 !important;

  font-size: 20px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
}

.security-detail-header > div > small {
  color: rgba(255, 255, 240, 0.58) !important;

  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}


/* Detail status */

.security-detail-header > .security-status-pill {
  width: auto !important;
  min-width: 72px !important;
  max-width: none !important;

  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;

  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 8px !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}


/* Resident / Hotel / guest details */

.security-detail-information {
  display: grid !important;
  gap: 8px !important;

  margin-bottom: 18px !important;

  padding: 14px 16px !important;

  border: 1px solid rgba(255, 255, 240, 0.07) !important;
  border-radius: 12px !important;

  background: rgba(255, 255, 240, 0.02) !important;
}

.security-guest-fee-pill {
  width: fit-content !important;
  min-height: 28px !important;

  margin: 2px 0 !important;
  padding: 0 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

button.security-guest-fee-pill {
  cursor: pointer !important;
}

.security-guest-fee-pill.unpaid {
  color: #f1b0a7 !important;

  background: rgba(194, 74, 64, 0.10) !important;

  border: 1px solid rgba(220, 110, 110, 0.34) !important;
}

.security-guest-fee-pill.paid {
  color: #8fc9ad !important;

  background: rgba(80, 180, 120, 0.08) !important;

  border: 1px solid rgba(80, 180, 120, 0.28) !important;
}

.security-guest-fee-pill.complimentary {
  color: #c89a65 !important;

  background: rgba(200, 154, 101, 0.08) !important;

  border: 1px solid rgba(200, 154, 101, 0.26) !important;
}

.security-guest-fee-modal {
  width: min(420px, calc(100vw - 32px)) !important;
}

.security-guest-fee-breakdown {
  display: grid !important;
  gap: 8px !important;

  margin: 14px 0 !important;
}

.security-guest-fee-breakdown > div {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;
  gap: 12px !important;

  padding: 10px 12px !important;

  border: 1px solid rgba(200, 154, 101, 0.16) !important;
  border-radius: 10px !important;
}

.security-guest-fee-breakdown span {
  font-size: 11px !important;
  font-weight: 700 !important;
}

.security-guest-fee-breakdown strong {
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: right !important;
}

.security-guest-fee-modal-status {
  padding: 5px 8px !important;

  border-radius: 999px !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
}

.security-guest-fee-modal-status.unpaid {
  color: #9b3333 !important;

  background: rgba(160, 62, 62, 0.08) !important;
}

.security-guest-fee-modal-status.paid {
  color: #397a5b !important;

  background: rgba(80, 180, 120, 0.08) !important;
}

.security-guest-fee-modal-actions {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  margin-bottom: 10px !important;
}

.security-guest-fee-modal-actions button {
  width: 100% !important;
}

.security-detail-information .booking-resident-line,
.security-detail-information .booking-action-line {
  margin: 0 !important;

  color: rgba(255, 255, 240, 0.78) !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}


/* Operational buttons */

.security-detail-actions {
  display: flex !important;

  align-items: center !important;

  gap: 9px !important;

  flex-wrap: wrap !important;
}

.security-detail-actions .small-admin-button {
  min-width: 110px !important;
  min-height: 38px !important;

  padding: 0 14px !important;

  border-radius: 12px !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  box-shadow: none !important;
}

.security-detail-actions .security-arrived-button {
  color: #8fc9ad !important;

  background: rgba(80, 180, 120, 0.08) !important;

  border: 1px solid rgba(80, 180, 120, 0.24) !important;
}

.security-detail-actions .no-show-button {
  color: #f1a5a5 !important;

  background: rgba(194, 74, 64, 0.08) !important;

  border: 1px solid rgba(220, 110, 110, 0.28) !important;
}

.security-status-pill.access-denied {
  color: #f1a5a5 !important;

  background: rgba(194, 74, 64, 0.15) !important;

  border: 1px solid rgba(220, 110, 110, 0.42) !important;
}

.security-detail-actions .access-denied-button {
  color: #f1a5a5 !important;

  background: rgba(194, 74, 64, 0.14) !important;

  border: 1px solid rgba(220, 110, 110, 0.48) !important;
}

.security-detail-actions .access-denied-button:hover {
  background: rgba(194, 74, 64, 0.22) !important;
}

body:not(.dark-mode)
.security-status-pill.access-denied {
  color: #9b3333 !important;

  background: rgba(160, 62, 62, 0.10) !important;

  border-color: rgba(160, 62, 62, 0.38) !important;
}

body:not(.dark-mode)
.security-detail-actions .access-denied-button {
  color: #9b3333 !important;

  background: rgba(160, 62, 62, 0.08) !important;

  border-color: rgba(160, 62, 62, 0.42) !important;
}


/* No booking selected */

.security-detail-empty {
  min-height: 190px !important;

  display: grid !important;
  place-items: center !important;
  align-content: center !important;

  gap: 6px !important;

  text-align: center !important;

  border: 1px dashed rgba(200, 154, 101, 0.20) !important;
  border-radius: 12px !important;
}

.security-detail-empty strong {
  color: #fffff0 !important;

  font-size: 14px !important;
}

.security-detail-empty span {
  color: rgba(255, 255, 240, 0.54) !important;

  font-size: 11px !important;
}


/* --------------------------------------------------
   LIGHT MODE
   -------------------------------------------------- */

body:not(.dark-mode)
.security-today-workspace > .panel,
body:not(.dark-mode)
.security-summary-strip .security-summary-card {
  background: rgba(255, 255, 255, 0.62) !important;

  border-color: rgba(31, 38, 42, 0.10) !important;
}

body:not(.dark-mode)
.security-master-heading > strong,
body:not(.dark-mode)
.security-detail-title > strong,
body:not(.dark-mode)
.security-detail-header > div > strong,
body:not(.dark-mode)
.security-master-booking-main strong,
body:not(.dark-mode)
.security-master-booking-main span,
body:not(.dark-mode)
.security-master-empty strong,
body:not(.dark-mode)
.security-detail-empty strong {
  color: #1f262a !important;
}

body:not(.dark-mode)
.security-master-heading > small,
body:not(.dark-mode)
.security-detail-header > div > small,
body:not(.dark-mode)
.security-master-booking-meta > span,
body:not(.dark-mode)
.security-master-empty span,
body:not(.dark-mode)
.security-detail-empty span {
  color: #667177 !important;
}

body:not(.dark-mode)
.security-master-booking-row {
  color: #1f262a !important;

  background: rgba(255, 255, 255, 0.62) !important;

  border-color: rgba(31, 38, 42, 0.09) !important;
}

body:not(.dark-mode)
.security-master-booking-row.is-selected {
  background: rgba(200, 154, 101, 0.10) !important;

  border-color: rgba(200, 154, 101, 0.60) !important;
}

body:not(.dark-mode)
.security-detail-information {
  background: rgba(31, 38, 42, 0.025) !important;

  border-color: rgba(31, 38, 42, 0.08) !important;
}

body:not(.dark-mode)
.security-detail-information .booking-resident-line,
body:not(.dark-mode)
.security-detail-information .booking-action-line {
  color: #394348 !important;
}


/* --------------------------------------------------
   TABLET / PHONE
   -------------------------------------------------- */

@media (max-width: 760px) {
  .security-today-workspace,
  .security-master-panel,
  .security-detail-panel,
  .security-master-list,
  .security-master-booking-row,
  .security-detail-information {
    min-width: 0 !important;
  }

  .security-today-workspace {
    grid-template-columns:
      minmax(112px, 0.82fr)
      minmax(0, 1.18fr) !important;

    gap: 8px !important;

    align-items: stretch !important;
  }

  body.dark-mode
  .security-today-workspace > .panel {
    min-width: 0 !important;

    padding: 10px !important;

    border-radius: 16px !important;

    overflow: hidden !important;
  }

  .security-master-heading,
  .security-detail-title {
    margin-bottom: 10px !important;
    padding-bottom: 9px !important;
  }

  .security-master-heading > span,
  .security-detail-title > span {
    font-size: 7px !important;
  }

  .security-master-heading > strong,
  .security-detail-title > strong {
    font-size: 14px !important;
  }

  .security-master-heading > small {
    font-size: 8.5px !important;
  }

  .security-master-list {
    max-height: 430px !important;

    gap: 7px !important;

    padding-right: 0 !important;
  }

  .security-master-booking-row {
    min-width: 0 !important;

    gap: 6px !important;

    padding: 10px 8px !important;

    border-radius: 12px !important;

    overflow: hidden !important;
  }

  .security-master-booking-main {
    grid-template-columns: 1fr !important;

    gap: 3px !important;
  }

  .security-master-booking-main strong {
    font-size: 13px !important;
  }

  .security-master-booking-main span {
    font-size: 9.5px !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .security-master-booking-meta {
    grid-template-columns: 1fr !important;

    gap: 5px !important;
  }

  .security-master-booking-meta > span {
    font-size: 8px !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .security-master-booking-meta
  .security-status-pill {
    justify-self: start !important;

    min-width: 0 !important;

    height: 19px !important;
    min-height: 19px !important;
    max-height: 19px !important;

    padding: 0 6px !important;

    font-size: 6.5px !important;
  }

  .security-detail-header {
    min-width: 0 !important;

    gap: 8px !important;

    margin-bottom: 10px !important;
  }

  .security-detail-header > div > span {
    font-size: 7px !important;
  }

  .security-detail-header > div > strong {
    font-size: 15px !important;

    overflow-wrap: anywhere !important;
  }

  .security-detail-header > div > small {
    font-size: 8.5px !important;

    overflow-wrap: anywhere !important;
  }

  .security-detail-header >
  .security-status-pill {
    min-width: 0 !important;

    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;

    padding: 0 7px !important;

    font-size: 6.5px !important;
  }

  .security-detail-information {
    gap: 6px !important;

    margin-bottom: 12px !important;

    padding: 10px !important;
  }

  .security-detail-information
  .booking-resident-line,
  .security-detail-information
  .booking-action-line {
    min-width: 0 !important;

    font-size: 9px !important;
    line-height: 1.4 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .security-detail-actions {
    gap: 6px !important;
  }

  .security-detail-actions
  .small-admin-button {
    min-width: 0 !important;
    min-height: 34px !important;

    padding: 0 9px !important;

    font-size: 7px !important;
  }
}

/* ==================================================
   COURTTRACK RESIDENT BOOKING REVIEW
   Compact outside-guest controls.
   ================================================== */

.resident-guest-booking-card {
  min-height: 0 !important;

  display: grid !important;
  gap: 12px !important;

  padding: 12px 14px !important;
}

.resident-guest-question-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: center !important;
  gap: 12px !important;
}

.resident-guest-question-copy {
  min-width: 0;
}

.resident-guest-question-copy strong {
  display: block !important;

  margin: 0 0 3px !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
}

.resident-guest-question-copy span {
  display: block !important;

  margin: 0 !important;

  font-size: 11px !important;
  line-height: 1.3 !important;
}

.resident-guest-toggle {
  display: grid !important;
  grid-template-columns:
    repeat(2, 64px) !important;

  gap: 7px !important;
}

.resident-guest-toggle
.court-choice-button {
  width: 64px !important;
  min-width: 64px !important;
  min-height: 36px !important;

  padding: 0 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;
}

.resident-guest-toggle
.court-choice-button strong {
  margin: 0 !important;

  font-size: 12px !important;
}

.resident-guest-compact-list {
  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;
}

.resident-guest-name-field {
  min-width: 0;

  display: grid !important;
  gap: 5px !important;
}

.resident-guest-name-field > span {
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;

  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resident-guest-input-shell {
  position: relative !important;

  min-width: 0;
}

.resident-guest-input-shell input {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 38px 0 12px !important;

  border: 1px solid rgba(200, 154, 101, 0.30) !important;
  border-radius: 10px !important;

  background: rgba(255, 255, 240, 0.035) !important;

  color: #fffff0 !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  outline: none !important;
}

.resident-guest-input-shell input:focus {
  border-color: rgba(200, 154, 101, 0.72) !important;
}

.resident-guest-remove-button {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;

  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;

  padding: 0 !important;

  display: grid !important;
  place-items: center !important;

  transform: translateY(-50%) !important;

  border: 1px solid rgba(220, 110, 110, 0.30) !important;
  border-radius: 8px !important;

  background: rgba(194, 74, 64, 0.08) !important;

  color: #f1a5a5 !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.resident-guest-remove-button:hover {
  background: rgba(194, 74, 64, 0.16) !important;
}

.resident-guest-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;
}

.resident-add-guest-slot {
  min-width: 0;

  display: flex !important;
  align-items: flex-end !important;

  align-self: end !important;
}

.resident-add-guest-button {
  width: auto !important;
  min-width: 118px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 10px !important;

  font-size: 11px !important;
  white-space: nowrap !important;
}

.resident-guest-limit-note {
  flex: 1 1 auto;

  font-size: 10px !important;
  line-height: 1.35 !important;
}


/* LIGHT MODE */

body:not(.dark-mode)
.resident-guest-input-shell input {
  background: rgba(255, 255, 255, 0.70) !important;

  color: #1f262a !important;

  border-color: rgba(31, 38, 42, 0.14) !important;
}

body:not(.dark-mode)
.resident-guest-remove-button {
  color: #9b3333 !important;

  background: rgba(160, 62, 62, 0.06) !important;

  border-color: rgba(160, 62, 62, 0.26) !important;
}


/* MOBILE */

@media (max-width: 620px) {
  .resident-guest-compact-list {
    grid-template-columns:
      1fr !important;
  }

  .resident-guest-footer {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .resident-add-guest-button {
    width: 100% !important;
  }
}

/* ==================================================
   COURTTRACK RESIDENT BOOKING REVIEW
   Final grid structure.
   ================================================== */

.resident-guest-question-card {
  min-height: 0 !important;

  padding: 12px 14px !important;

  display: flex !important;
  align-items: center !important;
}

.resident-guest-question-card
.resident-guest-question-row {
  width: 100% !important;
}

.resident-guest-question-card
.resident-guest-question-row > strong {
  margin: 0 !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
}

.resident-guest-details-card {
  grid-column: 1 / -1 !important;

  min-height: 0 !important;

  padding: 12px 14px !important;

  display: grid !important;
  gap: 10px !important;
}

.booking-review-grid
> .resident-guest-details-card
+ .action-card {
  margin-top: 0 !important;
}

@media (max-width: 520px) {
  .resident-guest-question-card {
    padding: 11px 12px !important;
  }

  .resident-guest-details-card {
    padding: 11px 12px !important;
  }
}

@media (max-width: 520px) {
  .security-summary-strip {
    gap: 7px !important;
  }

  .security-summary-strip .security-summary-card {
    min-height: 60px !important;

    padding: 8px 5px !important;
  }

  .security-summary-strip .security-summary-card strong {
    font-size: 19px !important;
  }

  .security-today-workspace > .panel {
    padding: 16px !important;
  }

  .security-master-booking-main {
    grid-template-columns:
      66px
      minmax(0, 1fr) !important;
  }

  .security-detail-header {
    grid-template-columns: 1fr !important;
  }

  .security-detail-header > .security-status-pill {
    justify-self: start !important;
  }

  .security-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .security-detail-actions .small-admin-button {
    width: 100% !important;
  }
}