/* Modern SaaS UI layer for Coaching Management */

:root {
  --cm-primary: #16404d;
  --cm-primary-rgb: 22, 64, 77;
  --cm-accent: #037de2;
  --cm-accent-rgb: 3, 125, 226;
  --cm-bg: #f7f7ff;
  --cm-surface: #ffffff;
  --cm-muted: #64748b;
  --cm-heading: #32393f;
  --cm-border: #e9ecef;
  --cm-radius: 18px;
  --cm-radius-sm: 12px;
  --cm-shadow: 0 26px 70px rgba(15, 23, 42, .14);
  --bs-primary: var(--cm-primary);
  --bs-primary-rgb: var(--cm-primary-rgb);
  --bs-body-bg: var(--cm-bg);
  --bs-body-color: #334155;
  --bs-border-color: var(--cm-border);
  --bs-border-radius: var(--cm-radius-sm);
  --bs-font-sans-serif: "Plus Jakarta Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at top left, rgba(var(--cm-primary-rgb), .08), transparent 24rem),
    linear-gradient(180deg, #fbfbff 0%, #f7f7ff 100%);
  color: var(--bs-body-color);
  letter-spacing: -.01em;
}

.card,
.wrapper .card,
.page-wrapper .card {
  border: 1px solid rgba(226, 232, 240, .85);
  border-radius: var(--cm-radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(180deg, #fff, #fbfcff);
  border-bottom: 1px solid var(--cm-border);
  color: var(--cm-heading);
  font-weight: 700;
}

.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection {
  border-radius: 14px !important;
  border-color: #dee2e6 !important;
  min-height: 42px;
  background-color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: rgba(var(--cm-primary-rgb), .65) !important;
  box-shadow: 0 0 0 .22rem rgba(var(--cm-primary-rgb), .12) !important;
}

/*label,*/
/*.form-label {*/
/*  color: #495057;*/
/*  margin-bottom: .45rem;*/
/*}*/

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(var(--cm-primary-rgb), .035);
  vertical-align: middle;
}

.table thead th {
  color: #6c757d;
  background: #f8f9fa;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cm-border);
}

.table tbody td {
  border-color: #edf2f7;
}

/* Modal same as modern CSS */
.modal-backdrop.show {
  opacity: .55 !important;
}

.modal-content {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

.modal-header {
  border: none !important;
  background: #f8fafc !important;
}

.modal-title {
  color: #1e293b !important;
  font-weight: 500 !important;
}

.modal-body {
  background: #fff !important;
}

.modal-footer {
  border: none !important;
  background: #fff !important;
}

.modal .btn-close {
  box-shadow: none !important;
  opacity: .75;
}

.modal .btn-close:hover {
  opacity: 1;
}

/* SweetAlert Matching Theme */
.swal-overlay {
  background: rgba(15,23,42,0.45) !important;
}

.swal-modal {
  border-radius: 16px !important;
  padding: 28px 24px !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
   border-top: 4px solid #16404d !important; /* same previous border */
  box-shadow: 0 10px 30px rgba(15,23,42,0.12) !important;
}

.swal-title {
  color: #3b3b3b !important;
  font-size: 22px !important;
  font-weight: 500 !important;
}

.swal-text {
  color: #6b7280 !important;
  font-size: 15px !important;
  text-align: center !important;
}

/* Buttons same as screenshot */
.swal-button {
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.swal-button--confirm {
  background: #ef4444 !important;
  border: 1px solid #ef4444 !important;
  color: #fff !important;
}

.swal-button--confirm:hover {
  background: #dc2626 !important;
}

.swal-button--cancel {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
}

.swal-button--cancel:hover {
  background: #e5e7eb !important;
}

.swal-button:focus {
  box-shadow: none !important;
}
@media (max-width: 576px) {
  .modal-header,
  .modal-body {
    padding: 1rem;
  }

  .modal-footer {
    padding: 1rem;
  }
}