/* ═══════════════════════════════════════════════════════════════════

   Apple Design System — FitnessCoach

   ═══════════════════════════════════════════════════════════════════ */



:root {

  /* Apple palette */

  --fc-bg: #f5f5f7;

  --fc-surface: #ffffff;

  --fc-surface-elevated: rgba(255, 255, 255, 0.85);

  --fc-text: #1d1d1f;

  --fc-muted: #6e6e73;

  --fc-muted-light: #86868b;

  --fc-border: rgba(0, 0, 0, 0.08);

  --fc-border-strong: rgba(0, 0, 0, 0.14);

  --fc-accent: #0071e3;

  --fc-accent-hover: #0077ed;

  --fc-accent-subtle: rgba(0, 113, 227, 0.08);

  --fc-danger: #ff3b30;

  --fc-success: #34c759;

  --fc-warning: #ff9f0a;



  /* Geometry */

  --fc-radius: 12px;

  --fc-radius-sm: 8px;

  --fc-radius-lg: 18px;

  --fc-radius-pill: 980px;



  /* Shadows — Apple's signature subtlety */

  --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);

  --fc-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);

  --fc-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.06);



  /* Navbar height */

  --fc-nav-height: 52px;

}



/* ─── Base ────────────────────────────────────────────────────────── */



html {

  font-size: 16px;

  position: relative;

  min-height: 100%;

  scroll-behavior: smooth;

}



body {

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",

    "Helvetica Neue", Arial, sans-serif;

  color: var(--fc-text);

  background: var(--fc-bg);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  margin-bottom: 0;

  padding-top: var(--fc-nav-height);

}



/* ─── Navbar ─────────────────────────────────────────────────────── */



.navbar {

  position: fixed !important;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1040;

  height: var(--fc-nav-height);

  padding: 0 !important;

  background: rgba(255, 255, 255, 0.82) !important;

  backdrop-filter: saturate(180%) blur(20px);

  -webkit-backdrop-filter: saturate(180%) blur(20px);

  border-bottom: 1px solid var(--fc-border) !important;

  box-shadow: none !important;

  transition: background 0.3s ease, backdrop-filter 0.3s ease;

}



.navbar .container {

  display: flex;

  align-items: center;

  height: var(--fc-nav-height);

}



.navbar-brand {

  font-size: 0.9375rem;

  font-weight: 600;

  color: var(--fc-text) !important;

  letter-spacing: -0.022em;

  margin-right: 1.5rem;

}



.navbar .nav-link {

  font-size: 0.8125rem;

  font-weight: 400;

  color: var(--fc-text) !important;

  padding: 0.3rem 0.65rem !important;

  border-radius: var(--fc-radius-pill);

  transition: color 0.15s ease, background 0.15s ease;

  white-space: nowrap;

  opacity: 0.85;

}



.navbar .nav-link:hover {

  color: var(--fc-text) !important;

  background: rgba(0, 0, 0, 0.06);

  opacity: 1;

}



.navbar .nav-link.active,

.navbar .nav-link[aria-current] {

  color: var(--fc-accent) !important;

  background: var(--fc-accent-subtle);

  opacity: 1;

}



.navbar .btn-link.nav-link {

  text-decoration: none;

  border: none;

  background: none;

  cursor: pointer;

}



.navbar-toggler {

  border: none;

  padding: 0.25rem;

}



.navbar-toggler:focus {

  box-shadow: none;

}



/* Sign out — subtle pill button */

.navbar .nav-item form .btn-link.nav-link {

  color: var(--fc-accent) !important;

  opacity: 1;

}



/* ─── Page headings ───────────────────────────────────────────────── */



h1, .h1 {

  font-weight: 700;

  letter-spacing: -0.03em;

  line-height: 1.1;

}



h2, .h2 {

  font-weight: 700;

  letter-spacing: -0.025em;

  line-height: 1.15;

}



h3, .h3 {

  font-weight: 600;

  letter-spacing: -0.02em;

}



h4, .h4, h5, .h5 {

  font-weight: 600;

  letter-spacing: -0.015em;

}



