/* ================================
   styles.css (full drop-in)
   ================================ */

/* ---------- Base ---------- */
body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background-image: url('assets/CourtBG2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  color: #fff;
}

/* ---------- Header / Banner / Nav ---------- */
.header-wrapper { position: sticky; top: 0; z-index: 1000; background-color: black; }
.top-banner { width: 100%; display: block; margin: 0; padding: 0; border: none; }
.top-banner img { width: 100%; display: block; max-height: 100px; object-fit: cover; }
header { background-color: rgba(0,0,0,0.7); padding: 1em; text-align: center; color: #fff; }

nav { position: sticky; top: 100px; z-index: 999; background-color: rgba(0,0,0,0.7); padding-bottom: 20px; }
nav .nav { list-style: none; display: flex; justify-content: flex-start; gap: 10px; flex-wrap: wrap; padding: 0; margin-top: 0; }
nav .nav li { margin: 0 1em 0 0; }
nav .nav .flex-grow-1 { flex: 1 1 auto; }

nav .nav a { color: #fff; text-decoration: none; font-weight: bold; }
.nav a:hover { background-color: #003663; color: rgb(255, 42, 0); }
.nav-pills .nav-link { font-size: 20px; }

/* CTA pill on the right */
.nav .btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .6rem 1.1rem; border-radius: 9999px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  background: rgb(255, 42, 0); color: #fff !important; border: none;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  text-decoration: none;
}
.nav .btn-cta i { color: inherit; font-size: 1.5em; }
.nav .btn-cta:hover, .nav .btn-cta:focus { background: rgb(15, 120, 209); color:#fff !important; transform: translateY(-1px); }
.nav .btn-cta:active { transform: translateY(0); }
.nav .btn-cta.active { background: rgb(200, 34, 0); color:#fff !important; box-shadow: inset 5px 0 0 rgb(255, 42, 0); }

/* Active nav left bar for normal links */
.nav .nav-link.active:not(.btn-cta) {
  box-shadow: inset 5px 0 0 rgb(255, 42, 0);
  background-color: rgba(0,0,0,0.6);
  color: #fff !important;
}
.nav .nav-link.active:not(.btn-cta):hover,
.nav .nav-link.active:not(.btn-cta):focus {
  box-shadow: inset 5px 0 0 rgb(255, 42, 0);
  background-color: rgba(0,0,0,0.65);
  color: #fff !important;
}
/* Hover hint for non-active links */
.nav .nav-link:not(.active):not(.btn-cta) { transition: box-shadow 120ms ease; }
.nav .nav-link:not(.active):not(.btn-cta):hover,
.nav .nav-link:not(.active):not(.btn-cta):focus-visible {
  box-shadow: inset 4px 0 0 rgb(15, 120, 209);
}

.nav-pills .nav-link:not(.active) {
  color: rgb(15, 120, 209);
  font-weight: 600;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.nav-pills .nav-link:not(.active):hover {
  color: rgb(255, 42, 0);
  background-color: rgba(255, 255, 255, 0.1);
}
.nav-pills .nav-link { color: rgb(15, 120, 209); font-weight: 600; transition: color 0.3s ease, background-color 0.3s ease; }
.nav-pills .nav-link:hover { color: rgb(255, 42, 0); background-color: rgba(255, 255, 255, 0.1); }

/* keep only the transparent active state (no filled bg) */
.nav-pills .nav-link.active:not(.btn-cta) {
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: inset 5px 0 0 rgb(255, 42, 0);
}

/* Make sure the Start Workout CTA hover is SITE BLUE */
.nav .btn-cta:hover,
.nav .btn-cta:focus { background: rgb(15, 120, 209) !important; color: #fff !important; box-shadow: none; }

/* Prevent generic hover rules from affecting the CTA */
.nav a:hover:not(.btn-cta) { background-color: #003663; color: rgb(255, 42, 0); }

/* ---------- Cards / Content ---------- */
main.container {
  padding: 1em;
  margin: 1em auto;
  background-color: rgba(0,0,0,0.5);
  border-radius: 8px;
}

/* Prevent first/last child margins from adding phantom space */
main.container > *:first-child { margin-top: 0; }
main.container > *:last-child  { margin-bottom: 0; }


.card { background-color: rgba(0,0,0,0.5); border-radius: 10px; padding: 1.5em; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.card h2 { margin-top: 0; color: #fff; }
.card p  { color: #ddd; }

/* Ensure all card headings are readable on dark cards */
.card h3, .card h4, .card h5, .card h6 { color: #fff; }
/* Make muted labels readable on dark cards */
.card .text-muted { color: rgb(15, 120, 209) !important; }

/* Coach name chip on dashboard title */
.coach-name {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-weight: 700; color: #fff;
  background: rgba(15,120,209,0.18); border: 1px solid rgba(15,120,209,0.45);
}

/* ---------- Buttons ---------- */
button, input[type="submit"] {
  background-color: #2196F3; color: #fff; border: none;
  padding: .75em 1.5em; border-radius: 5px; cursor: pointer; font-weight: bold;
}
button:hover, input[type="submit"] { background-color: #2196F3; }

/* ---------- Drill images ---------- */
.drill-card-img { width: 100%; height: auto; object-fit: contain; border-radius: 0; }
h3.step-heading { color: rgba(15,120,209,1); font-weight: bold; }
.step-card {
  background-color: rgba(255,255,255,0.05);
  padding: 1.5em; border-radius: 10px; margin-bottom: 1.5em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ---------- Start Workout link ---------- */
.nav-link.workout-link { background-color: rgb(255, 42, 0); color: #fff !important; font-weight: bold; border-radius: 6px; }
.nav-link.workout-link:hover { background-color: rgb(200,34,0); color:#fff !important; }

/* ---------- Start Workout form readability ---------- */
#workoutForm .card-body, #workoutForm .form-check-label, #workoutForm label, #workoutForm h5 { color: #fff; }
#workoutForm .text-muted { color:#ddd !important; }
#workoutForm .form-control { background-color: #111; color:#fff; border-color:#444; }
#workoutForm .form-control:focus { background-color:#111; color:#fff; border-color:#777; box-shadow:0 0 0 .2rem rgba(255,255,255,0.1); }

/* ---------- Workout Run page ---------- */
#workoutRun .drill-title, #workoutRun .label-white, #workoutRun .text-light { color:#fff !important; }
#workoutRun .form-control { background-color:#111; color:#fff; border-color:#444; }
#workoutRun .form-control:focus { background-color:#111; color:#fff; border-color:#777; box-shadow:0 0 0 .2rem rgba(255,255,255,0.1); }
#workoutRun .workout-drill-img {
  width: 100%; max-height: 320px; object-fit: cover; border: 2px solid rgba(255,255,255,0.15);
}

/* ---------- CTAs & Animations ---------- */
.welcome-heading { color: rgb(255, 42, 0); font-weight: bold; }
.pulse-btn { background-color: rgb(255, 42, 0); color:#fff; font-weight:bold; padding: 15px 40px; border-radius: 8px; font-size: 1.3rem;
  display: inline-block; animation: pulse 1.5s infinite; text-decoration:none; transition: transform .2s ease, background-color .2s ease; }
.pulse-btn:hover { transform: scale(1.05); background-color: rgb(220,38,0); }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

.basketball-button { position: relative; display: inline-block; text-align: center; padding: 5px; border-radius: 50%; background-color: rgba(0,0,0,0.5); animation: pulseBlue 2s infinite; }
.basketball-button i { font-size: 150px; color: rgb(255, 42, 0); }
.basketball-button span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-family: 'Bebas Neue', Impact, sans-serif; font-size: 26px; color: #fff;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 2px 0 #000; letter-spacing: 2px; }
@keyframes pulseBlue { 0%{transform:scale(1); box-shadow:0 0 0 0 rgba(33,150,243,.6)} 70%{transform:scale(1.05); box-shadow:0 0 20px 10px rgba(33,150,243,0)} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(33,150,243,0)} }
.basketball-button:hover,.basketball-button:focus { transform: translateZ(0) scale(1.03); }
@media (max-width: 576px) { .basketball-button i { font-size: 120px; } .basketball-button span { font-size: 22px; top: 56%; } }

.welcome-banner { background-color: rgba(33,150,243,0.2); padding: 20px; border-radius: 10px; border-left: 8px solid rgb(255, 42, 0); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }

/* ---------- Modals (custom) ---------- */
#coachEditModal, #schoolCrestModal, #emailPlayersModal, #messagePlayersModal, #playerInsightsModal, #manageRosterModal, #createTeamModal, #createSchoolModal {
  display:none; position:fixed; z-index:1060; inset:0; overflow:auto; background-color: rgba(0,0,0,0.4);
}
#coachEditModal .modal-content, #schoolCrestModal .modal-content, #emailPlayersModal .modal-content, #messagePlayersModal .modal-content,
#playerInsightsModal .modal-content, #manageRosterModal .modal-content, #createTeamModal .modal-content, #createSchoolModal .modal-content {
  background-color:#222; color:#fff; border:1px solid #888; width:80%; max-width:400px; margin:10% auto; padding:20px; border-radius:8px;
}
#playerInsightsModal .modal-content { max-width: 960px; width: 90%; }

/* Form inputs inside custom modals */
#coachEditModal .modal-content input[type="text"], #coachEditModal .modal-content input[type="email"], #coachEditModal .modal-content input[type="file"],
#schoolCrestModal .modal-content input[type="text"], #schoolCrestModal .modal-content input[type="url"], #schoolCrestModal .modal-content input[type="file"],
#emailPlayersModal .modal-content input[type="text"], #emailPlayersModal .modal-content textarea,
#messagePlayersModal .modal-content input[type="text"], #messagePlayersModal .modal-content textarea,
#createTeamModal .modal-content input[type="text"], #createSchoolModal .modal-content input[type="text"], #createSchoolModal .modal-content input[type="url"] {
  width:100%; padding:10px; margin:6px 0 16px; border:none; background:#eee; border-radius:4px; color:#000;
}
#coachEditModal .modal-content button, #schoolCrestModal .modal-content button, #emailPlayersModal .modal-content button,
#messagePlayersModal .modal-content button, #playerInsightsModal .modal-content button, #createTeamModal .modal-content button, #createSchoolModal .modal-content button {
  background-color:#2196F3; color:#fff; border:none; padding:10px 20px; margin-top:10px; width:100%; cursor:pointer; border-radius:4px; font-weight:bold;
}
#coachEditModal .close, #schoolCrestModal .close, #emailPlayersModal .close, #messagePlayersModal .close, #playerInsightsModal .close, #manageRosterModal .close, #createTeamModal .close, #createSchoolModal .close {
  position:absolute; right:16px; top:10px; font-size:28px; font-weight:bold; color:#aaa; cursor:pointer;
}
#coachEditModal .close:hover, #schoolCrestModal .close:hover, #emailPlayersModal .close:hover, #messagePlayersModal .close:hover, #playerInsightsModal .close:hover, #manageRosterModal .close:hover, #createTeamModal .close:hover, #createSchoolModal .close:hover { color:#fff; }

/* Generic modal-content (legacy) */
.modal-content { background-color:#222; margin:10% auto; border:1px solid #888; width:80%; max-width:400px; padding:20px; color:#fff; border-radius:8px; }
.modal-content input[type="text"], .modal-content input[type="email"], .modal-content input[type="password"] {
  width:100%; padding:10px; margin:6px 0 16px 0; display:inline-block; border:none; background:#eee; border-radius:4px;
}
.modal-content button { background-color:#2196F3; color:#fff; border:none; padding:10px 20px; margin-top:10px; width:100%; cursor:pointer; border-radius:4px; font-weight:bold; }
.modal-content button:hover { background-color:#2196F3; }
.close { position:absolute; right:16px; top:10px; font-size:28px; font-weight:bold; color:#aaa; cursor:pointer; }
.close:hover { color:#fff; }

/* Custom auth modals */
#id01, #id02 { display:none; position:fixed; z-index:1060; inset:0; overflow:auto; background-color: rgba(0,0,0,0.4); }
#id01 .modal-content, #id02 .modal-content { background-color:#222; color:#fff; border:1px solid #888; width:80%; max-width:400px; margin:10% auto; padding:20px; border-radius:8px; }
#id01 .modal-content input[type="text"], #id01 .modal-content input[type="email"], #id01 .modal-content input[type="password"],
#id02 .modal-content input[type="text"], #id02 .modal-content input[type="email"], #id02 .modal-content input[type="password"] {
  width:100%; padding:10px; margin:6px 0 16px; border:none; background:#eee; border-radius:4px;
}
#id01 .modal-content button, #id02 .modal-content button { background-color:#2196F3; color:#fff; border:none; padding:10px 20px; margin-top:10px; width:100%; cursor:pointer; border-radius:4px; font-weight:bold; }
#id01 .close, #id02 .close { right:16px; top:10px; font-size:28px; color:#aaa; }
#id01 .close:hover, #id02 .close:hover { color:#fff; }

/* Edit Profile (Bootstrap modal) */
#editProfileModal .modal-content { background-color:#222; color:#fff; border:1px solid #888; }
#editProfileModal .modal-header, #editProfileModal .modal-footer { border-color: rgba(255,255,255,0.12); }
#editProfileModal label { color:#fff; }
#editProfileModal .form-control { background-color:#fff; color:#000; border:1px solid #ced4da; }
#editProfileModal .form-control:focus { background-color:#fff; color:#000; border-color:#86b7fe; box-shadow:0 0 0 .2rem rgba(13,110,253,.25); }
#editProfileModal .modal-header { position: relative; }
#editProfileModal .btn-close {
  position:absolute; top:.75rem; right:.75rem; width:1.25rem; height:1.25rem; padding:.25rem; margin:0; border:0; box-shadow:none;
  background-color:transparent !important; background-image: var(--bs-btn-close-bg) !important;
  filter: invert(1) grayscale(1) brightness(1.8); opacity:.95;
}
#editProfileModal .btn-close:hover, #editProfileModal .btn-close:focus { opacity:1; }
#editProfileModal .modal-title { margin: 0 auto; }

/* ---------- Edit Profile link ---------- */
.edit-profile-link { color: rgb(15, 120, 209); text-decoration: none; font-weight: 500; opacity: .9; }
.edit-profile-link:hover, .edit-profile-link:focus { opacity: 1; text-decoration: underline; }

/* ---------- Profile List ---------- */
.profile-list .list-group-item { background: transparent; color:#fff; border-color: rgba(255,255,255,0.15); }
.profile-list .list-group-item .badge { background: rgb(15,120,209) !important; color:#fff !important; font-weight:700; }

/* ---------- KPI Tiles & Progress ---------- */
.kpi-tile { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid rgb(15,120,209);
  border-radius: 10px; padding: 14px 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.kpi-label { font-size:.8rem; letter-spacing:.02em; color:#cfd8e3; text-transform:uppercase; }
.kpi-value { font-size:1.4rem; font-weight:800; color:#fff; line-height:1.1; }
.progress { background-color: rgba(255,255,255,0.08); border-radius: 999px; }
.progress .progress-bar { border-radius: 999px; }
.progress-thin { height: 6px !important; }
.progress-thin .progress-bar { height: 100%; }

/* username white */
.card .card-title { color:#fff !important; }
.profile-kpi-section .section-label { color: rgb(15,120,209); font-size: 1.05rem !important; letter-spacing: .02em; }
@media (min-width: 768px){ .profile-kpi-section .section-label { font-size: 1.12rem !important; } }
.kpi-filter .btn { border-color: rgba(13,110,253,.5); color:#cfe8ff; }
.kpi-filter .btn.active, .kpi-filter .btn:hover, .kpi-filter .btn:focus { color:#fff; background-color: rgba(13,110,253,.2); border-color: rgba(13,110,253,.8); }

/* ---------- Sparklines ---------- */
.sparkline-wrap svg { display:block; margin-top:2px; }
.sparkline-wrap svg polyline { vector-effect: non-scaling-stroke; }

/* ---------- NBA logo (inline) ---------- */
.nba-logo { height: 22px; width: auto; vertical-align: middle; display: inline-block; }

/* ---------- Profile Side Card ---------- */
.profile-sidecard::before { content: none !important; background: none !important; }
.profile-sidecard {
  position: relative; min-height: 240px; display: flex; align-items: center; justify-content: center; background-color: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; overflow: hidden; background-image: var(--team-bg);
  background-repeat: no-repeat; background-position: center; background-size: 180%;
}
.profile-picture { width:150px; height:150px; object-fit:cover; border-radius:50%; }
.profile-sidecard .profile-picture { box-shadow: 0 0 0 2px rgba(255,255,255,0.08); }

/* ---------- Toast fallback ---------- */
.toast.hide { display: none !important; }

/* ---------- Modern Tables ---------- */
.table-modern {
  --row-bg: rgba(0,0,0,0.45);
  --row-alt: rgba(255,255,255,0.02);
  --row-hover: rgba(15,120,209,0.08);
  --border: rgba(255,255,255,0.14);
  color: #e9eef3; border-color: var(--border); overflow: hidden; border-radius: 10px;
}
.table-modern thead.table-dark th {
  background: linear-gradient(180deg, rgba(15,120,209,0.25), rgba(0,0,0,0.85));
  color: #fff !important; border-color: var(--border) !important; text-transform: uppercase; letter-spacing:.03em; font-weight:700;
}
.table-modern tbody tr { background-color: var(--row-bg); }
.table-modern tbody tr:nth-child(even) { background-color: var(--row-alt); }
.table-modern tbody tr:hover { background-color: var(--row-hover); }
.table-modern td, .table-modern th { border-color: var(--border) !important; vertical-align: middle; text-align: center; }
.col-narrow { width: 110px; }
.col-narrower { width: 90px; }
.col-id { width: 88px; }
.table-wrapper { background: transparent; border-radius: 10px; overflow: hidden; }

/* ---------- Misc ---------- */
.welcome-heading { color: rgb(255, 42, 0); font-weight: bold; }
.table-section-title{ color: rgb(15, 120, 209) !important; font-size: 1.12rem; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 767px){ .table-section-title{ font-size: 1.05rem; } }
#shareTop5Btn { white-space: nowrap; }

/* school crest */
.school-logo, .school-crest { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }

/* ====== GLOBAL RANK cell styles ====== */
.rank-cell{ display:flex; align-items:center; justify-content:center; height:32px; min-width:130px; padding:0 10px; border-radius:8px; font-weight:800; letter-spacing:.02em;
  white-space:nowrap; line-height:1; text-transform:uppercase; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.rankbg-top10{ background:#2b6fff; color:#fff; }
.rankbg-top5{ background:#12c6ff; color:#002033; }
.rankbg-other{ background:#2b2f3b; color:#fff; }
.rankbg-first{ background: linear-gradient(135deg,#fff2b3,#f5c542 60%,#b8860b); color:#1a1300; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rankbg-second{ background: linear-gradient(135deg,#f0f0f0,#c9cdd3 60%,#8e949a); color:#111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rankbg-third{ background: linear-gradient(135deg,#ffe0b8,#d78c3a 60%,#8d4b16); color:#1a0e05; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rankbg-first::after,.rankbg-second::after,.rankbg-third::after{ content:""; position:absolute; inset:0; border-radius:8px;
  background: linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 45%); pointer-events:none; }

/* Isolated rank chip overrides */
.rank-cell{ padding:0 !important; background:transparent !important; }
:root { --rank-chip-w: 168px; }
.rank-chip{ display:inline-flex; align-items:center; justify-content:center; width: var(--rank-chip-w) !important; min-width: var(--rank-chip-w) !important; height:32px; padding:0 10px;
  border-radius:8px; font-weight:800; letter-spacing:.02em; white-space:nowrap; line-height:1; text-transform:uppercase; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
.rank-chip.rankbg-top10 { background:#2b6fff !important; color:#fff !important; }
.rank-chip.rankbg-top5  { background:#12c6ff !important; color:#002033 !important; }
.rank-chip.rankbg-other { background:#2b2f3b !important; color:#fff !important; }
.rank-chip.rankbg-first{ background: linear-gradient(135deg,#fff2b3,#f5c542 60%,#b8860b) !important; color:#1a1300 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rank-chip.rankbg-second{ background: linear-gradient(135deg,#f0f0f0,#c9cdd3 60%,#8e949a) !important; color:#111 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rank-chip.rankbg-third{ background: linear-gradient(135deg,#ffe0b8,#d78c3a 60%,#8d4b16) !important; color:#1a0e05 !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.35); position:relative; }
.rank-chip.rankbg-first::after,.rank-chip.rankbg-second::after,.rank-chip.rankbg-third::after{ content:""; position:absolute; inset:0; border-radius:8px;
  background: linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 45%); pointer-events:none; }

.progress-thin, .overall-pct { margin-top: 6px; margin-bottom: 12px; }
.profile-kpi-section > div.mb-3{ display: grid; grid-template-rows: 28px 28px 6px auto; row-gap: 8px; }
.profile-kpi-section > div.mb-3 > .d-flex{ min-height: 28px; align-items: center; }
.profile-kpi-section .sparkline-wrap{ height: 28px; display: flex; align-items: center; }
.profile-kpi-section .sparkline-wrap svg{ height: 28px !important; width: 140px !important; }
.progress-thin{ height: 6px !important; margin: 0; border-radius: 6px; }
.overall-pct{ height: 6px !important; margin: 8px 0 16px; }
.overall-pct .progress-bar{ height: 100%; }
.profile-kpi-section .profile-kpis{ margin-top: 6px; }

/* Coach dashboard tweaks */
.coach-team-list .list-group-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #e9eef3; }
.coach-team-list .list-group-item:hover { background: rgba(15,120,209,0.10); }
.coach-team-list .list-group-item.active { background: rgba(15,120,209,0.35); color: #fff; border-color: rgba(255,255,255,0.18); }

/* Coach & school avatar sizing */
.coach-dashboard .coach-avatar, .coach-dashboard .school-logo-large{
  width:150px; height:150px; border-radius:50%; display:block; flex:0 0 150px; max-width:none; max-height:none;
}
.coach-dashboard .coach-avatar{
  object-fit: contain !important; object-position: center center !important; background: rgba(0,0,0,0.35);
  padding: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.coach-dashboard .school-logo-large{ object-fit: cover !important; object-position: center center !important; background: transparent !important; padding: 0 !important; }

/* CTA buttons */
.coach-dashboard .cta-menu .btn.cta-btn { min-width: 220px; font-weight: 600; letter-spacing: .2px; }
@media (max-width: 576px){ .coach-dashboard .cta-menu .btn.cta-btn { width: 100%; } }

/* ==== Player Insights ==== */
#playerInsightsModal .modal-content { max-width: 960px; width: 90%; }
.table-modern .col-insights { width: 100px; }
/* Remove underline from player links */
.open-insights { text-decoration: none !important; color: inherit; }
.open-insights:hover, .open-insights:focus { text-decoration: none !important; color: rgb(15,120,209); }

/* ===== Manage Roster (polish) ===== */
#manageRosterModal .modal-content{
  max-width: 1080px;
  width: 92%;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(15,120,209,.12), rgba(0,0,0,.72) 14%);
}
.manage-roster-head{
  padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(15,120,209,.35), rgba(15,120,209,.12));
  border: 1px solid rgba(255,255,255,.12); margin-bottom: 14px;
}
.manage-roster-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 992px){ .manage-roster-grid{ grid-template-columns: 1fr; } }
.manage-card{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px; }
.manage-card h5{ margin: 0 0 10px 0; color:#fff; }
.manage-toolbar{ display:flex; gap:8px; align-items:end; flex-wrap:wrap; margin-bottom:10px; }
.manage-toolbar .form-control{ background:#111; color:#fff; border-color:#444; }
.manage-toolbar .form-control:focus{ background:#111; color:#fff; border-color:#777; box-shadow:0 0 0 .2rem rgba(255,255,255,.08); }
.badge-soft{ display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; background: rgba(15,120,209,.22); border:1px solid rgba(15,120,209,.5); color:#fff; }

/* Compact rows + inline actions */
#manageRosterModal .table-modern th, #manageRosterModal .table-modern td{
  padding: 6px 10px !important; line-height: 1.2; vertical-align: middle; font-size: .94rem;
}
#manageRosterModal .action-cell{ white-space: nowrap; text-align: right; }
#manageRosterModal .action-cell form{ display: inline-flex; align-items: center; gap: 6px; margin: 0; }
#manageRosterModal .roster-move-select{ width: 160px !important; min-width: 160px !important; display: inline-block; }
#manageRosterModal .btn-sm{ padding: .25rem .5rem; }

/* SVG-friendly crest rendering */
.coach-dashboard .school-logo-large.is-svg {
  object-fit: contain !important;
  background: transparent !important;
  padding: 4px !important;   /* small inset so edges don't clip */
}
/* Make selects in custom modals full-width like the other fields */
#coachEditModal .modal-content select,
#schoolCrestModal .modal-content select,
#emailPlayersModal .modal-content select,
#messagePlayersModal .modal-content select {
  width: 100%;
  padding: 10px;
  margin: 6px 0 16px;
  border: none;
  background: #eee;
  color: #000;
  border-radius: 4px;
  height: 42px;              /* match input height */
  box-sizing: border-box;
}

/* Same overlay / container behavior for the new modals */
#manageRosterModal,
#createTeamModal,
#createSchoolModal,
#playerInsightsModal {
  display: none;              /* hidden until opened */
  position: fixed;
  z-index: 1060;
  inset: 0;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

/* Wider content for roster & insights (no inline styles in PHP) */
#manageRosterModal .modal-content { max-width: 980px; width: 90%; }
#playerInsightsModal .modal-content { max-width: 960px; width: 90%; }

/* Make the Insights column wide enough for the full word */
.table-modern .col-insights { width: 120px; }

/* Ensure selects inside custom modals get full width like inputs */
#coachEditModal .modal-content select,
#schoolCrestModal .modal-content select,
#emailPlayersModal .modal-content select,
#messagePlayersModal .modal-content select,
#manageRosterModal .modal-content select,
#createTeamModal .modal-content select,
#createSchoolModal .modal-content select {
  width: 100%;
  padding: 10px;
  margin: 6px 0 16px;
  border: none;
  background: #eee;
  border-radius: 4px;
  color: #000;
}

/* ==== Manage Roster polish ==== */
#manageRosterModal .modal-content{ max-width:880px; }
#manageRosterModal .table td{ vertical-align: middle; }
#manageRosterModal .form-select-sm{ min-width: 180px; }
#manageRosterModal .btn{ white-space: nowrap; }

/* Make the small “Open” buttons readable in tables */
.table-modern .open-insights.btn{ color:#fff !important; }

/* ===== Select caret visible & consistent size (modals, roster, edit profile) ===== */
.form-select {
  -webkit-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem; /* space for caret */
  /* Inline SVG caret (white for dark UIs) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3e%3cpath fill='%23ffffff' d='M8 12L0 0h16z'/%3e%3c/svg%3e");
}
.modal-content .form-select {
  background-color: #fff;           /* in modals your inputs are light */
  color: #000;
  border: 1px solid #ced4da;
  /* black caret for light inputs */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3e%3cpath fill='%23000000' d='M8 12L0 0h16z'/%3e%3c/svg%3e");
}

/* ===== Manage Roster row tightening & alignment ===== */
#manageRosterModal .table-sm td,
#manageRosterModal .table-sm th { padding-top: .6rem; padding-bottom: .6rem; }
#manageRosterModal .mr-row td { vertical-align: middle; }
#manageRosterModal .btn { white-space: nowrap; }

/* Manage Roster tidy */
#manageRosterModal .table td, 
#manageRosterModal .table th { vertical-align: middle; }
#manageRosterModal .mr-actions { width: 120px; }
#manageRosterModal .mr-movecell { min-width: 320px; }
#manageRosterModal .input-group>.form-select { max-width: 220px; }

/* ===== Visible dropdown arrow on light (white) selects ===== */
/* Scope: coach dashboard + its modals only (won't touch other pages) */
.coach-dashboard select.form-select,
#coachEditModal select.form-select,
#manageRosterModal select.form-select,
#createTeamModal select.form-select,
#createSchoolModal select.form-select {
  /* keep the default light control */
  background-color: #fff !important;
  color: #000 !important;
  border-color: #ced4da !important;

  /* show a dark chevron at all times */
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3e%3cpath d='M2 2l6 6 6-6' stroke='%23222' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* use the var above, and also hard-set as fallback */
  background-image: var(--bs-form-select-bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right .85rem center !important;
  background-size: 16px 12px !important;

  /* space for the arrow */
  padding-right: 2.25rem !important;
}

/* keep the same look on hover/focus (no dark mode) */
.coach-dashboard select.form-select:focus,
#coachEditModal select.form-select:focus,
#manageRosterModal select.form-select:focus,
#createTeamModal select.form-select:focus,
#createSchoolModal select.form-select:focus {
  background-color: #fff !important;
  color: #000 !important;
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.2) !important;
  background-image: var(--bs-form-select-bg-img) !important;
}

/* hide legacy arrow in old IE (harmless elsewhere) */
select::-ms-expand { display: none; }


/* ==== Manage Roster – polished layout ==== */

/* Put the small dark caret back on selects, always visible (no dark mode) */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="%23000"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px 12px;
  padding-right: 2rem; /* room for caret */
}

/* Top control bar: same height for inputs/selects/buttons */
.roster-controls .form-control,
.roster-controls .form-select,
.roster-controls .btn {
  height: 44px;
  line-height: 44px;
}
.roster-controls .btn { line-height: normal; } /* let the button handle vertical centering */
.roster-controls .row > [class*="col"] > .d-flex { gap: .5rem; }

/* Table compactness + alignment */
.roster-table tbody td { padding: 10px 12px !important; }
.roster-row .roster-name { font-weight: 700; color: #fff; line-height: 1.2; }
.roster-row .roster-email { font-size: .85rem; color: #cbd5e1; }

/* Keep selects and buttons tidy inside a cell */
.roster-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.roster-actions .form-select { min-width: 160px; }
.roster-actions .btn { height: 36px; padding: .4rem .8rem; }

/* Make the Filter button not huge */
#rosterFilterBtn { padding: .5rem 1rem; }

/* Optional: white text for the Insights “Open” buttons elsewhere */
.btn-insights { color: #fff !important; }

/* ===== Manage Roster – tidy controls and row sizing ===== */
#manageRosterModal .modal-content { max-width: 980px; width: 90%; }

#manageRosterModal .controls-row{
  display: grid;
  grid-template-columns: 1fr 140px; /* search + Filter */
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
#manageRosterModal .add-row{
  display: grid;
  grid-template-columns: 1fr 260px 90px; /* email/username + MoveTo + Add */
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

/* equal heights for inputs & buttons */
#manageRosterModal .form-control,
#manageRosterModal .form-select,
#manageRosterModal .btn {
  height: 42px;
}

/* roster row compactness and action alignment */
#manageRosterModal .table-modern td,
#manageRosterModal .table-modern th { padding: 10px 12px; }
#manageRosterModal .roster-actions{
  display:flex; gap:8px; align-items:center; justify-content:center;
}
/* Manage Roster – compact, consistent controls */
#manageRosterModal .input-group-sm > .form-select,
#manageRosterModal .input-group-sm > .form-control,
#manageRosterModal .input-group-sm > .btn { font-size:14px; }

#manageRosterModal .input-group-sm > .btn { padding:.35rem .65rem; }

#manageRosterModal .table th,
#manageRosterModal .table td { font-size:14px; vertical-align:middle; }

#manageRosterModal .mr-movecell .btn { padding:.25rem .6rem; font-size:14px; }

/* ================= Manage Roster modal (compact, aligned) ================= */
#manageRosterModal .modal-content {
  background: #121212;
  color: #fff;
  border-radius: 10px;
  margin: 40px auto;
  padding: 20px;
  max-width: 980px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}
#manageRosterModal .close {
  float: right;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #aaa;
}
#manageRosterModal .close:hover { color: #fff; }

/* controls rows */
#manageRosterModal .mr-controls {
  display: grid;
  grid-template-columns: 1fr 220px 120px; /* input, select, button */
  gap: 12px;
  margin-bottom: 12px;
}
#manageRosterModal .mr-controls .form-control,
#manageRosterModal .mr-controls .form-select,
#manageRosterModal .mr-controls .btn {
  height: 44px;
  font-size: 0.95rem;
}
#manageRosterModal .controls-row { margin-top: 6px; }
#manageRosterModal .add-row { margin-top: 6px; }

/* table + text consistency */
#manageRosterModal .table thead th {
  font-weight: 600;
  font-size: 0.95rem;
}
#manageRosterModal .mr-row td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 0.95rem;       /* match main tables */
}
#manageRosterModal .roster-name {
  font-weight: 600;
  line-height: 1.1;
}
#manageRosterModal .roster-email {
  font-size: 0.85rem;
  color: #9aa0a6;
  margin-top: 2px;
}

/* move cell */
#manageRosterModal .mr-movecell .input-group {
  max-width: 340px;
  margin: 0 auto;
}
#manageRosterModal .mr-movecell select {
  min-width: 180px;
}

/* actions */
#manageRosterModal .mr-actions .btn {
  width: 100px;             /* smaller, consistent */
}

/* make dropdowns look native & readable on dark modal */
#manageRosterModal select.form-select {
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  background-color: #fff;
  color: #000;
}

/* small primary buttons */
#manageRosterModal .btn.btn-primary.btn-sm {
  padding: .35rem .7rem;
}

/* responsive */
@media (max-width: 700px){
  #manageRosterModal .mr-controls{ grid-template-columns: 1fr; }
  #manageRosterModal .mr-actions .btn { width: 100%; }
}

/* ===== Manage Roster modal: align controls & fix arrows ===== */

/* Make fields & buttons the same height */
#manageRosterModal .form-control,
#manageRosterModal .form-select { height: 44px; font-size: .95rem; }
#manageRosterModal .btn { height: 44px; }

/* Row 1: input-group [Search | Filter] — keep Filter beside input and a sane width */
#manageRosterModal .input-group > .form-control { min-height: 44px; }
#manageRosterModal .input-group > .btn {
  flex: 0 0 120px;          /* fixed button width */
  white-space: nowrap;
}

/* Row 2: [Add by email] [Move To] [Add] — keep “Add” on the same line */
@media (min-width: 768px) {
  /* prevent wrapping: 6 + 4 + 2 columns feel, without changing your HTML */
  #manageRosterModal .row.g-2.align-items-end > .col-md-6 { flex: 1 1 auto; }
  #manageRosterModal .row.g-2.align-items-end > .col-md-4 { flex: 0 0 220px; max-width: 220px; }
  #manageRosterModal .row.g-2.align-items-end > .col-md-2.d-grid { flex: 0 0 120px; max-width: 120px; }
}

/* Ensure the “Add” column actually bottom-aligns with the inputs */
#manageRosterModal .row.g-2.align-items-end > .col-md-2.d-grid {
  display: flex !important;
  align-items: flex-end;
}

/* Single native arrow on selects (remove Bootstrap background caret) */
#manageRosterModal select.form-select {
  background-image: none !important;  /* kills the extra caret */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/* Tighter label spacing so rows line up nicely */
#manageRosterModal .form-label { margin-bottom: 6px; }

/* ===== Index hero video (same width as main content) ===== */
.index-hero-video {
  overflow: hidden;         /* hide any player edge artifacts */
  background: #000;         /* clean letterbox while loading */
  border-radius: 12px;      /* matches your card look; tweak if needed */
}

/* 16:9 responsive wrapper */
.index-hero-video__wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;      /* 16/9 ratio */
}

.index-hero-video__wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Welcome banner – same look, just layout fix */
.welcome-banner {
  padding-top: 12px;
  padding-bottom: 12px;     /* slightly tighter section */
}

.welcome-heading {
  margin-bottom: 8px;       /* keep heading above the row */
}

/* Make top edges align */
.welcome-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;   /* top-align children */
  gap: 24px;
}

/* Kill the Bootstrap mt-3 on that paragraph, if it slips back in */
.welcome-lead {
  margin-top: 0 !important;
  margin-bottom: 0;
}

/* Ensure the button sits at the same top line as the paragraph */
.welcome-cta {
  align-self: flex-start;
}


/* Keep your round button, just optionally scale a touch here */
.welcome-cta .basketball-button i   { font-size: 120px; }
.welcome-cta .basketball-button span { font-size: 24px; }

/* Mobile: stack back to your original vertical layout */
@media (max-width: 768px) {
  .welcome-row { flex-direction: column; }
  .welcome-cta .basketball-button i   { font-size: 110px; }
  .welcome-cta .basketball-button span { font-size: 22px; }
}

/* Lay out text (left) and ball button (right) on one row */
.welcome-toprow {
  display: flex;
  align-items: center;      /* vertical centering */
  justify-content: space-between;
  gap: 24px;
}

/* Left column takes remaining space; text is left-aligned */
.welcome-copy {
  flex: 1 1 auto;
  text-align: left;
}

/* Keep the heading tight above the paragraph */
.welcome-heading {
  margin-bottom: 12px;      /* modest spacing */
  text-align: left;         /* override center */
}

/* Remove extra gap under the white copy */
.welcome-copy .lead {
  margin: 0;
}

/* Ensure the ball button hugs the top/center nicely */
.welcome-cta {
  align-self: center;       /* center vertically against the text block */
  flex: 0 0 auto;
}

/* Mobile: stack nicely, keep your original centered feel */
@media (max-width: 768px) {
  .welcome-toprow {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .welcome-heading {
    text-align: center;
  }
  .welcome-copy {
    text-align: center;
  }
  .welcome-cta {
    margin-top: 12px;
  }
}
/* Row that holds the three highlight chips */
.welcome-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 12px;
}


/* === Highlight chips: bigger + color-inverted === */
.welcome-chip {
  padding: 10px 16px;                         /* a touch taller/wider */
  font-size: 1.1rem;                          /* a bit bigger text */
  font-weight: 700;
  background: rgba(15, 120, 209, 0.8);           /* your page blue */             
  color: #ffffff;                             /* readable on orange */
  border-left: 6px solid rgb(255, 42, 0);  /* your orange */
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); /* faint edge for depth */
}

/* (Optional) small hover lift */
.welcome-chip:hover {
  filter: brightness(1.05);
}


/* Mobile: let them stack cleanly */
@media (max-width: 768px) {
  .welcome-chip {
    flex: 1 1 100%;
  }
}

/* === Make the top/bottom gap inside the welcome banner equal === */
:root { --welcome-vpad: 28px; }            /* tweak this value if you want more/less space */

.welcome-banner{
  padding-top: var(--welcome-vpad);
  padding-bottom: var(--welcome-vpad);
}

/* Normalize default margins so they don't distort the edge spacing */
.welcome-banner h1 { margin-top: 0; }
.welcome-banner .lead { margin-bottom: 0; }
.welcome-chip-row { margin-bottom: 0; }    /* keep chips from adding extra bottom gap */


/* --- Index video card: no inner padding; clean 16:9; even outer margin --- */
.index-hero-video.card { padding: 0 !important; }   /* override .card { padding: 1.5em } */
.index-hero-video__wrap { position: relative; width: 100%; padding-top: 56.25%; }
.index-hero-video__wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.drill-image-large {
    width: 500px;
    height: 800px;
    object-fit: contain;
}
.drill-image-small {
    width: 100%;
    max-width: 400px;
    height: 300px;
    object-fit: contain;
}
.image-container {
    width: 500px;
    margin: 0;
}

.card-header {
    background-color: navy;
    color: white;
    margin: 0;
}
@media (max-width: 768px) {
    .drill-image-large {
        width: 100%;
        height: 500px;
    }
    .drill-image-small {
        max-width: 100%;
        height: 200px;
    }
    .image-container {
        width: 100%;
    }
}

/* ---- Drill Details: simple video under image ---- */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;      /* 16:9 */
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  margin-top: 12px;         /* small gap below the image */
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Drill details: make the card full-width and tight to the top inside its container */
.drill-details-wrap { margin-top: 0 !important; }

/* Fill container width and remove the global .card padding only for this card */
.drill-details-wrap .custom-drill-card {
  max-width: none;      /* override the 1100px cap */
  width: 100%;
  padding: 0;           /* remove global .card padding so the header/image touch card edges */
}

/* Keep comfortable spacing for the text content inside */
.drill-details-wrap .custom-drill-card .card-body {
  padding: 1rem;
}

/* ===== Drill Details: lock alignment of right image with right-aligned buttons ===== */
.drill-details-card { /* remove extra padding from .card so we control edges via the grid */
  padding: 0 !important;
}

/* Grid inside the card body:
   left (media) | right (media)
   footer (full-width buttons + explanation)
*/
.drill-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "left right"
    "footer footer";
  gap: 0;                /* no internal gutter so edges match perfectly */
  padding: 16px;         /* this defines the content edge both media & buttons share */
}

/* Areas */
.drill-left  { grid-area: left;  padding-right: 8px; }
.drill-right { grid-area: right; padding-left: 8px; }
.drill-footer{ grid-area: footer; margin-top: 8px; }

/* Make images behave and fill their cells neatly */
.drill-image-small,
.drill-image-large {
  display: block;
  width: 100%;
  height: auto;
}

/* Keep the quote readable over image2 if present */
.image-container { position: relative; }
.quote-overlay {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 120, 209,.55);
  color: #fff;
  padding: 8px 10px;
  font-size: .95rem;
}

/* Responsive: stack columns on small screens but preserve edge alignment */
@media (max-width: 768px) {
  .drill-details-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "footer";
  }
  .drill-left, .drill-right { padding: 0; }
}

/* Video wrapper (kept from earlier, scoped here) */
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin-top: .75rem;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* ===== Drill details layout ===== */
.drill-details-card .card-body {
  /* single source of truth for the body padding */
  --cb-pad: 16px;
  padding: var(--cb-pad);
}

.drill-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left/right halves */
  column-gap: 16px;                 /* space between the two columns */
  row-gap: 16px;
  align-items: start;
}

.drill-left,
.drill-right {
  min-width: 0;                     /* prevents overflow in grid columns */
}

/* Make the right image fill its column and not overflow */
.drill-right .image-container,
.drill-right .drill-image-large {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;                        /* kill any stray margins */
  padding: 0;
}

/* The footer (explanation + buttons) spans both columns */
.drill-footer {
  grid-column: 1 / -1;
}

/* Keep the buttons flush with the same inner edge as the columns */
.drill-footer .text-end {
  padding-right: 0;                 /* rely on card-body padding only */
}

/* (Optional) tighten the quote overlay positioning on the image */
.quote-overlay {
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
}