/* Dashboard layout */
.mx-dash-page { background: var(--mx-surface-alt); min-height: 100vh; padding: 32px 0; }
.mx-dash-layout { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.mx-dash-sidebar { position: sticky; top: 20px; }
.mx-dash-main { min-width: 0; }
.mx-dash-head { margin-bottom: 24px; }
.mx-dash-title { font-family: var(--mx-font-sans); font-size: 26px; font-weight: 800; color: var(--mx-ink); margin: 0 0 6px; letter-spacing: -0.01em; }
.mx-dash-subtitle { font-family: var(--mx-font-sans); font-size: 14px; color: var(--mx-ink-muted); margin: 0; }

@media (max-width: 900px) {
  .mx-dash-layout { grid-template-columns: 1fr; }
  .mx-dash-sidebar { position: static; }
}

/* Form grid (Add Family Member) */
.mx-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.mx-field { display: flex; flex-direction: column; }
.mx-field-full { grid-column: 1 / -1; }
.mx-checkbox-row { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mx-font-sans); font-size: 14px; color: var(--mx-ink); cursor: pointer; }
.mx-checkbox { width: 18px; height: 18px; accent-color: var(--mx-primary); cursor: pointer; }

@media (max-width: 600px) {
  .mx-form-grid { grid-template-columns: 1fr; }
}

/* Family profile row */
.mx-family-row { display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px; margin-bottom: 14px; }
.mx-family-avatar {
  width: 52px; height: 52px; min-width: 52px;
  border-radius: var(--mx-radius); background: var(--mx-primary-surface); color: var(--mx-primary);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mx-family-info { flex: 1; min-width: 0; }
.mx-family-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.mx-family-name { font-family: var(--mx-font-sans); font-size: 17px; font-weight: 700; color: var(--mx-ink); margin: 0; }
.mx-family-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mx-font-sans); font-size: 13px; color: var(--mx-ink-muted); margin: 4px 0; }
.mx-family-meta span { display: inline-flex; align-items: center; gap: 5px; }
.mx-family-meta i { color: var(--mx-primary); font-size: 12px; }
.mx-family-allergy {
  margin-top: 8px; padding: 8px 12px; background: var(--mx-warning-surface); color: var(--mx-warning);
  border-radius: var(--mx-radius-sm); font-family: var(--mx-font-sans); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.mx-family-action { flex-shrink: 0; }
.mx-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--mx-radius-sm);
  border: 1px solid var(--mx-border); background: var(--mx-surface); color: var(--mx-ink-muted);
  cursor: pointer; text-decoration: none; transition: all 180ms ease;
}
.mx-btn-icon:hover { background: var(--mx-surface-alt); color: var(--mx-ink); border-color: var(--mx-ink-muted); }
.mx-btn-icon-danger:hover { background: var(--mx-danger-surface); color: var(--mx-danger); border-color: var(--mx-danger); }

/* Alerts */
.mx-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--mx-radius-sm);
  font-family: var(--mx-font-sans); font-size: 14px; font-weight: 500;
  margin-bottom: 20px; border: 1px solid transparent;
}
.mx-alert-success { background: var(--mx-success-surface); color: var(--mx-success); border-color: rgba(15, 114, 68, 0.2); }
.mx-alert-danger { background: var(--mx-danger-surface); color: var(--mx-danger); border-color: rgba(201, 8, 36, 0.2); }
.mx-alert i { font-size: 16px; }

/* ============================================================
   MXPracto Dashboard Polish v2
   Spacing rhythm, typography, alert refinement.
   ============================================================ */

/* ===== PAGE LAYOUT ===== */
.mx-dash-page {
    background: var(--mx-surface-alt);
    min-height: 100vh;
    padding: 28px 0;
}

/* ===== DASHBOARD HEAD ===== */
.mx-dash-head { margin-bottom: 28px; }
.mx-dash-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mx-ink);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.mx-dash-subtitle {
    font-size: 14px;
    color: var(--mx-gray-500);
    margin: 0;
}

/* ===== FORM GRID ===== */
.mx-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
}
.mx-field { display: flex; flex-direction: column; gap: 6px; }
.mx-field-full { grid-column: 1 / -1; }

/* ===== FAMILY ROW ===== */
.mx-family-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.mx-family-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: var(--mx-radius);
    background: var(--mx-primary-surface);
    color: var(--mx-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

/* ===== ALERTS ===== */
.mx-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--mx-radius);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

/* ===== ICON BUTTON ===== */
.mx-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--mx-radius-sm);
    border: 1px solid var(--mx-gray-200);
    background: var(--mx-surface);
    color: var(--mx-gray-500);
    cursor: pointer;
    text-decoration: none;
    transition: all 180ms ease;
}
.mx-btn-icon:hover {
    background: var(--mx-gray-50);
    color: var(--mx-ink);
    border-color: var(--mx-gray-300);
}

@media (max-width: 600px) {
    .mx-form-grid { grid-template-columns: 1fr; }
}

/* (dcv2 dash layer lives in patient_mx.css which loads later) */