h6, .h6 {

  font-weight: 600;

  letter-spacing: -0.01em;

}



/* ─── Cards ───────────────────────────────────────────────────────── */



.card {

  border-radius: var(--fc-radius) !important;

  border: 1px solid var(--fc-border) !important;

  background: var(--fc-surface);

  box-shadow: var(--fc-shadow-sm);

  overflow: hidden;

}



.card.shadow-sm {

  box-shadow: var(--fc-shadow) !important;

}



.card-header {

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--fc-text);

  background: var(--fc-surface) !important;

  border-bottom: 1px solid var(--fc-border) !important;

  padding: 0.875rem 1.25rem;

  letter-spacing: -0.01em;

}



.card-body {

  padding: 1.5rem;

}



.card.border-0.bg-light,

.card.border-0.bg-light.card {

  background: var(--fc-bg) !important;

  border-color: var(--fc-border) !important;

}



/* ─── Buttons ─────────────────────────────────────────────────────── */



.btn {

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;

  font-size: 0.875rem;

  font-weight: 400;

  border-radius: var(--fc-radius-pill);

  padding: 0.5rem 1.1rem;

  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,

    opacity 0.2s ease, transform 0.1s ease;

  line-height: 1.47059;

  letter-spacing: -0.01em;

}



.btn:active {

  transform: scale(0.98);

}



.btn-sm {

  padding: 0.3rem 0.75rem;

  font-size: 0.8125rem;

}



.btn-lg {

  padding: 0.65rem 1.4rem;

  font-size: 1rem;

}



.btn-primary {

  background: var(--fc-accent);

  border-color: var(--fc-accent);

  color: #fff;

}



.btn-primary:hover,

.btn-primary:focus {

  background: var(--fc-accent-hover);

  border-color: var(--fc-accent-hover);

  color: #fff;

}



.btn-outline-primary {

  color: var(--fc-accent);

  border-color: var(--fc-accent);

  background: transparent;

}



.btn-outline-primary:hover {

  background: var(--fc-accent);

  border-color: var(--fc-accent);

  color: #fff;

}



.btn-outline-secondary {

  color: var(--fc-text);

  border-color: var(--fc-border-strong);

  background: var(--fc-surface);

}



.btn-outline-secondary:hover {

  background: var(--fc-bg);

  border-color: rgba(0, 0, 0, 0.2);

  color: var(--fc-text);

}



.btn-outline-danger {

  font-size: 0.8125rem;

  border-radius: var(--fc-radius-pill);

}



.btn-secondary {

  background: rgba(0, 0, 0, 0.06);

  border-color: transparent;

  color: var(--fc-text);

}



.btn-secondary:hover {

  background: rgba(0, 0, 0, 0.1);

  border-color: transparent;

  color: var(--fc-text);

}



.btn:focus,

.btn-check:focus + .btn {

  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.25);

  outline: none;

}



/* ─── Forms ───────────────────────────────────────────────────────── */



.form-control,

.form-select {

  border: 1px solid var(--fc-border-strong);

  border-radius: var(--fc-radius-sm);

  font-size: 0.9375rem;

  color: var(--fc-text);

  background-color: var(--fc-surface);

  padding: 0.5rem 0.75rem;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  -webkit-appearance: none;

}



.form-control:focus,

.form-select:focus {

  border-color: var(--fc-accent);

  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);

  outline: none;

}



.form-control::placeholder {

  color: var(--fc-muted-light);

}



.form-label {

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--fc-text);

  margin-bottom: 0.3rem;

  letter-spacing: -0.01em;

}



.form-check-label {

  font-size: 0.875rem;

  color: var(--fc-text);

}



.form-text {

  font-size: 0.8125rem;

  color: var(--fc-muted);

}



.form-check-input:checked {

  background-color: var(--fc-accent);

  border-color: var(--fc-accent);

}



.form-check-input:focus {

  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);

  border-color: var(--fc-accent);

}



/* ─── Tables ──────────────────────────────────────────────────────── */



.table {

  background: var(--fc-surface);

  font-size: 0.9rem;

  margin-bottom: 0;

}



