* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f5f7;
  color: #23272f;
}

/* ---------- Top bar / nav ---------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid #e2e4e9;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.topbar h1 { font-size: 18px; font-weight: 600; margin: 0; color: #1b1e25; }

.menu { display: flex; gap: 8px; flex-wrap: wrap; }

.menu-toggle {
  display: none;
  border: 1px solid #d7dae0;
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #4b5160;
  margin: 4px 0;
  border-radius: 1px;
}

.menu-item {
  border: 1px solid #d7dae0;
  background: #fff;
  color: #4b5160;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.menu-item:hover { border-color: #3d6ef0; color: #3d6ef0; }
.menu-item.logout { color: #d33a3a; border-color: #f1c3c3; }
.menu-item.logout:hover { background: #fdecec; border-color: #d33a3a; }

.subbar {
  background: #eef1f8;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.subbar select { padding: 5px 8px; border-radius: 6px; border: 1px solid #d7dae0; }

.container { max-width: 980px; margin: 28px auto; padding: 0 16px 48px; }

/* ---------- Panels ---------- */
.panel { background: #fff; border: 1px solid #e2e4e9; border-radius: 10px; padding: 22px 26px 26px; }

.section-title {
  font-size: 15px; font-weight: 600; margin: 22px 0 14px; color: #1b1e25;
  border-top: 1px solid #eceef2; padding-top: 16px;
}

.patient-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

.view-tabs { display: flex; gap: 6px; margin: 6px 0 18px; border-bottom: 1px solid #eceef2; }
.view-tab {
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: #5b616e;
  text-decoration: none; border-bottom: 2px solid transparent;
}
.view-tab.active { color: #3d6ef0; border-bottom-color: #3d6ef0; }
.view-tab:hover { color: #3d6ef0; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: #5b616e; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 8px 10px; border: 1px solid #d7dae0; border-radius: 6px;
  font-size: 14px; background: #fff; color: #1b1e25;
}
.field input:focus, .field select:focus {
  outline: none; border-color: #3d6ef0; box-shadow: 0 0 0 3px rgba(61,110,240,0.15);
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.field-grid .span-2 { grid-column: 1 / -1; }

.filter-form { background: #f8f9fb; border: 1px solid #eceef2; border-radius: 8px; padding: 14px 16px 4px; margin-bottom: 18px; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 14px; }

.day-checks { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.day-check { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #4b5160; }
.day-check input { width: auto; }

.status { font-size: 13px; margin: 6px 0 14px; padding: 8px 10px; border-radius: 6px; }
.status.success { color: #1a8754; background: #e9f9f0; }
.status.error { color: #d33a3a; background: #fdecec; }

.submit-btn {
  padding: 10px 20px; background: #3d6ef0; color: #fff; border: none; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.submit-btn:hover { background: #3159c9; }

.cancel-link { margin-left: 12px; font-size: 13px; color: #8a8f9b; text-decoration: none; }
.cancel-link:hover { color: #3d6ef0; }

.refresh-btn {
  border: 1px solid #d7dae0; background: #fff; color: #4b5160; padding: 7px 14px;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.refresh-btn:hover { border-color: #3d6ef0; color: #3d6ef0; }

.mini-btn {
  border: 1px solid #d7dae0; background: #fff; color: #4b5160; padding: 4px 9px;
  border-radius: 5px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block; margin: 2px 2px 2px 0;
}
.mini-btn:hover { border-color: #3d6ef0; color: #3d6ef0; }
.mini-btn.danger { color: #d33a3a; border-color: #f1c3c3; }
.mini-btn.danger:hover { background: #fdecec; border-color: #d33a3a; }

.inline-form { display: inline-block; }
.actions-cell { white-space: normal; min-width: 260px; }

.inline-appt-form { background: #f8f9fb; border: 1px solid #eceef2; border-radius: 8px; padding: 16px 16px 4px; margin-bottom: 18px; }

.hidden { display: none !important; }

/* ---------- Table ---------- */
.patient-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.patient-table th, .patient-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eceef2; }
.patient-table th { color: #5b616e; font-weight: 600; background: #f8f9fb; }

.status-pill { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.status-tbd { background: #eef1f8; color: #4b5160; }
.status-rxplus { background: #e9f9f0; color: #1a8754; }
.status-rxminus { background: #fff4e5; color: #b3690a; }
.status-absent { background: #fdecec; color: #d33a3a; }
.status-deleted { background: #eceef2; color: #8a8f9b; }

.empty-msg { text-align: center; color: #8a8f9b; font-size: 13px; margin-top: 16px; }

.patient-summary { background: #eef1f8; border-radius: 8px; padding: 12px 16px; margin: 16px 0; }
.patient-summary h3 { margin: 0 0 4px; font-size: 15px; }
.patient-summary p { margin: 0; font-size: 13px; color: #5b616e; }

/* ---------- Subscription plans ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.plan-card {
  border: 1px solid #e2e4e9; border-radius: 10px; padding: 18px 16px; text-align: center;
  background: #f8f9fb;
}
.plan-name { font-size: 14px; font-weight: 600; color: #1b1e25; margin-bottom: 6px; }
.plan-price { font-size: 22px; font-weight: 700; color: #3d6ef0; margin-bottom: 14px; }

.payment-box {
  background: #eef1f8; border-radius: 8px; padding: 14px 16px; font-size: 13px; color: #4b5160;
}
.payment-box p { margin: 0 0 8px; }
.payment-box p:last-child { margin-bottom: 0; }

.approval-badge { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.approval-pending { background: #fff4e5; color: #b3690a; }
.approval-approved { background: #e9f9f0; color: #1a8754; }
.approval-rejected { background: #fdecec; color: #d33a3a; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card { background: #fff; border: 1px solid #e2e4e9; border-radius: 12px; padding: 32px 30px; width: 100%; max-width: 380px; }
.auth-card.wide { max-width: 560px; }
.auth-title { font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 20px; color: #1b1e25; }
.auth-footnote { text-align: center; font-size: 13px; color: #5b616e; margin-top: 16px; }
.auth-footnote a { color: #3d6ef0; text-decoration: none; font-weight: 600; }

.tabs { display: flex; border: 1px solid #d7dae0; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.tab-btn { flex: 1; padding: 9px; border: none; background: #fff; color: #5b616e; font-size: 13px; font-weight: 600; cursor: pointer; }
.tab-btn.active { background: #3d6ef0; color: #fff; }

/* =====================================================
   Responsive: tablet (≤1024px)
   ===================================================== */
@media (max-width: 1024px) {
  .container { max-width: 100%; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .plan-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .patient-table { font-size: 12.5px; }
}

/* =====================================================
   Responsive: mobile (≤640px)
   ===================================================== */
@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .topbar h1 { font-size: 16px; }

  /* Hamburger nav */
  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; }
  .menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 6px;
    order: 3;
  }
  .menu.open { display: flex; }
  .menu-item { text-align: center; padding: 10px 14px; font-size: 13px; }

  .subbar { padding: 10px 16px; flex-wrap: wrap; }
  .subbar select { flex: 1; min-width: 0; }

  .container { margin: 16px auto; padding: 0 10px 32px; }
  .panel { padding: 16px 14px 18px; border-radius: 8px; }
  .section-title { font-size: 14px; margin: 18px 0 12px; padding-top: 14px; }

  /* Inputs at 16px prevent iOS Safari auto-zoom on focus */
  .field input, .field select { font-size: 16px; padding: 10px; }
  .field-grid, .filter-grid { grid-template-columns: 1fr; }

  .patient-header { flex-direction: column; align-items: stretch; }
  .view-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .view-tab { flex: 0 0 auto; white-space: nowrap; }

  .submit-btn, .refresh-btn { width: 100%; padding: 12px; font-size: 15px; }
  .cancel-link { display: block; margin: 10px 0 0; text-align: center; }

  .mini-btn { padding: 8px 12px; font-size: 12.5px; margin: 3px 4px 3px 0; }
  .actions-cell { min-width: 0; }

  .plan-grid { grid-template-columns: 1fr; }

  /* ---- Table → stacked cards ---- */
  .patient-table thead { display: none; }
  .patient-table, .patient-table tbody, .patient-table tr, .patient-table td { display: block; width: 100%; }
  .patient-table tr {
    background: #fff;
    border: 1px solid #eceef2;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 6px 12px;
  }
  .patient-table td {
    border-bottom: 1px solid #f2f3f6;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
  }
  .patient-table td:last-child { border-bottom: none; }
  .patient-table td[data-label]::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 600;
    color: #8a8f9b;
    text-align: left;
    flex-shrink: 0;
  }
  .patient-table td.actions-cell {
    display: block;
    text-align: left;
  }
  .patient-table td.actions-cell::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a8f9b;
    margin-bottom: 6px;
  }
  .patient-table td.actions-cell .mini-btn { width: calc(50% - 4px); text-align: center; margin: 3px 4px 3px 0; }
  .patient-table td.actions-cell form.inline-form { width: calc(50% - 4px); display: inline-block; }
  .patient-table td.actions-cell form.inline-form .mini-btn { width: 100%; margin: 3px 0; }
  .patient-table td.actions-cell a.mini-btn { width: calc(50% - 4px); box-sizing: border-box; }
  .patient-table td.actions-cell details { width: 100%; margin-top: 6px; }
  .patient-table td.actions-cell details summary.mini-btn { width: 100%; text-align: center; }
  .patient-table td .empty-msg { text-align: right; margin: 2px 0 0; }
}