/*
  Material-style components for Rehab EHR Presentation.
  Visually aligned with common Material Dashboard patterns (e.g. Creative Tim’s public demo:
  https://demos.creative-tim.com/material-dashboard-pro/pages/dashboards/analytics.html).
  This file is original work for this project — not Creative Tim’s proprietary CSS/JS.
*/

.md-page-toolbar {
  display: flex;
  align-items: center;
}

.md-back-link:hover {
  color: var(--md-primary) !important;
}

.md-form-panel {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

.md-panel-card .card-body {
  background: var(--md-card-bg);
}

.md-panel-card-header {
  background: linear-gradient(95deg, rgba(var(--md-primary-rgb), 0.18) 0%, rgba(var(--md-primary-rgb), 0.04) 45%, transparent 78%);
  color: var(--bs-body-color);
}

/*
  Switches: clear horizontal gap between track and label (Material Dashboard–style spacing).
  Uses flex instead of Bootstrap’s negative indent so text is never cramped.
*/
.form-check.md-switch.form-switch {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 0;
  margin-bottom: 0.85rem;
  min-height: 1.5rem;
}

.form-check.md-switch.form-switch .form-check-input {
  --md-switch-track-w: 2.75rem;
  --md-switch-track-h: 1.375rem;
  --md-switch-thumb: 1.125rem;
  --md-switch-inset: 0.1875rem;
  float: none;
  margin-left: 0;
  margin-top: 0.15rem;
  flex-shrink: 0;
  width: var(--md-switch-track-w);
  height: var(--md-switch-track-h);
  border-radius: 2rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  /* Material Dashboard uses fixed-pixel :after motion for 1.875rem tracks; re-anchor thumb for our width. */
  position: relative;
  box-sizing: border-box;
}

/* Thumb: flush left (off) / flush right (on); overrides material-dashboard.css translateX hacks. */
.form-check.md-switch.form-switch .form-check-input::after,
.form-check.md-switch.form-switch .form-check-input:after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--md-switch-inset);
  width: var(--md-switch-thumb);
  height: var(--md-switch-thumb);
  margin-top: 0;
  transform: translateY(-50%);
  transition: left 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.12);
}

.form-check.md-switch.form-switch .form-check-input:checked::after,
.form-check.md-switch.form-switch .form-check-input:checked:after {
  left: calc(var(--md-switch-track-w) - var(--md-switch-thumb) - var(--md-switch-inset));
  transform: translateY(-50%);
  border-color: rgba(0, 0, 0, 0.12);
}

.form-check.md-switch.form-switch .form-check-input:checked {
  background-color: var(--md-primary);
  border-color: var(--md-primary);
}

.form-check.md-switch.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--md-primary-rgb), 0.28);
  border-color: rgba(var(--md-primary-rgb), 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .form-check.md-switch.form-switch .form-check-input::after,
  .form-check.md-switch.form-switch .form-check-input:after {
    transition: none;
  }
}

/* Mirror thumb ends when Creative Tim’s `.rtl` wrapper is used */
.rtl .form-check.md-switch.form-switch .form-check-input::after,
.rtl .form-check.md-switch.form-switch .form-check-input:after {
  left: auto;
  right: var(--md-switch-inset);
  transform: translateY(-50%);
}

.rtl .form-check.md-switch.form-switch .form-check-input:checked::after,
.rtl .form-check.md-switch.form-switch .form-check-input:checked:after {
  right: auto;
  left: var(--md-switch-inset);
  transform: translateY(-50%);
}

.form-check.md-switch.form-switch .form-check-label {
  cursor: pointer;
  padding-top: 0.2rem;
  line-height: 1.45;
  flex: 1;
  min-width: 0;
}

/* Feature / tenant checkbox groups: full height (no max-height scroll box) */
.md-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem 1rem;
  background: rgba(var(--md-primary-rgb), 0.04);
  border: 1px solid rgba(var(--md-primary-rgb), 0.14);
}

[data-bs-theme="dark"] .md-check-list {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Nested data table inside a form panel */
.md-table-embed {
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(var(--md-primary-rgb), 0.12);
}

[data-bs-theme="dark"] .md-table-embed {
  border-color: rgba(255, 255, 255, 0.1);
}

.md-table-embed .table {
  margin-bottom: 0;
}

.md-table-embed .table > :not(caption) > * > * {
  background-color: transparent;
}

/* Primary action row at bottom of panel forms */
.md-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] .md-form-actions {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.md-form-panel .btn-primary {
  min-width: 7.5rem;
  border-radius: 0.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.admin-nav-toggler {
  display: flex;
  align-items: center;
}

.app-nav-sublink {
  display: flex;
  align-items: center;
}