.table thead th {

  font-size: 0.6875rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.07em;

  color: var(--fc-muted);

  border-bottom: 1px solid var(--fc-border) !important;

  padding: 0.75rem 1rem;

  background: transparent;

}



.table td {

  padding: 0.8rem 1rem;

  vertical-align: middle;

  border-bottom: 1px solid var(--fc-border);

  color: var(--fc-text);

}



.table tbody tr:last-child td {

  border-bottom: none;

}



.table-hover tbody tr:hover td {

  background-color: rgba(0, 0, 0, 0.02);

}



.table-light th,

.table-light td {

  background-color: var(--fc-bg) !important;

  color: var(--fc-muted);

}



.table-sm thead th { padding: 0.5rem 0.875rem; }

.table-sm td { padding: 0.55rem 0.875rem; }



/* ─── Badges ──────────────────────────────────────────────────────── */



.badge {

  font-weight: 500;

  font-size: 0.6875rem;

  border-radius: var(--fc-radius-pill);

  padding: 0.3em 0.65em;

  letter-spacing: 0.01em;

}



.badge.bg-primary { background-color: var(--fc-accent) !important; }

.badge.bg-success { background-color: var(--fc-success) !important; }

.badge.bg-danger  { background-color: var(--fc-danger) !important; }

.badge.bg-warning { background-color: var(--fc-warning) !important; color: #fff !important; }



/* ─── Nav tabs ────────────────────────────────────────────────────── */



.nav-tabs {

  border-bottom: 1px solid var(--fc-border);

  gap: 0;

}



.nav-tabs .nav-link {

  font-size: 0.875rem;

  font-weight: 500;

  color: var(--fc-muted) !important;

  border: none !important;

  border-bottom: 2px solid transparent !important;

  border-radius: 0 !important;

  padding: 0.65rem 1rem !important;

  margin-bottom: -1px;

  background: none !important;

  transition: color 0.15s ease, border-color 0.15s ease;

  letter-spacing: -0.01em;

}



.nav-tabs .nav-link:hover {

  color: var(--fc-text) !important;

  border-bottom-color: var(--fc-border) !important;

}



.nav-tabs .nav-link.active {

  color: var(--fc-accent) !important;

  border-bottom-color: var(--fc-accent) !important;

  background: none !important;

}



/* ─── Alerts ──────────────────────────────────────────────────────── */



.alert {

  border-radius: var(--fc-radius);

  font-size: 0.9rem;

  border: none;

}



.alert-success {

  background: rgba(52, 199, 89, 0.1);

  color: #1a7a35;

}



.alert-danger {

  background: rgba(255, 59, 48, 0.1);

  color: #c0392b;

}



.alert-warning {

  background: rgba(255, 159, 10, 0.1);

  color: #8a5c00;

}



.alert-info {

  background: rgba(0, 113, 227, 0.08);

  color: #004899;

}



/* ─── Modals ──────────────────────────────────────────────────────── */



.modal-content {

  border-radius: var(--fc-radius-lg) !important;

  border: none;

  box-shadow: var(--fc-shadow-lg);

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: saturate(180%) blur(30px);

  -webkit-backdrop-filter: saturate(180%) blur(30px);

}



.modal-header {

  border-bottom: 1px solid var(--fc-border);

  padding: 1.25rem 1.5rem;

}



.modal-title {

  font-size: 1.0625rem;

  font-weight: 600;

  letter-spacing: -0.018em;

}



.modal-body {

  padding: 1.5rem;

}



.modal-footer {

  border-top: 1px solid var(--fc-border);

  padding: 1rem 1.5rem;

}



.modal-backdrop.show {

  opacity: 0.3;

}



/* ─── Progress ────────────────────────────────────────────────────── */



.progress {

  border-radius: var(--fc-radius-pill);

  background-color: rgba(0, 0, 0, 0.06);

  height: 6px;

}



.progress-bar {

  background-color: var(--fc-accent);

  border-radius: var(--fc-radius-pill);

}



/* ─── Accordion ───────────────────────────────────────────────────── */



.accordion-item {

  border: 1px solid var(--fc-border) !important;

  border-radius: var(--fc-radius) !important;

  overflow: hidden;

  margin-bottom: 0.5rem;

}



.accordion-button {

  font-weight: 600;

  font-size: 0.9375rem;

  letter-spacing: -0.015em;

  background: var(--fc-surface) !important;

  color: var(--fc-text) !important;

  box-shadow: none !important;

}



.accordion-button:not(.collapsed) {

  color: var(--fc-accent) !important;

  background: var(--fc-accent-subtle) !important;

}



.accordion-button:focus {

  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2) !important;

  outline: none;

}



