/* Booked Now – base + responsive (mobile-first friendly) */
.ticket-card { border-radius: 1rem; }

/* Alerts: use brand accent for warning */
.alert-warning {
  background-color: rgba(245, 192, 95, 0.2);
  border-color: var(--brand-sunflower, #f5c05f);
  color: var(--brand-charcoal, #231f20);
}

/* Mobile: make taps register immediately (no 300ms delay) and show tap feedback */
button, .btn, .btn-close, a, [role="button"], .nav-link, .dropdown-toggle, .dropdown-item,
input[type="submit"], input[type="button"], .form-check-label, .navbar-toggler {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}
/* Navbar toggler: ensure tap target on mobile */
@media (max-width: 991.98px) {
  .navbar-toggler { min-width: 44px; min-height: 44px; padding: 0.5rem; }
}

/* Button contrast: make outline and secondary buttons more visible */
.btn-outline-secondary {
  border-width: 1.5px;
  border-color: var(--brand-charcoal, #231f20);
  color: var(--brand-charcoal, #231f20);
  background-color: #fff;
}
.btn-outline-secondary:hover {
  border-color: var(--brand-charcoal, #231f20);
  color: #fff;
  background-color: var(--brand-charcoal, #231f20);
}
.btn-outline-primary {
  border-width: 1.5px;
  border-color: var(--brand-glacier, #4d97ef);
  color: var(--brand-glacier, #4d97ef);
}
.btn-outline-primary:hover {
  border-color: #3d7ed9;
  color: #fff;
  background-color: var(--brand-glacier, #4d97ef);
}
.btn-secondary {
  border-width: 1px;
  border-color: var(--brand-charcoal, #231f20);
  background-color: var(--brand-charcoal, #231f20);
  color: #fff;
}
.btn-secondary:hover {
  background-color: #3d3939;
  border-color: var(--brand-charcoal, #231f20);
  color: #fff;
}

/* Primary actions */
.btn-primary-custom {
  border-radius: .85rem;
  font-weight: 700;
  padding: .55rem 1rem;
}
.btn-primary-custom.btn-lg {
  padding: .75rem 1.25rem;
  font-size: 1rem;
}
.btn-outline-secondary.btn-lg {
  padding: .75rem 1.25rem;
  border-radius: .85rem;
}

/* Optional narrow form controls (desktop); full width on mobile via responsive block below */
.form-control-narrow, .form-select.form-control-narrow { max-width: 320px; }

/* ---- Site-wide responsive: phones and small screens ---- */
/* Containers & layout */
@media (max-width: 575.98px) {
  .container { padding-left: 0.75rem; padding-right: 0.75rem; }
  .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
  .card-body { padding: 1rem; }
  h1, .h1 { font-size: 1.35rem; }
  h2, .h2 { font-size: 1.2rem; }
  h3, .h3, .card-title.h6 { font-size: 1.05rem; }
  .text-break-mobile { word-break: break-word; overflow-wrap: break-word; }
}

@media (max-width: 767.98px) {
  .container { padding-left: 0.875rem; padding-right: 0.875rem; }
  .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* Touch-friendly buttons site-wide */
@media (max-width: 575.98px) {
  .btn:not(.btn-sm):not(.btn-lg) { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .btn.btn-sm { min-height: 40px; }
  .btn-group .btn { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; } /* 16px reduces iOS zoom on focus */
  input[type="search"].form-control { min-height: 44px; }
}

/* Forms: full width and spacing on small screens */
@media (max-width: 575.98px) {
  .form-control, .form-select { width: 100%; max-width: 100% !important; }
  .row.g-2 .col-md-6, .row.g-2 .col-md-5, .row.g-2 .col-md-2, .row.g-3 .col-md-6 { max-width: 100%; flex: 0 0 100%; }
  .input-group { flex-wrap: wrap; }
  .input-group .form-control, .input-group .btn { flex: 1 1 100%; }
  .input-group .btn { min-height: 44px; margin-top: 0.25rem; }
}

/* Tables: horizontal scroll and readable text */
.table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
@media (max-width: 767.98px) {
  .table { font-size: 0.875rem; }
  .table td, .table th { padding: 0.5rem 0.35rem; white-space: nowrap; }
  .table .text-nowrap { white-space: normal; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* Cards: consistent padding and spacing */
@media (max-width: 575.98px) {
  .card { margin-bottom: 0.75rem; }
  .card-body { padding: 1rem; }
  .card-title { margin-bottom: 0.5rem; }
}

/* Navbar (public): stack search and buttons */
@media (max-width: 991.98px) {
  .navbar-school .navbar-brand span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-school .d-flex.me-2 { width: 100%; margin-left: 0 !important; margin-bottom: 0.5rem; }
  .navbar-school .d-flex.me-2 .form-control { flex: 1; min-height: 44px; }
  .navbar-school .d-flex.me-2 .btn { min-height: 44px; }
  .navbar-school .d-flex.gap-2 { flex-wrap: wrap; }
  .navbar-school .d-flex.gap-2 .btn { min-height: 44px; }
}

@media (max-width: 575.98px) {
  .navbar-school .container { padding-left: 0.5rem; padding-right: 0.5rem; }
  .navbar-school .navbar-brand img { height: 28px !important; }
}

/* Alerts and badges: don’t overflow */
.alert { word-break: break-word; }
.badge { font-size: 0.7rem; }
@media (max-width: 575.98px) {
  .alert { padding: 0.65rem 0.75rem; }
}

/* Utility: prevent long text from breaking layout */
.text-break { word-break: break-word; overflow-wrap: break-word; }

/* School events hero: logo/icon size by breakpoint */
.school-hero-logo { height: 56px; max-width: 140px; }
.school-hero-icon { width: 56px; height: 56px; }
@media (min-width: 768px) {
  .school-hero-logo { height: 72px; max-width: 180px; }
  .school-hero-icon { width: 72px; height: 72px; }
}

/* Dashboard main content: comfortable on small screens */
@media (max-width: 767.98px) {
  .main-content { padding: 0.75rem !important; }
  .main-content .d-flex.justify-content-between.mb-3 { flex-wrap: wrap; gap: 0.5rem; }
  .main-content .small.text-muted { font-size: 0.8rem; }
}

/* Dashboard top bar (hamburger + page kicker + email) on phone */
@media (max-width: 575.98px) {
  .main-content .d-flex.justify-content-between.align-items-center.mb-3 { padding-right: 0; }
  .main-content .d-flex.justify-content-between.align-items-center.mb-3 .text-truncate { max-width: 120px !important; }
  .main-content .d-flex.justify-content-between.align-items-center.mb-3 .small.text-muted:first-child { min-width: 0; flex: 1 1 auto; }
}

/* Prevent horizontal scroll on dashboard when sidebar is overlay */
@media (max-width: 991.98px) {
  .dashboard-layout .container-fluid { overflow-x: hidden; }
  .main-content { min-width: 0; overflow-x: hidden; }
}