:root {
  color-scheme: light;
  --bg: #f8f3e8;
  --surface: #fffdf8;
  --text: #28372d;
  --muted: #667267;
  --primary: #397052;
  --accent: #b96845;
  --border: #e4ddcf;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f8f3e8, #edf4ea);
  color: var(--text);
}
.demo-mode-banner { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 8px 18px; background: #183f32; color: white; box-shadow: 0 3px 12px rgba(20,33,61,.18); }
.demo-mode-banner span { color: #d7e7df; font-size: .78rem; }
.demo-mode-banner button { min-height: 32px; padding: 6px 11px; border: 0; border-radius: 8px; background: white; color: var(--primary); font-weight: 800; cursor: pointer; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-messenger { position: fixed; right: 22px; bottom: 22px; z-index: 1200; font-family: inherit; }
.site-messenger-launcher { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 12px 18px; border: 0; border-radius: 999px; background: #275c49; color: #fff; box-shadow: 0 8px 28px rgba(18, 46, 37, .3); font: inherit; font-weight: 800; cursor: pointer; }
.site-messenger-launcher span:first-child { font-size: 1.2rem; }
.site-messenger-panel { width: min(370px, calc(100vw - 28px)); overflow: hidden; border: 1px solid rgba(39, 92, 73, .18); border-radius: 18px; background: #fff; box-shadow: 0 16px 48px rgba(18, 46, 37, .28); }
.site-messenger-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 17px; background: #275c49; color: #fff; }
.site-messenger-header div { display: grid; gap: 3px; }
.site-messenger-header small { color: #d9eee5; }
.site-messenger-header small span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #76d69f; }
.site-messenger-header button { border: 0; background: transparent; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.site-messenger-thread { display: flex; flex-direction: column; gap: 10px; height: 300px; padding: 16px; overflow-y: auto; background: #f6f8f4; }
.site-message { max-width: 82%; }
.site-message p { margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff; color: #23332d; box-shadow: 0 1px 4px rgba(18, 46, 37, .09); line-height: 1.42; }
.site-message time { display: block; margin: 4px 5px 0; color: #6d7d76; font-size: .7rem; }
.site-message-visitor { align-self: flex-end; }
.site-message-visitor p { background: #275c49; color: #fff; border-bottom-right-radius: 4px; }
.site-message-visitor time { text-align: right; }
.site-message-farm { align-self: flex-start; }
.site-message-farm p { border-bottom-left-radius: 4px; }
.site-messenger-form { display: flex; gap: 9px; align-items: flex-end; padding: 12px; border-top: 1px solid #e0e6e2; }
.site-messenger-form textarea { flex: 1; min-height: 43px; max-height: 100px; resize: vertical; padding: 10px 11px; border: 1px solid #bdc9c3; border-radius: 10px; font: inherit; }
.site-messenger-form button { min-height: 43px; padding: 9px 14px; border: 0; border-radius: 10px; background: #275c49; color: #fff; font-weight: 800; cursor: pointer; }
.site-messenger-form button:disabled { opacity: .55; }
.site-messenger-note { margin: 0; padding: 0 12px 10px; color: #718079; font-size: .7rem; text-align: center; }
.demo-open-profile { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: 12px; padding: 9px 13px; border: 1px solid #397052; border-radius: 9px; color: #275c49; background: #f2f8f4; font-weight: 800; text-decoration: none; }
.demo-open-profile:hover, .demo-open-profile:focus-visible { background: #275c49; color: #fff; }
.admin-demo-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; text-decoration: none; white-space: nowrap; }
@media (max-width: 600px) { .site-messenger { right: 14px; bottom: 14px; } .site-messenger-panel { width: calc(100vw - 28px); } .site-messenger-thread { height: min(330px, 48vh); } }
@media (max-width: 600px) { .demo-mode-banner { align-items: flex-start; flex-wrap: wrap; gap: 5px 10px; padding: 8px 12px; } .demo-mode-banner span { order: 3; width: 100%; text-align: center; } }

.participant-payment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0 24px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(20, 33, 61, .05);
}
.participant-next-session-card { margin-bottom: 18px; }
.participant-next-session-card .content-heading { margin-top: 0; }
.participant-payment-card h2 { margin: 3px 0 6px; }
.participant-payment-card p:last-child { margin: 0; color: var(--muted); }
.participant-payment-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.payment-btn { min-width: 150px; padding: 13px 18px; border-radius: 12px; color: #fff; font-weight: 800; text-align: center; text-decoration: none; }
.payment-btn span { display: block; margin-top: 2px; font-size: .78rem; font-weight: 600; opacity: .9; }
.venmo-payment-btn { background: #008cff; }
.paypal-payment-btn { background: #003087; }
.payment-btn:hover { filter: brightness(.94); transform: translateY(-1px); }
.payment-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.payment-progress-card { margin: -12px 0 20px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 13px; background: #f8faf7; }
.payment-progress-card > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.payment-progress-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.payment-progress-card .text-btn { margin-top: 12px; }
.payment-progress-card .auth-message { margin-top: 10px; }
.billing-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.billing-heading h2 { margin:3px 0 5px; }
.billing-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.billing-settings-grid hr { margin:22px 0; border:0; border-top:1px solid var(--border); }
.billing-package-list,.participant-billing-accounts { display:grid; gap:9px; margin-top:16px; }
.billing-package-list article,.billing-account { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fafbf8; }
.billing-package-list article>div,.billing-account>div { display:grid; gap:3px; }
.billing-package-list span,.billing-account span { color:var(--muted); font-size:.8rem; }
.billing-account>div:last-child { text-align:right; }
.billing-account.invoice_due { border-color:#d5a73b; background:#fff9e8; }
.participant-billing-alerts { display:grid; gap:10px; margin:16px 0; }
.billing-due-alert,.billing-paid-alert { padding:16px; border:1px solid #d5a73b; border-left:5px solid #d5a73b; border-radius:13px; background:#fff9e8; }
.billing-paid-alert { border-color:var(--primary); border-left-color:var(--primary); background:#edf7f0; }
.billing-due-alert p,.billing-paid-alert p { margin:5px 0 0; color:var(--muted); }
.billing-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.billing-summary article { padding:18px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.billing-summary span { display:block; color:var(--muted); font-size:.82rem; font-weight:700; }
.billing-summary strong { display:block; margin-top:7px; color:var(--ink); font-size:1.45rem; }
.billing-layout { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(440px,1.5fr); gap:20px; align-items:start; }
.billing-ledger-card { min-width:0; }
.billing-filters { display:grid; grid-template-columns:1fr 180px; gap:10px; margin:16px 0; }
.billing-filters input,.billing-filters select { width:100%; }
.billing-ledger { display:grid; gap:12px; }
.billing-record { padding:17px; border:1px solid var(--border); border-left:5px solid #d5a73b; border-radius:14px; background:#fff; }
.billing-record.verified { border-left-color:var(--primary); }
.billing-record-main { display:flex; justify-content:space-between; gap:18px; }
.billing-record-main>div { min-width:0; }
.billing-record-main strong { display:block; margin-top:5px; }
.billing-record-main p { margin:3px 0 0; color:var(--muted); }
.billing-record-amount { white-space:nowrap; font-size:1.2rem; }
.billing-type { display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ed; color:var(--primary); font-size:.7rem; font-weight:800; text-transform:uppercase; }
.billing-type.payment { background:#e8f4ed; }
.billing-type.credit { background:#eaf0f9; color:#315d87; }
.billing-record dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.billing-record dt { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; }
.billing-record dd { overflow-wrap:anywhere; margin:3px 0 0; font-size:.86rem; }
.billing-internal-note { padding:9px 11px; border-radius:9px; background:#f6f4ed; color:var(--muted); font-size:.84rem; }
.instructor-notification-card { margin:24px 0; }
.payment-notification>div { display:flex; justify-content:space-between; gap:10px; }
@media (max-width:900px) { .billing-summary{grid-template-columns:repeat(2,1fr)} .billing-layout,.billing-settings-grid{grid-template-columns:1fr} }
@media (max-width:560px) { .billing-heading{flex-direction:column} .billing-summary,.billing-filters{grid-template-columns:1fr} .billing-record dl{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (max-width: 640px) {
  .participant-payment-card { align-items: stretch; flex-direction: column; }
  .participant-payment-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .payment-btn { min-width: 0; }
}

.admin-forms-panel,
.shared-forms-dialog {
  color: var(--text, #24342c);
}

.forms-admin-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: 22px;
  padding: 24px;
}

.form-audience-fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid #cfdad3;
  border-radius: 14px;
}

.form-audience-fieldset label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}

.required-form-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 2px solid #d9a39a;
  border-radius: 14px;
  background: #fff7f5;
}

.required-form-toggle span { display: grid; gap: 3px; }
.required-form-toggle small { color: #6d5a55; font-weight: 400; }

.shared-forms-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: 86vh;
  padding: 0;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(25, 43, 33, 0.28);
}

.shared-forms-dialog::backdrop { background: rgba(23, 35, 29, 0.55); }
.shared-forms-heading { display: flex; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid #e2e9e4; }
.shared-forms-heading h2, .shared-form-card h3 { margin: 0; }
.shared-forms-heading p:last-child { margin-bottom: 0; }
.shared-forms-list { display: grid; gap: 14px; padding: 20px; }

.shared-form-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dce6df;
  border-radius: 16px;
  background: #fff;
}

.shared-form-card p { margin: 5px 0; }
.shared-form-title { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.required-form-badge, .optional-form-badge { padding: 4px 8px; border-radius: 999px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.required-form-badge { color: #842f25; background: #f9ddd8; }
.optional-form-badge { color: #526158; background: #edf1ee; }
.required-form-note { color: #842f25; }
.shared-form-card small { color: #66736c; }
.shared-form-icon { display: grid; place-items: center; width: 46px; height: 52px; border-radius: 9px; color: #fff; background: #397052; font-size: 0.72rem; font-weight: 800; }
.shared-form-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.form-audience { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.84rem; }
.form-audience span { padding: 4px 8px; border-radius: 999px; background: #edf5ef; color: #315f45; font-weight: 700; }

@media (max-width: 760px) {
  .forms-admin-layout { grid-template-columns: 1fr; padding: 16px; }
  .shared-form-card { grid-template-columns: auto minmax(0, 1fr); }
  .shared-form-actions { grid-column: 1 / -1; flex-direction: row; }
  .shared-form-actions > * { flex: 1; text-align: center; }
}

button,
input,
textarea {
  font: inherit;
}

.field-help { display: block; margin-top: 6px; color: var(--muted); font-size: .76rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.8;
}

h1,
h2,
h3 {
  margin-top: 0;
}

.primary-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--primary), #3d7de0);
  color: white;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(45, 108, 223, 0.18);
}

.hero-card,
.card,
.portal-panel,
.module-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(20, 33, 61, 0.08);
}

.hero-card ul,
.priority-list {
  padding-left: 20px;
  line-height: 1.8;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 18px 40px rgba(20, 33, 61, 0.10);
}

.login-header {
  margin-bottom: 16px;
}

.welcome-text {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.portal-panel {
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 24px rgba(20, 33, 61, 0.05);
}

.portal-panel h3 {
  color: var(--primary);
}

.login-form {
  display: grid;
  gap: 10px;
  max-width: 360px;
  margin-top: 14px;
}

.login-form input {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
  background: #fbfcff;
}

.auth-message {
  margin-top: 12px;
  color: var(--muted);
}

.auth-message.error {
  color: #b42318;
}

.auth-message.success {
  color: var(--accent);
}

.dashboard-panel {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
}

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

.news-box {
  background: linear-gradient(135deg, #f8fbff, #eef4ff);
  border: 1px solid #dfe9fb;
  border-radius: 16px;
  padding: 16px;
}

.news-box h4 {
  margin: 0 0 8px;
  color: var(--primary);
}

.news-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.hidden {
  display: none !important;
}

.portal-page {
  min-height: 100vh;
  padding-bottom: 48px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

.app-header h1 {
  margin-bottom: 0;
}

.app-header .eyebrow {
  color: var(--primary);
  margin-bottom: 8px;
}

.text-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.button-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.standalone-schedule-page { min-height: 100vh; padding-bottom: 48px; }
.schedule-page-header { padding-top: 30px; padding-bottom: 24px; }
.schedule-quick-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(1080px, calc(100% - 48px)); margin: 0 auto 16px; padding: 18px 20px; border-radius: 16px; background: #183f32; color: white; }
.schedule-quick-bar strong, .schedule-quick-bar span { display: block; }
.schedule-quick-bar span { margin-top: 3px; color: #d7e7df; font-size: .78rem; }
.schedule-quick-bar .primary-btn { min-height: 58px; margin: 0; padding: 13px 24px; background: white; color: var(--primary); font-size: 1rem; white-space: nowrap; }
.schedule-quick-bar .primary-btn span { display: inline; margin: 0; color: inherit; font-size: 1.15rem; }
.calendar-help { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.standalone-calendar-card .weekly-calendar { display: grid; grid-template-columns: 1fr; gap: 12px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
.standalone-calendar-card .calendar-day { min-height: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.standalone-calendar-card .calendar-day > header { justify-content: space-between; padding: 12px 14px; }
.calendar-day-title { display: flex; align-items: center; gap: 8px; }
.calendar-day-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.standalone-calendar-card .calendar-day-sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
.standalone-calendar-card .calendar-session { padding: 13px; }
.day-contact-button { min-height: 42px; padding: 8px 12px; border: 1px solid #9fbea5; border-radius: 9px; background: white; color: var(--primary); font: inherit; font-size: .76rem; font-weight: 800; cursor: pointer; }
.day-contact-button { background: var(--primary); color: white; }
.schedule-pick-time { min-height: 48px; background: #e8f1e7; }
.schedule-save-button { min-height: 54px; font-size: 1rem; }
.quick-length-choice { margin: 0; padding: 0; border: 0; }
.quick-length-choice legend { margin-bottom: 8px; font-size: .82rem; font-weight: 700; }
.quick-length-choice > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quick-length-choice button { min-height: 52px; border: 0; border-radius: 11px; background: var(--primary); color: white; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) {
  .schedule-quick-bar { align-items: stretch; flex-direction: column; width: calc(100% - 32px); }
  .schedule-quick-bar .primary-btn { width: 100%; }
  .standalone-calendar-card .calendar-day-sessions { grid-template-columns: 1fr; padding: 9px; }
  .standalone-calendar-card .calendar-day > header { align-items: stretch; flex-direction: column; }
  .calendar-day-actions { display: grid; grid-template-columns: 1fr; }
  .day-contact-button { width: 100%; min-height: 48px; }
  .schedule-contact-btn, .schedule-pick-time { min-height: 48px; }
}
.standalone-calendar-card { margin-bottom: 0; }
.schedule-legend { display: flex; justify-content: space-between; gap: 12px; margin: -5px 0 14px; color: var(--muted); font-size: .76rem; }
.schedule-legend span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.schedule-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.standalone-session { cursor: default; }
.standalone-session small { display: block; margin-top: 6px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.schedule-action-status:empty { display: none; }
.schedule-action-status { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px; background: #f2f4ef; }
.standalone-session { cursor: default; }
.standalone-session > time { font-size: .78rem; }
.standalone-session .schedule-participant { margin: 5px 0 1px; font-size: .92rem; }
.schedule-participant-contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 9px; border: 1px solid #b8cdbb; border-radius: 9px; background: white; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.schedule-participant-contact span { color: var(--text); font-size: .88rem; font-weight: 800; }
.schedule-participant-contact small { margin: 0; color: var(--primary); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.schedule-participant-contact:hover, .schedule-participant-contact:focus-visible { border-color: var(--primary); background: #edf5ed; outline: none; }
.schedule-session-name { color: var(--muted); }
.schedule-volunteer-list { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #d8e3d5; font-size: .7rem; }
.schedule-volunteer { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.schedule-volunteer > span:first-child strong, .schedule-volunteer > span:first-child small { display: block; }
.schedule-volunteer-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px; border: 1px solid #c9d9cb; border-radius: 8px; background: white; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.schedule-volunteer-name:hover, .schedule-volunteer-name:focus-visible { border-color: var(--primary); background: #edf5ed; outline: none; }
.schedule-volunteer-name span:first-child strong, .schedule-volunteer-name span:first-child small { display: block; }
.schedule-volunteer-name span:last-child { color: var(--primary); font-size: .62rem; font-weight: 800; white-space: nowrap; }
.schedule-contact-actions { display: flex !important; gap: 3px; }
.schedule-contact-actions a, .schedule-edit-btn { padding: 6px 7px; border: 1px solid #b8cdbb; border-radius: 7px; background: white; color: var(--primary); font: inherit; font-weight: 700; text-decoration: none; }
.schedule-edit-btn { width: 100%; margin-top: 8px; cursor: pointer; }
.schedule-contact-btn { width: 100%; margin-top: 8px; padding: 8px; border: 0; border-radius: 8px; background: var(--primary); color: white; font-size: .7rem; font-weight: 800; cursor: pointer; }
.schedule-unfilled { color: var(--muted); }
.schedule-session-dialog { width: min(440px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 22px 70px rgba(20, 33, 61, .25); }
.schedule-session-dialog::backdrop { background: rgba(20, 33, 61, .55); }
.schedule-session-form { display: grid; gap: 15px; padding: 22px; }
.schedule-sheet-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.schedule-sheet-heading h2 { margin: 3px 0; }
.schedule-session-form label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; }
.schedule-session-form input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.schedule-session-form select { width: 100%; min-height: 48px; padding: 10px 38px 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--text); font: inherit; }
.schedule-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-session-summary { margin: -7px 0 2px; color: var(--muted); }
.quick-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.quick-contact-actions a, .quick-contact-actions button { display: grid; place-items: center; min-height: 46px; padding: 10px 12px; border: 1px solid #b8cdbb; border-radius: 10px; background: white; color: var(--primary); font: inherit; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; }
.quick-contact-actions a:first-child { background: var(--primary); color: white; }
.contact-everyone-button { width: 100%; min-height: 52px; padding: 11px 14px; border: 0; border-radius: 11px; background: var(--primary); color: white; font: inherit; font-weight: 800; cursor: pointer; }
.contact-popup-list { display: grid; gap: 11px; }
.contact-popup-person { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #f7faf6; }
.contact-popup-person > div:first-child strong, .contact-popup-person > div:first-child span { display: block; }
.contact-popup-person > div:first-child span { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.contact-popup-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.contact-popup-actions a, .contact-popup-actions button { min-height: 44px; display: grid; place-items: center; padding: 9px; border: 1px solid #b8cdbb; border-radius: 10px; background: white; color: var(--primary); font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }
.contact-popup-actions > span { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
.schedule-session-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; resize: vertical; }
.calendar-signup { display: grid; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(57, 112, 82, .18); }
.calendar-signup select { width: 100%; min-width: 0; padding: 6px 4px; border: 1px solid var(--border); border-radius: 7px; background: white; color: var(--text); font-size: .68rem; }
.calendar-signup button { width: 100%; min-height: 34px; padding: 6px; border: 0; border-radius: 7px; background: var(--instructor-color, var(--primary)); color: white; font-size: .7rem; font-weight: 700; cursor: pointer; }
.calendar-signed-up { color: var(--primary); font-size: .69rem !important; }
.calendar-full { color: var(--muted); font-size: .68rem !important; }

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  gap: 22px;
  width: min(1080px, calc(100% - 48px));
  margin: 12px auto 0;
}

.farm-link-list { display: grid; gap: 12px; }
.farm-link-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.farm-link-item h3 { margin: 4px 0; }
.farm-link-item a { display: block; max-width: 540px; color: var(--primary); overflow-wrap: anywhere; }
.farm-link-item small { display: block; margin-top: 7px; color: var(--muted); }
.farm-link-type { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #edf4ea; color: var(--primary); font-size: .72rem; font-weight: 800; }
.farm-link-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }

@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; width: min(100% - 28px, 1080px); }
  .farm-link-item { align-items: flex-start; flex-direction: column; }
  .farm-link-actions { justify-content: flex-start; }
}

.admin-approval-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: min(1080px, calc(100% - 48px));
  margin: 12px auto 0;
}

.admin-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(20, 33, 61, 0.05);
}

.approved-list-card {
  grid-column: 1 / -1;
}

.admin-intro,
.approval-item small {
  color: var(--muted);
}

.approval-list {
  display: grid;
  gap: 10px;
}

.approval-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}

.approval-item strong,
.approval-item a,
.approval-item small {
  display: block;
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.approval-item a {
  color: var(--primary);
}

.approve-btn,
.remove-approval-btn {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.approve-btn { background: var(--primary); color: white; }
.remove-approval-btn { background: #f8e6e1; color: #8b3528; }

.requirement-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  font-weight: 600;
}

.requirement-actions {
  display: grid;
  gap: 8px;
  min-width: 210px;
}

.requirement-done {
  padding: 9px 12px;
  border: 1px solid #b9d7c4;
  border-radius: 10px;
  background: #eaf6ee;
  color: var(--primary);
  font-weight: 700;
}

.annual-paperwork-field { margin-top: 14px; }

.expiry-label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.expiry-label input {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: white;
}

.approved-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.approved-check { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: #f8faf8; color: var(--text); font-size: .82rem; font-weight: 700; cursor: pointer; }
.approved-check input { width: 19px; height: 19px; margin: 0; accent-color: var(--primary); }

.paperwork-photo-preview { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px; border: 1px solid #bfd7c5; border-radius: 10px; background: #f2f8f1; }
.paperwork-photo-preview.hidden { display: none; }
.paperwork-photo-preview img { width: 70px; height: 70px; border-radius: 8px; object-fit: cover; }
.paperwork-photo-preview span, .paperwork-photo-preview small { display: block; }
.paperwork-photo-preview small { margin-top: 3px; color: var(--muted); overflow-wrap: anywhere; }

.approval-status {
  display: inline-block;
  width: fit-content;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

.approval-status.eligible { background: #eaf6ee; color: var(--primary); }
.approval-status.expired,
.approval-status.blocked { background: #f8e6e1; color: #8b3528; }

.paperwork-files {
  max-width: 360px;
  margin-top: 8px !important;
  padding: 7px 9px;
  border-radius: 9px;
  background: #f3f6f1;
}

.paperwork-download-btn {
  width: 100%;
  margin-top: 10px;
  border-style: dashed;
  background: #f3f6f1;
  color: var(--primary);
}

.signed-out-card {
  text-align: center;
}

.signed-out-card .primary-btn {
  width: 100%;
  min-height: 52px;
}

.thank-you-dialog {
  width: min(90vw, 430px);
  padding: 30px;
  border: 0;
  border-radius: 24px;
  color: var(--text);
  text-align: center;
  box-shadow: 0 24px 70px rgba(20, 33, 61, 0.25);
}

.thank-you-dialog::backdrop {
  background: rgba(20, 33, 61, 0.55);
  backdrop-filter: blur(3px);
}

.thank-you-dialog h2 {
  margin-bottom: 10px;
}

.thank-you-dialog p:not(.step-label) {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.thank-you-dialog .primary-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 22px;
}

.thank-you-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e7f7f2;
  color: var(--accent);
  font-size: 1.5rem;
}

.portal-content {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.portal-nav {
  display: flex;
  gap: 6px;
  max-width: 1080px;
  margin: 0 auto 22px;
  padding: 0 24px;
  overflow-x: auto;
}

.nav-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.nav-btn.active {
  background: var(--primary);
  color: white;
}

.dashboard-view {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.welcome-banner {
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #e8f1e5, #fff8e8);
  border: 1px solid #d9e3d4;
}

.welcome-banner h2 { margin: 4px 0 8px; font-size: clamp(1.65rem, 4vw, 2.35rem); }
.welcome-banner > p:last-child { margin: 0; color: var(--muted); }

.volunteer-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 30px;
}

.volunteer-summary div, .hours-hero {
  display: grid;
  gap: 5px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}

.volunteer-summary span, .hours-hero span { color: var(--muted); font-size: .8rem; }
.good-status { color: var(--primary); }
.content-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.content-heading h2, .content-heading p { margin: 0; }
.link-btn { border: 0; background: transparent; color: var(--primary); font-weight: 700; cursor: pointer; }
.available-session-grid, .schedule-card-list { display: grid; gap: 13px; }
.schedule-help { margin: -7px 0 18px; color: var(--muted); }

.available-session-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(40, 55, 45, .06);
}
.available-session-card.availability-match { border-left: 6px solid var(--instructor-color, var(--primary)); background: linear-gradient(90deg, color-mix(in srgb, var(--instructor-color, var(--primary)) 8%, white), var(--surface) 34%); }

.session-card-date { display: grid; place-items: center; padding: 9px; border-radius: 12px; background: #f4e5d8; color: #914d32; }
.session-card-date strong { font-size: 1.35rem; }
.session-card-date span { font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.session-card-content h3, .session-card-content p { margin: 3px 0; }
.session-card-content p, .session-card-content small { color: var(--muted); }
.session-need { color: var(--accent) !important; font-size: .77rem; font-weight: 700; text-transform: uppercase; }
.signup-btn { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 12px; background: var(--accent); color: white; font-weight: 700; cursor: pointer; }
.signup-btn.signed-up { background: #e5ece5; color: var(--primary); }
.session-signup-actions { display: grid; gap: 8px; min-width: 145px; }
.session-signup-actions select { width: 100%; min-height: 42px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--text); font: inherit; }
.my-schedule-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
.my-session-details h3, .my-session-details p { margin: 3px 0; }
.my-session-details small { display: block; margin-top: 4px; color: var(--muted); }
.my-session-details > strong { display: inline-block; margin-top: 5px; color: var(--primary); }
.cancel-signup-btn { min-height: 44px; padding: 9px 14px; border: 1px solid #e2b7aa; border-radius: 11px; background: #fff7f4; color: #9a432c; font-weight: 700; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hours-hero { place-items: center; margin-bottom: 16px; padding: 32px; }
.hours-hero strong { color: var(--primary); font-size: 3rem; }
.verification-card { margin-top: 22px; padding: 24px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 8px 24px rgba(40, 55, 45, .06); }
.verification-intro { margin: -8px 0 22px; color: var(--muted); line-height: 1.6; }
.verification-form { display: grid; gap: 17px; }
.verification-btn { width: 100%; min-height: 52px; margin-top: 0; }
.verification-request-list { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.verification-request-list h3 { margin-bottom: 10px; }
.verification-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--border); }
.verification-request:first-of-type { border-top: 0; }
.verification-request div, .verification-request div span { display: block; }
.verification-request div span { margin-top: 4px; color: var(--muted); font-size: .85rem; }
.request-status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; background: #fff1df; color: #8a5700; font-size: .75rem; font-weight: 700; }
.account-settings { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 18px; }
.account-settings summary { color: var(--muted); font-weight: 700; cursor: pointer; }
.account-settings .profile-actions { margin-top: 16px; padding-top: 0; border-top: 0; }
.portal-sidebar .sessions-card { display: none; }
.volunteer-home-messages { margin-bottom: 30px; }
.volunteer-home-section { margin-bottom: 30px; }
.available-session-card.session-time-conflict { border-color: #d8b4a8; background: #fff8f5; opacity: .82; }
.session-conflict-note { margin: 0 0 4px !important; color: #98452f !important; font-size: .77rem; font-weight: 800; text-transform: uppercase; }
.volunteer-role-options { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.volunteer-role-options legend { padding: 0 5px; color: var(--muted); font-size: .78rem; font-weight: 800; }

.volunteer-card,
.recent-card,
.availability-card,
.sessions-card,
.message-card,
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(20, 33, 61, 0.08);
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 0;
}

.status-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.status-badge.available {
  background: #e7f7f2;
  color: #087a61;
}

.status-badge.unavailable {
  background: #f1f3f7;
  color: var(--muted);
}

.availability-form,
.availability-details {
  display: grid;
  gap: 16px;
}

.availability-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  border-radius: 14px;
  background: #f8fbff;
  cursor: pointer;
}

.availability-toggle span,
.availability-toggle small {
  display: block;
}

.availability-toggle small {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.4;
}

.availability-toggle input {
  flex: 0 0 auto;
  width: 48px;
  height: 26px;
  accent-color: var(--accent);
}

.availability-details {
  padding-top: 2px;
}

.availability-schedule {
  margin: 0;
  padding: 0;
  border: 0;
}

.availability-schedule legend {
  margin-bottom: 10px;
  font-weight: 700;
}

.schedule-head,
.availability-row {
  display: grid;
  grid-template-columns: 30px minmax(75px, 1fr) minmax(86px, 1fr) minmax(86px, 1fr);
  gap: 7px;
  align-items: center;
}

.schedule-head {
  padding: 0 8px 7px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.availability-rows {
  display: grid;
  gap: 7px;
}

.availability-row {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fafbfe;
}

.availability-row.selected {
  border-color: #a9c3f1;
  background: #f2f7ff;
}

.availability-row > input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
}

.availability-row > input[type="time"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
  font-size: 0.85rem;
}

.availability-row > input[type="time"]:disabled {
  background: #eef1f5;
  opacity: 0.65;
}

.secondary-btn {
  width: 100%;
  min-height: 48px;
  padding: 11px 15px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: white;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}

.session-list {
  display: grid;
  gap: 12px;
}

.empty-card {
  padding: 22px 14px;
  border-radius: 14px;
  background: #f8fbff;
  color: var(--muted);
  text-align: center;
}

.empty-card p {
  margin: 5px 0 0;
}

.empty-calendar {
  margin-bottom: 8px;
  font-size: 1.8rem;
}

.session-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.session-item:first-child {
  border-top: 0;
}

.session-date {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 58px;
  border-radius: 12px;
  background: #eaf1ff;
  color: var(--primary);
}

.session-date span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.session-date strong {
  font-size: 1.25rem;
}

.session-item h3,
.session-item p {
  margin: 0 0 5px;
}

.session-item h3 {
  font-size: 1rem;
}

.session-item p,
.session-item small {
  color: var(--muted);
}

.portal-sidebar {
  display: grid;
  align-content: start;
  gap: 20px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.section-heading h2,
.step-label {
  margin: 0;
}

.section-heading > p {
  color: var(--muted);
  font-size: 0.85rem;
}

.step-label {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.volunteer-form,
.field-group {
  display: grid;
  gap: 8px;
}

.volunteer-form {
  gap: 18px;
}

.field-row,
.upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field-group label,
.upload-title {
  font-weight: 700;
}

.field-group input,
.field-group textarea,
.field-group select {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fbfcff;
  color: var(--text);
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  outline: 3px solid rgba(45, 108, 223, 0.16);
  border-color: var(--primary);
}

.message-form {
  display: grid;
  gap: 16px;
}

.delivery-options {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.delivery-options legend {
  width: 100%;
  margin-bottom: 9px;
  font-weight: 700;
}

.delivery-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
}

.delivery-options input {
  width: 20px;
  height: 20px;
}

.message-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 0;
}

.inbox-help {
  margin: -8px 0 20px;
  color: var(--muted);
  line-height: 1.5;
}

.message-history {
  display: grid;
  gap: 12px;
}

.message-item {
  padding: 12px;
  border-radius: 12px;
  background: #f8fbff;
}

.message-item p {
  margin: 6px 0;
  line-height: 1.45;
}

.message-item small {
  color: var(--muted);
}

.upload-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px dashed #aebbd0;
  border-radius: 16px;
  background: #f8fbff;
}

.photo-preview {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: #e8eef8;
  color: var(--muted);
  font-size: 0.78rem;
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  color: var(--primary);
  background: white;
  font-weight: 700;
  cursor: pointer;
}

.upload-help,
.empty-state {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.document-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.save-btn {
  width: 100%;
  min-height: 54px;
  margin-top: 0;
  font-size: 1rem;
}

.profile-actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.profile-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px;
  border-radius: 14px;
}

.pause-action {
  background: #fff9eb;
}

.delete-action {
  background: #fff8f7;
}

.profile-action h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.profile-action p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.danger-btn,
.pause-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 10px 15px;
  border-radius: 12px;
  background: white;
  font-weight: 700;
  cursor: pointer;
}

.danger-btn {
  border: 1px solid #b42318;
  color: #b42318;
}

.pause-btn {
  border: 1px solid #a66700;
  color: #8a5700;
}

.pause-btn.reactivate {
  border-color: var(--accent);
  color: #087a61;
}

.section-heading.compact {
  align-items: center;
}

.count-badge {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eaf1ff;
  color: var(--primary);
  font-weight: 700;
}

.volunteer-list {
  display: grid;
  gap: 12px;
}

.volunteer-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.volunteer-item:first-child {
  border-top: 0;
}

.avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eaf1ff;
  color: var(--primary);
  font-weight: 700;
}

.volunteer-item h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.volunteer-item a,
.volunteer-item small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.module-card h3 {
  color: var(--primary);
}

.module-card p {
  color: var(--muted);
  line-height: 1.6;
}

.schedule-section {
  padding-top: 72px;
}

.schedule-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
}

.instructor-subtitle { margin: 6px 0 0; color: var(--muted); }
.staff-content { width: min(1080px, calc(100% - 48px)); margin: 0 auto 28px; }
.staff-page-heading { margin: 24px 0 18px; }
.staff-page-heading h2, .staff-page-heading p { margin-top: 5px; margin-bottom: 5px; }
.staff-orientation-layout, .staff-message-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.staff-orientation-layout .admin-card, .staff-message-layout .admin-card { margin: 0; }
.staff-orientation-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.staff-orientation-layout #staff-approved-list .approval-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.staff-orientation-layout #staff-approved-list .requirement-actions { min-width: 0; width: 100%; }
.staff-orientation-layout #staff-approved-list .expiry-label input { width: 100%; min-width: 0; box-sizing: border-box; }
.staff-orientation-layout #staff-approved-list .requirement-done,
.staff-orientation-layout #staff-approved-list .approve-btn { width: 100%; }
.instructor-content { width: min(1080px, calc(100% - 48px)); margin: 0 auto 28px; }
.instructor-welcome { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 24px; border-radius: 20px; background: linear-gradient(135deg, #315f48, #497b5f); color: white; box-shadow: 0 12px 28px rgba(40, 80, 58, .18); }
.instructor-welcome h2, .instructor-welcome p { margin: 3px 0; }
.instructor-stat { display: grid; min-width: 130px; padding: 16px; border-radius: 15px; background: rgba(255,255,255,.14); text-align: center; }
.instructor-stat strong { font-size: 1.8rem; }
.instructor-stat span { font-size: .75rem; }
.instructor-content > .content-heading { margin-top: 24px; }
.instructor-tip { color: var(--muted); font-size: .8rem; }
.instructor-session-list, .instructor-availability-list { display: grid; gap: 14px; }
.instructor-session-card { display: grid; grid-template-columns: minmax(250px, 1fr) auto; gap: 14px 20px; padding: 20px; border: 1px solid var(--border); border-left: 6px solid var(--instructor-color, var(--primary)); border-radius: 17px; background: var(--surface); box-shadow: 0 8px 20px rgba(20,33,61,.05); }
.instructor-session-actions { display: grid; align-content: start; gap: 10px; }
.quick-note-btn { width: 100%; margin: 0; }
.quick-note-dialog { width: min(580px, calc(100% - 28px)); max-height: calc(100vh - 32px); padding: 24px; border: 0; border-radius: 20px; background: #fffdf8; color: var(--text); box-shadow: 0 24px 70px rgba(20,33,61,.28); }
.quick-note-dialog::backdrop { background: rgba(20,33,61,.52); backdrop-filter: blur(3px); }
.quick-note-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.quick-note-heading h2, .quick-note-heading p { margin: 3px 0; }
.quick-note-heading > div > p:last-child { color: var(--muted); }
.quick-note-more { padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: #f8faf8; }
.quick-note-more summary { color: var(--primary); font-size: .84rem; font-weight: 700; cursor: pointer; }
.quick-note-more[open] { display: grid; gap: 11px; }
.quick-note-actions { display: flex; align-items: center; gap: 12px; }
.quick-note-actions .primary-btn { margin: 0; }
.instructor-session-main h3, .instructor-session-main p { margin: 4px 0; }
.instructor-session-main small { color: var(--muted); }
.quick-time-buttons { display: flex; align-items: start; gap: 7px; }
.quick-time-buttons button, .volunteer-contact-actions a { padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--primary); font-weight: 700; text-decoration: none; cursor: pointer; }
.quick-time-form { grid-column: 1 / -1; display: flex; align-items: end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.quick-time-form label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.quick-time-form input { min-height: 42px; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: white; }
.quick-time-form .primary-btn { min-height: 42px; margin: 0; padding: 9px 17px; }
.available-volunteer-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.available-volunteer-card h3, .available-volunteer-card p { margin: 3px 0; }
.available-volunteer-card small { color: var(--muted); }
.volunteer-contact-actions { display: flex; gap: 7px; }
.instructor-calendar-toolbar { margin-top: 24px; }
.instructor-schedule-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 22px 24px; border-radius: 20px; background: #183f32; color: white; }
.instructor-schedule-hero h2, .instructor-schedule-hero p { margin: 4px 0; }
.instructor-schedule-hero > div:first-child > p:last-child { color: #d7e7df; }
.schedule-speed-key { display: flex; gap: 8px; flex-wrap: wrap; }
.schedule-speed-key span { padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.12); font-size: .75rem; white-space: nowrap; }
#instructor-update-status:empty { display: none; }
#instructor-update-status { position: sticky; top: 8px; z-index: 8; margin: 0 0 12px; padding: 12px 15px; border-radius: 11px; box-shadow: 0 8px 18px rgba(20,33,61,.1); }
.instructor-agenda { display: grid; gap: 12px; }
.instructor-agenda-day { overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: white; }
.instructor-agenda-day > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #f7f7f3; }
.instructor-agenda-day.today { border-color: #89ad96; box-shadow: 0 0 0 2px #dcecdf; }
.instructor-agenda-day.today > header { background: #eaf4eb; }
.agenda-date { display: flex; align-items: baseline; gap: 9px; color: var(--primary); }
.agenda-date span { font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.agenda-date strong { font-size: 1.2rem; }
.agenda-count { color: var(--muted); font-size: .75rem; font-weight: 700; }
.agenda-empty { margin: 0; padding: 14px; color: #8b918a; font-size: .82rem; }
.instructor-agenda-session { display: grid; grid-template-columns: 92px minmax(210px,1fr) auto; align-items: center; gap: 16px; padding: 14px; border-left: 5px solid var(--instructor-color,var(--primary)); border-top: 1px solid #edf0ec; }
.instructor-agenda-session:first-child { border-top: 0; }
.agenda-time time, .agenda-time span { display: block; }
.agenda-time time { color: var(--text); font-size: .98rem; font-weight: 800; }
.agenda-time span { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.agenda-session-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agenda-session-title strong, .agenda-session-title span { display: block; }
.agenda-session-title strong { font-size: .92rem; }
.agenda-session-title > div span { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.agenda-duration { flex: none; padding: 5px 8px; border-radius: 999px; background: #eef3ed; color: var(--primary); font-size: .68rem; font-weight: 800; }
.agenda-volunteers { margin-top: 7px; color: var(--muted); font-size: .72rem; }
.agenda-volunteers summary { cursor: pointer; }
.agenda-quick-actions { display: flex; align-items: center; gap: 6px; }
.agenda-quick-actions button { min-width: 44px; min-height: 40px; padding: 7px 10px; border: 1px solid #cbd8cd; border-radius: 9px; background: white; color: var(--primary); font-weight: 800; cursor: pointer; }
.agenda-quick-actions button:hover, .agenda-quick-actions button:focus-visible { border-color: var(--primary); background: #edf5ed; outline: none; }
.agenda-duration-buttons { display: flex; align-items: center; gap: 4px; margin-left: 5px; padding-left: 10px; border-left: 1px solid var(--border); }
.agenda-duration-buttons span { margin-right: 3px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.agenda-duration-buttons button { min-width: 38px; font-size: .7rem; }
.agenda-duration-buttons button.active { border-color: var(--primary); background: var(--primary); color: white; }
.agenda-quick-actions .agenda-more { color: var(--muted); }
.instructor-weekly-calendar { margin-top: 14px; }
.instructor-calendar-session { cursor: default; }
.instructor-calendar-session > strong { font-size: .82rem; }
.instructor-calendar-volunteers { display: grid; gap: 5px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #d8e3d5; font-size: .65rem; }
.instructor-calendar-volunteer { display: grid; gap: 3px; }
.instructor-calendar-contact { display: flex !important; flex-wrap: wrap; gap: 3px; }
.instructor-calendar-contact a, .instructor-calendar-edit { padding: 5px 6px; border: 1px solid #b8cdbb; border-radius: 6px; background: #fff; color: var(--primary); font-size: .62rem; font-weight: 800; text-decoration: none; }
.instructor-calendar-edit { width: 100%; margin-top: 7px; cursor: pointer; }
.calendar-no-volunteers { color: var(--muted); }
.instructor-calendar-edit-form { flex-wrap: wrap; }
.instructor-calendar-edit-form .primary-btn { min-height: 48px; margin: 0; }
.instructor-simple-editor { position: sticky; bottom: 12px; z-index: 5; margin-top: 18px; padding: 20px; border: 2px solid var(--primary); border-radius: 18px; background: #fffdf8; box-shadow: 0 16px 40px rgba(31,65,45,.22); }
.simple-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.simple-editor-heading h3, .simple-editor-heading p { margin: 3px 0; }
.simple-editor-heading > div > p:last-child { color: var(--muted); }
.instructor-simple-editor .quick-time-buttons { margin-top: 16px; }
.instructor-simple-editor .quick-time-form { margin-top: 16px; }
.instructor-summary-card { grid-template-columns: 1fr; }
.simple-duration-form { display: flex; align-items: end; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.simple-duration-form label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.simple-duration-form input { min-height: 48px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.duration-buttons { display: flex; gap: 10px; }
.duration-buttons button { min-height: 48px; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--primary); color: white; font-weight: 700; cursor: pointer; }
.card-duration-form { grid-column: 1 / -1; }
.instructor-add-card { max-width: 720px; margin: 24px auto 0; }
.instructor-profile-card { max-width: 680px; margin: 24px auto 0; }
.instructor-sessions-companion { margin-top: -4px; }
.instructor-message-card { margin-top: 24px; }
.admin-notification-card { margin: 0 0 20px; }
.instructor-message-card .content-heading { margin-top: 0; }
.instructor-message-card .message-history { margin-top: 22px; }
.duration-choice { display: grid; gap: 9px; }
.duration-choice > span { color: var(--muted); font-size: .82rem; font-weight: 700; }

.admin-nav { max-width: 1080px; margin-bottom: 18px; }
.volunteer-directory { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 10px 24px rgba(20, 33, 61, .05); }
.directory-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.directory-heading h2, .directory-heading p { margin-top: 0; }
.directory-count { flex: none; padding: 8px 12px; border-radius: 999px; background: #eaf1ff; color: var(--primary); font-size: .82rem; font-weight: 700; }
.directory-search { display: grid; gap: 8px; margin: 22px 0; }
.directory-search label { font-weight: 700; }
.directory-search input { width: 100%; min-height: 52px; padding: 13px 16px 13px 44px; border: 1px solid #cbd5e1; border-radius: 13px; background: #fbfcff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364758b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 15px center; color: var(--text); font: inherit; }
.directory-search input:focus { border-color: var(--primary); outline: 3px solid rgba(57, 112, 82, .14); }
.directory-list { display: grid; gap: 10px; }
.directory-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; }
.directory-person { min-width: 0; }
.directory-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.directory-name h3 { margin: 0; font-size: 1rem; }
.volunteer-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.volunteer-admin-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 11px; background: #f7faf6; }
.volunteer-admin-controls label { display: grid; flex: 1 1 190px; gap: 5px; color: var(--text); font-size: .78rem; font-weight: 700; }
.volunteer-admin-controls select { min-height: 42px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 9px; background: white; color: var(--text); font: inherit; font-weight: 400; }
.volunteer-admin-controls button { min-height: 42px; }
.horse-leader-training-control .approved-check { flex: 1 1 230px; align-self: end; }
.directory-card .volunteer-admin-controls { align-items: center; gap: 8px; margin-top: 9px; padding: 8px 10px; }
.directory-card .volunteer-role-options { flex: 0 1 auto; width: auto; min-width: 0; gap: 6px; padding: 5px 8px 7px; }
.directory-card .volunteer-role-options legend { line-height: 1; }
.directory-card .volunteer-role-options .approved-check { display: flex; flex: 0 0 auto; min-height: 32px; padding: 5px 8px; gap: 6px; }
.directory-card .volunteer-role-options .approved-check input,
.directory-card .horse-leader-training-control > .approved-check input { width: 17px; height: 17px; }
.directory-card .horse-leader-training-control > .approved-check { display: flex; flex: 0 1 auto; align-self: center; min-height: 34px; padding: 6px 9px; }
.directory-card .volunteer-admin-controls button { min-height: 36px; padding-top: 7px; padding-bottom: 7px; }
.directory-details { display: flex; flex-wrap: wrap; gap: 5px 20px; margin-top: 7px; }
.directory-details a, .directory-details span { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.person-record-card { align-items: start; }
.person-details { margin-top: 12px; border-top: 1px solid var(--border); }
.person-details summary { padding: 11px 0 2px; color: var(--primary); font-size: .84rem; font-weight: 700; cursor: pointer; }
.person-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding-top: 12px; }
.person-detail-grid p { display: grid; gap: 3px; margin: 0; }
.person-detail-grid strong { color: var(--text); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.person-detail-grid span { color: var(--muted); font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.person-detail-grid .detail-wide { grid-column: 1 / -1; }
.staff-notes-form { display: grid; gap: 9px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.staff-notes-form label { display: grid; gap: 7px; color: var(--text); font-size: .82rem; font-weight: 700; }
.staff-notes-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: var(--text); font: inherit; font-weight: 400; resize: vertical; }
.staff-notes-form textarea:focus { border-color: var(--primary); outline: 3px solid rgba(57, 112, 82, .14); }
.staff-notes-form > div { display: flex; align-items: center; gap: 12px; }
.staff-notes-form .primary-btn { min-height: 40px; margin: 0; padding: 8px 14px; font-size: .82rem; }
.staff-notes-status { color: var(--primary); font-size: .82rem; font-weight: 700; }
.staff-admin-area { width: min(1180px, calc(100% - 48px)); margin: 0 auto 32px; }
.staff-admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 24px 0 18px; }
.staff-admin-heading h2, .staff-admin-heading p { margin: 4px 0; }
.staff-access-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.staff-access-summary span { padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .8rem; }
.staff-access-summary strong { color: var(--text); }
.staff-admin-layout { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(460px, 1.25fr); gap: 20px; align-items: start; }
.staff-admin-layout .admin-card { margin: 0; }
.staff-roster-card .section-heading select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.staff-record-list { display: grid; gap: 12px; margin-top: 16px; }
.staff-record-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 17px; border: 1px solid var(--border); border-radius: 15px; background: #fff; }
.staff-record-name { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.staff-record-name h3 { margin: 5px 0 8px; }
.staff-type-badge, .access-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.staff-type-badge { background: #eef4ed; color: var(--primary); }
.access-status.pending { background: #fff4d6; color: #835b00; }.access-status.approved { background: #e4f4e8; color: #24623d; }.access-status.denied { background: #fbe8e7; color: #8a302c; }
.staff-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; font-size: .82rem; }
.staff-contact-grid a { color: var(--primary); overflow-wrap: anywhere; }.staff-contact-grid span { color: var(--muted); }
.staff-record-notes { margin: 10px 0 6px; color: var(--text); font-size: .86rem; white-space: pre-wrap; }
.staff-record-main > small { color: var(--muted); }
.staff-paperwork-section { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.staff-paperwork-section h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; }
.staff-paperwork-section h4 span { min-width: 23px; padding: 3px 6px; border-radius: 999px; background: #eef4ed; color: var(--primary); font-size: .7rem; text-align: center; }
.staff-document-list { display: grid; gap: 7px; }
.staff-document-list .empty-state { margin: 4px 0 8px; }
.staff-document-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #f7faf6; }
.staff-document-item > div { display: grid; gap: 2px; min-width: 0; }.staff-document-item span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }.staff-document-item a { color: var(--primary); font-size: .84rem; font-weight: 700; overflow-wrap: anywhere; }.staff-document-item small { color: var(--muted); font-size: .72rem; }
.staff-document-upload { display: grid; grid-template-columns: .7fr 1fr auto; align-items: end; gap: 8px; margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 11px; }
.staff-document-upload label { display: grid; gap: 5px; color: var(--muted); font-size: .75rem; font-weight: 700; }.staff-document-upload select, .staff-document-upload input { width: 100%; min-height: 40px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; background: white; }.staff-document-upload input { font-size: .72rem; }
.staff-record-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; min-width: 126px; }
.staff-record-actions button { margin: 0; white-space: nowrap; }
.staff-schedule-permission { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 11px; border-radius: 10px; background: #f1f6ef; cursor: pointer; }
.staff-schedule-permission input { width: 19px; height: 19px; accent-color: var(--primary); }
.staff-schedule-permission span, .staff-schedule-permission small { display: block; }
.staff-schedule-permission small { margin-top: 2px; color: var(--muted); }
.calendar-read-only { margin-top: 7px; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.schedule-edit-denied { display: none !important; }
.participant-care-notes { display: grid; gap: 14px; margin-top: 8px; padding: 16px; border: 1px solid #d8e3d5; border-radius: 14px; background: #f7faf6; }
.participant-instructor-assignment { display: grid; gap: 6px; max-width: 340px; margin-top: 12px; color: var(--text); font-size: .8rem; font-weight: 700; }
.participant-instructor-assignment select { min-height: 42px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: white; color: var(--text); font: inherit; font-weight: 400; }
.participant-care-notes h4, .participant-care-notes h5 { margin: 0; }
.participant-care-notes h4 { color: var(--primary); font-size: 1rem; }
.participant-care-notes h5 { font-size: .9rem; }
.participant-goals-form, .participant-session-note-form { display: grid; gap: 11px; }
.participant-goals-form label, .participant-session-note-form label { display: grid; gap: 6px; color: var(--text); font-size: .8rem; font-weight: 700; }
.participant-goals-form textarea, .participant-session-note-form textarea, .participant-session-note-form input, .participant-session-note-form select { width: 100%; min-height: 44px; padding: 10px 11px; border: 1px solid #cbd5e1; border-radius: 10px; background: white; color: var(--text); font: inherit; font-weight: 400; }
.participant-goals-form textarea, .participant-session-note-form textarea { resize: vertical; }
.participant-goals-form > div { display: flex; align-items: center; gap: 12px; }
.participant-goals-form .primary-btn, .participant-session-note-form .primary-btn { justify-self: start; min-height: 40px; margin: 0; padding: 8px 14px; font-size: .82rem; }
.care-goals-summary { padding: 12px; border-radius: 10px; background: white; }
.care-goals-summary p { margin: 6px 0 0; color: var(--muted); line-height: 1.45; }
.participant-note-history { display: grid; gap: 9px; }
.participant-note-entry { padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: white; }
.participant-note-entry > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.participant-note-entry time { color: var(--muted); font-size: .78rem; }
.participant-note-entry p { margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.participant-note-entry b { color: var(--text); }
.session-note-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); text-align: center; }
.approval-status.pending { background: #fff4d6; color: #805b00; }
.directory-empty { padding: 44px 20px; border: 1px dashed var(--border); border-radius: 15px; color: var(--muted); text-align: center; }
.directory-empty strong { color: var(--text); }
.directory-empty p { margin: 7px 0 0; }
.participant-hero { margin-bottom: 24px; }
.participant-session-list { display: grid; gap: 12px; }
.participant-session-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--border); border-left: 5px solid var(--instructor-color, var(--primary)); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 20px rgba(20, 33, 61, .04); }
.participant-session-card h3, .participant-session-card p { margin: 3px 0; }
.participant-session-card small { display: block; margin-top: 6px; color: var(--muted); }
.participant-profile-card { max-width: 720px; margin: 0 auto; }
.participant-upload-grid .status-badge { justify-self: start; margin: 8px 0; }
.weekly-calendar-card { width: min(1080px, calc(100% - 48px)); margin: 0 auto 20px; padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 10px 24px rgba(20, 33, 61, .05); }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.calendar-toolbar h2, .calendar-toolbar p { margin: 0; }
.calendar-toolbar h2 { margin-top: 4px; }
.calendar-controls { display: flex; gap: 7px; }
.calendar-controls .text-btn { font-weight: 700; }
.weekly-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #f5f3ed; }
.calendar-day { min-width: 0; min-height: 250px; border-left: 1px solid var(--border); background: #fff; }
.calendar-day:first-child { border-left: 0; }
.calendar-day header { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 10px; border-bottom: 1px solid var(--border); color: var(--muted); }
.calendar-day header span { font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.calendar-day header strong { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; }
.calendar-day.today header { color: var(--primary); background: #eef5ed; }
.calendar-day.today header strong { background: var(--primary); color: white; }
.calendar-day-sessions { display: grid; align-content: start; gap: 7px; padding: 7px; }
.calendar-session { width: 100%; padding: 9px; border: 1px solid #d8e3d5; border-left: 5px solid var(--instructor-color, var(--primary)); border-radius: 9px; background: #f1f7f0; color: var(--text); text-align: left; cursor: pointer; overflow: hidden; }
.calendar-session time, .calendar-session strong, .calendar-session span { display: block; }
.calendar-session time { color: var(--accent); font-size: .67rem; font-weight: 700; }
.calendar-session strong { margin: 3px 0; font-size: .78rem; line-height: 1.25; }
.calendar-session span { color: var(--muted); font-size: .65rem; line-height: 1.35; }
.admin-calendar-session { cursor: default; }
.admin-calendar-volunteers { display: grid; gap: 4px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #d8e3d5; }
.portal-volunteer-button { display: grid; gap: 1px; width: 100%; padding: 6px 7px; border: 1px solid #bfd0c1; border-radius: 7px; background: white; color: var(--primary); font: inherit; text-align: left; cursor: pointer; }
.portal-volunteer-button span { color: var(--primary); font-size: .68rem; font-weight: 800; }
.portal-volunteer-button small { color: var(--muted); font-size: .58rem; }
.portal-volunteer-button:hover, .portal-volunteer-button:focus-visible { border-color: var(--primary); background: #eaf4eb; outline: none; }
.admin-calendar-edit { width: 100%; margin-top: 7px; padding: 6px; border: 0; border-radius: 7px; background: var(--primary); color: white; font-size: .65rem; font-weight: 800; cursor: pointer; }
.portal-contact-sheet { display: grid; gap: 20px; padding: 22px; }
.portal-contact-sheet h2, .portal-contact-sheet p { margin: 3px 0; }
.portal-contact-sheet .schedule-sheet-heading p:last-child { color: var(--muted); }
.portal-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-contact-actions a { display: grid; place-items: center; min-height: 54px; padding: 12px; border: 1px solid #b8cdbb; border-radius: 12px; background: white; color: var(--primary); font-weight: 800; text-decoration: none; }
.portal-contact-actions .contact-call { background: var(--primary); color: white; }
.admin-day-contact { width: 100%; margin-top: 6px; padding: 5px 4px; border: 1px solid #9fbea5; border-radius: 7px; background: white; color: var(--primary); font: inherit; font-size: .6rem; font-weight: 800; cursor: pointer; }
.admin-calendar-contact { width: 100%; margin-top: 5px; padding: 6px; border: 1px solid #b8cdbb; border-radius: 7px; background: white; color: var(--primary); font: inherit; font-size: .62rem; font-weight: 800; cursor: pointer; }
.admin-calendar-contact:hover, .admin-day-contact:hover { border-color: var(--primary); background: #edf5ed; }
.admin-calendar-participant { margin-top: 3px; color: var(--text) !important; font-size: .72rem; line-height: 1.25; }
.admin-calendar-participant b { color: var(--primary); }
.calendar-empty { display: block; padding: 10px; color: #aaa69c; text-align: center; }
.schedule-admin-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(380px, 1.2fr); gap: 20px; width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.schedule-admin-layout-single { grid-template-columns: 1fr; }
.quick-add-card { width: min(1080px, calc(100% - 48px)); margin: 0 auto 20px; border: 2px solid #bfd7c5; background: linear-gradient(135deg, #fbfefb, #f2f8f1); }
.quick-add-badge { padding: 7px 10px; border-radius: 999px; background: #dfeee1; color: #315f48; font-size: .72rem; font-weight: 800; }
.quick-add-defaults { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-add-preview { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.quick-add-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.quick-add-review-heading h3 { margin: 3px 0; }
.quick-add-review-list { display: grid; gap: 8px; }
.quick-add-review-row { display: grid; grid-template-columns: auto minmax(145px, .55fr) minmax(180px, 1fr) minmax(180px, .75fr); align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--border); border-left: 5px solid var(--instructor-color, var(--primary)); border-radius: 11px; background: white; }
.quick-add-review-row > input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--primary); }
.quick-add-review-row span, .quick-add-review-row small { display: block; }
.quick-add-review-row small { margin-top: 3px; color: var(--muted); }
.quick-add-instructor-field { display: grid; gap: 5px; color: var(--text); font-size: .75rem; font-weight: 700; }
.quick-add-instructor-field input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 9px; background: white; color: var(--text); font: inherit; font-weight: 400; }
.quick-add-warnings { display: grid; gap: 4px; margin-top: 13px; padding: 12px; border-radius: 10px; background: #fff4ea; color: #914d32; font-size: .8rem; }
.staffing-fields { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; }
.instructor-color-field > div { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.instructor-color-field input[type="color"] { width: 54px; height: 44px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: white; cursor: pointer; }
.instructor-color-field span { color: var(--muted); font-size: .8rem; }
.staffing-fields legend { padding: 0 7px; font-weight: 700; }
.staffing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.staffing-grid label { display: grid; gap: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.staffing-grid input { width: 100%; min-height: 44px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.form-actions { display: flex; align-items: center; gap: 10px; }
.form-actions .primary-btn { margin-top: 0; }
.admin-session-list { display: grid; gap: 12px; }
.admin-session-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--border); border-left: 5px solid var(--instructor-color, var(--primary)); border-radius: 15px; background: white; }
.admin-session-item h3, .admin-session-item p { margin: 3px 0; }
.staffing-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.staffing-summary span { padding: 5px 8px; border-radius: 999px; background: #eef4ed; color: var(--primary); font-size: .75rem; }
.session-admin-actions { display: grid; gap: 7px; flex: 0 0 auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 760px) {
  .hero-content,
  .schedule-layout {
    grid-template-columns: 1fr;
  }

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

  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .portal-content,
  .field-row,
  .upload-grid {
    grid-template-columns: 1fr;
  }

  .volunteer-summary { grid-template-columns: 1fr 1fr; }
  .available-session-card { grid-template-columns: 52px minmax(0, 1fr); }
  .available-session-card .session-signup-actions { grid-column: 1 / -1; width: 100%; }
  .dashboard-view, .portal-nav { padding-left: 16px; padding-right: 16px; }
  .verification-card { padding: 18px; }
  .verification-request { align-items: flex-start; flex-direction: column; }
  .admin-approval-layout { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .volunteer-directory { width: calc(100% - 32px); padding: 18px; }
  .directory-heading, .directory-name { align-items: flex-start; flex-direction: column; }
  .directory-heading { gap: 4px; }
  .directory-details { display: grid; gap: 6px; }
  .person-detail-grid { grid-template-columns: 1fr; }
  .person-detail-grid .detail-wide { grid-column: auto; }
  .schedule-admin-layout { grid-template-columns: 1fr; width: calc(100% - 32px); }
  .quick-add-card { width: calc(100% - 32px); }
  .quick-add-defaults { grid-template-columns: 1fr 1fr; }
  .weekly-calendar-card { width: calc(100% - 32px); padding: 16px; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .schedule-page-header { align-items: flex-start; }
  .schedule-legend { align-items: flex-start; flex-direction: column; }
  .calendar-controls { width: 100%; }
  #current-week, #standalone-current-week { flex: 1; }
  .weekly-calendar { grid-template-columns: 1fr; border-radius: 13px; }
  .calendar-day { min-height: 0; border-left: 0; border-top: 1px solid var(--border); }
  .calendar-day:first-child { border-top: 0; }
  .calendar-day header { justify-content: flex-start; }
  .calendar-day header span { min-width: 35px; }
  .calendar-day-sessions { padding: 9px; }
  .calendar-empty { padding: 2px 10px 8px; text-align: left; }
  .staffing-grid { grid-template-columns: 1fr; }
  .admin-session-item { align-items: flex-start; flex-direction: column; }
  .quick-add-defaults { grid-template-columns: 1fr; }
  .quick-add-review-heading { align-items: stretch; flex-direction: column; }
  .quick-add-review-row { grid-template-columns: auto 1fr; }
  .quick-add-review-row > span:nth-of-type(2), .quick-add-instructor-field { grid-column: 2; }
  .session-admin-actions { display: flex; width: 100%; }
  .my-schedule-card { grid-template-columns: 52px minmax(0, 1fr); }
  .my-schedule-card .cancel-signup-btn { grid-column: 1 / -1; width: 100%; }
  .approved-list-card { grid-column: auto; }
  .approval-item { align-items: stretch; flex-direction: column; }
  .approved-controls { grid-template-columns: 1fr; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .instructor-content { width: calc(100% - 32px); }
  .staff-content { width: calc(100% - 32px); }
  .staff-orientation-layout, .staff-message-layout { grid-template-columns: 1fr; }
  .staff-admin-area { width: calc(100% - 32px); }.staff-admin-heading { align-items: flex-start; flex-direction: column; }.staff-admin-layout { grid-template-columns: 1fr; }.staff-record-card { grid-template-columns: 1fr; }.staff-record-actions { flex-direction: row; flex-wrap: wrap; }.staff-contact-grid, .staff-document-upload { grid-template-columns: 1fr; }
  .instructor-welcome { grid-template-columns: 1fr 1fr; }
  .instructor-welcome > div:first-child { grid-column: 1 / -1; }
  .instructor-stat { min-width: 0; }
  .instructor-session-card { grid-template-columns: 1fr; }
  .quick-time-buttons { flex-wrap: wrap; }
  .quick-time-form { flex-wrap: wrap; }
  .quick-time-form label { flex: 1; min-width: 120px; }
  .quick-time-form .primary-btn { width: 100%; }
  .available-volunteer-card { grid-template-columns: auto 1fr; }
  .volunteer-contact-actions { grid-column: 1 / -1; }
  .volunteer-contact-actions a { flex: 1; text-align: center; }
  .instructor-simple-editor { position: static; padding: 16px; }
  .instructor-schedule-hero { align-items: flex-start; flex-direction: column; padding: 19px; }
  .instructor-calendar-toolbar { align-items: flex-start; }
  .instructor-agenda-session { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .agenda-quick-actions { grid-column: 1 / -1; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); }
  .agenda-duration-buttons { flex: 1; }
  .agenda-duration-buttons button { flex: 1; }
  .simple-duration-form { align-items: stretch; flex-direction: column; }
  .duration-buttons button { flex: 1; }

  .app-header,
  .portal-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-header h1 {
    font-size: 1.55rem;
  }

  .volunteer-card,
  .recent-card,
  .availability-card,
  .sessions-card,
  .message-card,
  .contact-card {
    padding: 18px;
    border-radius: 18px;
  }

  .section-heading {
    display: block;
  }

  .section-heading > p {
    margin-bottom: 0;
  }

  .profile-action {
    align-items: stretch;
    flex-direction: column;
  }

  .danger-btn,
  .pause-btn {
    width: 100%;
  }

  .schedule-head,
  .availability-row {
    grid-template-columns: 28px minmax(68px, 0.8fr) minmax(80px, 1fr) minmax(80px, 1fr);
    gap: 5px;
  }

  .availability-row {
    padding: 7px 5px;
  }

  .availability-row strong,
  .availability-row > input[type="time"] {
    font-size: 0.78rem;
  }
}