/* ─── Footer ──────────────────────────────────────────────────────── */



footer {

  border-top: 1px solid var(--fc-border) !important;

  color: var(--fc-muted);

  font-size: 0.8125rem;

  padding: 2rem 0;

}



/* ─── Utilities ───────────────────────────────────────────────────── */



.text-muted { color: var(--fc-muted) !important; }

.small, small { font-size: 0.8125rem; }

.text-uppercase { font-size: 0.6875rem !important; letter-spacing: 0.07em; }



.border-top    { border-top: 1px solid var(--fc-border) !important; }

.border-bottom { border-bottom: 1px solid var(--fc-border) !important; }

.border-start  { border-left: 1px solid var(--fc-border) !important; }



/* Rounded list groups */

.list-group-item {

  border-color: var(--fc-border);

  color: var(--fc-text);

  font-size: 0.9rem;

}



.list-group-item:first-child { border-top-left-radius: var(--fc-radius); border-top-right-radius: var(--fc-radius); }

.list-group-item:last-child  { border-bottom-left-radius: var(--fc-radius); border-bottom-right-radius: var(--fc-radius); }



/* Dropdown menus */

.dropdown-menu {

  border-radius: var(--fc-radius);

  border: 1px solid var(--fc-border);

  box-shadow: var(--fc-shadow-lg);

  font-size: 0.875rem;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  padding: 0.35rem;

}



.dropdown-item {

  border-radius: var(--fc-radius-sm);

  padding: 0.4rem 0.75rem;

  color: var(--fc-text);

  transition: background 0.12s ease;

}



.dropdown-item:hover,

.dropdown-item:focus {

  background: rgba(0, 0, 0, 0.05);

  color: var(--fc-text);

}



/* ─── Page-level sections ─────────────────────────────────────────── */



.page-header {

  padding: 2.5rem 0 1.5rem;

}



.page-header h1 {

  font-size: 2rem;

  margin-bottom: 0.25rem;

}



/* ─── FullCalendar overrides ──────────────────────────────────────── */



.fc .fc-toolbar-title {

  font-size: 1.1rem;

  font-weight: 600;

  letter-spacing: -0.02em;

}



.fc .fc-button {

  background: var(--fc-surface) !important;

  border: 1px solid var(--fc-border) !important;

  color: var(--fc-text) !important;

  border-radius: var(--fc-radius-sm) !important;

  font-size: 0.8125rem !important;

  font-weight: 500 !important;

  box-shadow: var(--fc-shadow-sm) !important;

  transition: background 0.15s ease !important;

}



.fc .fc-button:hover {

  background: var(--fc-bg) !important;

}



.fc .fc-button-primary:not(:disabled).fc-button-active {

  background: var(--fc-accent) !important;

  border-color: var(--fc-accent) !important;

  color: #fff !important;

}



.fc .fc-daygrid-day-number,

.fc .fc-col-header-cell-cushion {

  font-size: 0.8125rem;

  color: var(--fc-muted);

}



/* ─── Chart.js canvas tweaks ──────────────────────────────────────── */



canvas {

  border-radius: var(--fc-radius-sm);

}



/* ─── Scrollbar (WebKit) ──────────────────────────────────────────── */



::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }

::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }



/* ─── Responsive ──────────────────────────────────────────────────── */



@media (max-width: 767.98px) {

  .navbar {

    height: auto;

    min-height: var(--fc-nav-height);

    padding: 0.25rem 0 !important;

  }

  body {

    padding-top: 60px;

  }

  .card-body {

    padding: 1.25rem;

  }

  h1, .h1 {

    font-size: 1.75rem;

  }

}