/* ran-operations Phase 4A — mobile-first business UI.
   Bright, high-contrast, card-based. No external dependencies. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1a1d21;
  --text-muted: #5b6470;
  --border: #e3e6ea;
  --accent: #b0453a;
  --accent-strong: #8f342b;
  --accent-soft: #faf0ee;
  --shadow: 0 1px 2px rgba(20, 24, 30, 0.06), 0 1px 6px rgba(20, 24, 30, 0.05);
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  /* Leave room for the fixed bottom nav + iPhone safe area. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* Base */
.app-main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 8px;
}

/* Wide layout (schedule board only, Phase 6F) */
.app-main--wide {
  max-width: min(1400px, 100%);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-header__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header__brand {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.header-logout-form {
  margin: 0;
}

.header-logout {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.header-logout:active {
  background: var(--bg);
  color: var(--accent-strong);
}

/* Page head + date navigation */
.page-head {
  margin-bottom: 14px;
}

.page-head__date {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}

.date-nav {
  display: flex;
  gap: 8px;
}

.date-nav__link {
  flex: 1;
  text-align: center;
  display: block;
  padding: 10px 8px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.date-nav__link:active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.date-nav__today {
  flex: 1;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 10px 8px;
  min-height: 40px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* KPI cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 12px;
}

.kpi-card__label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.kpi-card__value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  margin-bottom: 16px;
}

.empty-state p {
  margin: 0;
  font-weight: 600;
}

.empty-state__hint {
  margin-top: 6px;
  font-weight: 400;
  color: var(--text-muted);
  font-size: 14px;
}

/* Therapist summaries */
.section-title {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 10px;
}

.therapist-list {
  margin-bottom: 16px;
}

.therapist-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.therapist-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.therapist-card__name {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.therapist-card__count {
  font-size: 13px;
  color: var(--text-muted);
}

.therapist-card__pay {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.therapist-card__pay-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.therapist-card__detail {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.therapist-card__sep {
  margin: 0 4px;
}

/* Therapist summary cards are clickable links to the payroll statement. */
a.therapist-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.therapist-card:active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.therapist-card__cta {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-strong);
  text-align: right;
}

/* Payroll statement (Phase 4D) */
.payroll-therapist {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
}

.payroll-therapist__name {
  font-size: 24px;
  font-weight: 800;
}

.payroll-therapist__count {
  font-size: 13px;
  color: var(--text-muted);
}

.payroll-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  margin-bottom: 16px;
  text-align: center;
}

.payroll-hero__label {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.payroll-hero__value {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.payroll-line {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}

.payroll-line__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.payroll-line__time {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.payroll-line__meta {
  font-size: 13px;
  color: var(--text-muted);
}

.payroll-line__body {
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  font-size: 14px;
  align-items: baseline;
}

.payroll-line__label {
  color: var(--text-muted);
  font-size: 12px;
}

.payroll-line__body dd {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.payroll-line__money {
  margin: 10px 0 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-line__money-label {
  font-size: 12px;
  color: var(--text-muted);
}

.payroll-line__money-value {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.payroll-line__money-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.payroll-line__meta .sep,
.payroll-line__money-sub .sep {
  margin: 0 4px;
  color: var(--border);
}

.payroll-line__notes {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.payroll-line__notes-label {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Monthly summary & monthly payroll (Phase 5G) */
.monthly-section {
  margin-bottom: 16px;
}

.day-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  margin-bottom: 10px;
}

a.day-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.day-card:active {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.day-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.day-card__date {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.day-card__count {
  font-size: 13px;
  color: var(--text-muted);
}

.day-card__money {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.day-card__money-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 2px;
}

.monthly-day-head {
  margin: 4px 2px 8px;
}

.day-card__date-link {
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}

.payroll-line__options span {
  display: block;
}

/* Treatment cards (Phase 4B) */
.treatment-list {
  margin-bottom: 16px;
}

.treatment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 14px 12px;
  margin-bottom: 10px;
}

.treatment-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.treatment-card__time {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.treatment-card__meta {
  font-size: 13px;
  color: var(--text-muted);
}

.treatment-card__meta .sep,
.treatment-card__money-sub .sep {
  margin: 0 4px;
  color: var(--border);
}

.treatment-card__body {
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  font-size: 14px;
  align-items: baseline;
}

.treatment-card__label {
  color: var(--text-muted);
  font-size: 12px;
}

.treatment-card__body dd {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.treatment-card__money {
  margin: 10px 0 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.treatment-card__money-label {
  font-size: 12px;
  color: var(--text-muted);
}

.treatment-card__money-value {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.treatment-card__money-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.treatment-card__phone {
  margin: 8px 0 0;
  font-size: 14px;
}

.treatment-card__phone-link {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.treatment-card__phone-link:active {
  background: var(--accent);
  color: #fff;
}

.treatment-card__notes {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.treatment-card__notes-label {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.treatment-card__foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.treatment-card__edit {
  display: inline-block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.treatment-card__edit:active {
  background: var(--accent);
  color: #fff;
}

/* Delete action: visually distinct from edit (danger, not color alone). */
.treatment-card__delete {
  display: inline-block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border: 1px solid #e3b6b0;
  border-radius: 8px;
  background: #fff5f4;
  color: #a02c20;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.treatment-card__delete::before {
  content: "🗑 ";
  font-size: 13px;
}

.treatment-card__delete:active {
  background: #a02c20;
  border-color: #a02c20;
  color: #fff;
}

/* Actions */
.actions {
  margin: 6px 0 18px;
}

.daily-actions {
  display: grid;
  gap: 8px;
}

.daily-actions .btn-primary {
  display: block;
  text-align: center;
  text-decoration: none;
}

.customer-head-actions {
  display: flex;
}

.customer-create-action {
  display: inline-block;
  width: auto;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
}

.btn-primary:disabled {
  background: #cdd2d8;
  color: #7b828c;
  cursor: not-allowed;
}

/* Danger button (delete confirmation) — destructive action. */
.btn-danger {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: var(--radius);
  background: #a02c20;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
}

.btn-danger:active {
  background: #7f2218;
}

/* Safe secondary action (e.g. "日報へ戻る" on the delete confirmation). */
.btn-secondary {
  display: block;
  width: 100%;
  min-height: 48px;
  line-height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 16px;
}

.btn-secondary:active {
  background: var(--bg);
}

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav__link {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 12px 3px;
  min-height: 48px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.bottom-nav__label {
  white-space: nowrap;
}

.bottom-nav__link.is-active {
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: inset 0 3px 0 var(--accent);
}

.bottom-nav__link.is-disabled {
  color: #a4abb4;
  cursor: not-allowed;
}

/* Treatment create form (Phase 4C) */
.treatment-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}

.field--group {
  align-items: flex-start;
}

.field__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.field__hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.field__input--textarea {
  min-height: 84px;
  resize: vertical;
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row .field {
  flex: 1;
}

/* Radio cards for designation */
.radio-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 16px;
}

.radio-card input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--border);
  border-radius: 50%;
  margin: 0;
}

.radio-card input[type="radio"]:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 45%, transparent 50%);
}

.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Form error banner */
.form-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #d98680;
  border-radius: var(--radius);
  background: #fdf0ee;
  color: #8f342b;
}

.form-error__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.form-error__item {
  font-size: 15px;
  font-weight: 600;
  padding-left: 4px;
}

.form-error__item::before {
  content: "• ";
}

/* Form actions */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.form-cancel {
  display: block;
  text-align: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
}

.form-cancel:active {
  background: var(--accent-soft);
}

/* Delete confirmation page */
.confirm-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #e3b6b0;
  border-radius: var(--radius);
  background: #fff5f4;
  color: #a02c20;
  font-size: 15px;
  font-weight: 600;
}

.confirm-warning__icon {
  margin-right: 6px;
}

.confirm-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.confirm-summary .section-title {
  margin-top: 0;
}

.confirm-summary__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
}

.confirm-summary__label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.confirm-summary__value {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 18px;
}

/* Phase 5C — master management UI */
.masters-hub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 6px 0 18px;
}

.masters-hub__card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
}

.masters-hub__card:active {
  background: var(--accent-soft);
}

.masters-hub__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.masters-hub__name {
  font-size: 16px;
  font-weight: 700;
}

.masters-hub__count {
  color: var(--text-muted);
  font-size: 14px;
}

.masters-hub__cta {
  margin: 6px 0 0;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 600;
}

.master-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.master-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.master-row--inactive {
  opacity: 0.72;
}

.master-row__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.master-row__name {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Status is never conveyed by colour alone — badge text 有効/無効 carries it. */
.status-badge--active {
  border: 1px solid #9fc99a;
  background: #f0f8ee;
  color: #2f5c2b;
}

.status-badge--inactive {
  border: 1px solid #c9ccd1;
  background: #f0f1f3;
  color: #5b6470;
}

.master-row__actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.master-row__actions form {
  margin: 0;
}

.master-row__edit {
  display: inline-block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.master-row__edit:active {
  background: var(--accent);
  color: #fff;
}

.master-row__toggle {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #e3b6b0;
  background: #fff5f4;
  color: #a02c20;
  font-size: 14px;
  font-weight: 600;
}

.master-row__toggle--activate {
  border-color: #9fc99a;
  background: #f0f8ee;
  color: #2f5c2b;
}

/* Phase 5F — option display */
.treatment-card__options {
  margin: 0;
}

.treatment-card__option {
  display: block;
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.option-price {
  color: var(--text-muted);
  font-weight: 400;
}

.master-row__price {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

/* Phase 5D — login UI */
.login-wrap {
  max-width: 420px;
  margin: 24px auto 0;
}

.login-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Success / completion banners (daily report): created, updated, deleted. */
.created-banner,
.deleted-banner {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #9fc99a;
  border-radius: var(--radius);
  background: #f0f8ee;
  color: #2f5c2b;
  font-size: 15px;
  font-weight: 600;
}

/* Desktop: keep centered, a touch wider. */
@media (min-width: 640px) {
  .app-main {
    max-width: 760px;
  }
  .app-main.app-main--wide {
    max-width: min(1760px, 100%);
  }
  .app-header__inner {
    max-width: 760px;
  }
  .kpi-card__value {
    font-size: 24px;
  }
}

.off-list {
  margin-bottom: 16px;
}

.off-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.off-card__name {
  font-size: 15px;
  font-weight: 600;
}

.off-card__state {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.off-card__action {
  width: auto;
  min-width: 96px;
  min-height: 40px;
  font-size: 13px;
  padding: 8px 10px;
}

.field__static-value {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 15px;
  font-weight: 600;
}

.form-cancel--danger {
  color: #a02c20;
}

/* ==========================================================================
   Schedule board (Phase 6F) — horizontal timeline.
   All classes are sched-* scoped: nothing here touches other pages.
   Vertical axis = therapists (lanes), horizontal axis = time (30-min grid).
   Positioning is percentage-based so header and lanes always align.
   ========================================================================== */
.sched-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.sched-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.date-nav--compact {
  margin-left: auto;
}

.date-nav--compact .date-nav__link,
.date-nav--compact .date-nav__today {
  min-width: 84px;
  padding: 8px 10px;
  font-size: 14px;
}

.sched-head-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.sched-btn {
  width: auto;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}

/* Board container: internal horizontal scroll only; sticky info column. */
.sched-board {
  margin-bottom: 16px;
}

.sched-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sched-inner {
  --sched-slot-width: 56px;
  --sched-slot-count: 24;
  min-width: max(100%, calc(190px + var(--sched-slot-width) * var(--sched-slot-count)));
}

.sched-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.sched-row:last-child {
  border-bottom: none;
}

/* Sticky therapist / corner column */
.sched-info {
  flex: 0 0 180px;
  min-width: 180px;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}

.sched-info--sticky {
  position: sticky;
  left: 0;
  z-index: 5;
}

.sched-info--corner .sched-corner-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.sched-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.sched-room {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.sched-shift {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sched-edit {
  display: inline-block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--accent-strong);
  text-decoration: underline;
}

/* Tracks: shared geometry for header and lanes */
.sched-track {
  position: relative;
  flex: 1 1 auto;
  min-height: 72px;
}

.sched-track--header {
  min-height: 34px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Header segments */
.sched-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--border);
  overflow: hidden;
}

.sched-seg--hour {
  border-left: 1px solid var(--border);
}

.sched-seg:first-child {
  border-left: none;
}

.sched-seg__label {
  display: block;
  padding: 8px 0 0 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sched-seg--hour .sched-seg__label {
  color: var(--text);
  font-weight: 600;
}

.sched-nextday {
  font-style: normal;
  color: var(--accent-strong);
  font-weight: 700;
  margin-right: 2px;
}

/* Off-duty regions: one visual region per run, not clickable. */
.sched-offduty {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.04) 6px,
    rgba(0, 0, 0, 0.04) 9px
  );
  border-radius: 6px;
  overflow: hidden;
}

.sched-offduty__label {
  display: inline-block;
  margin: 6px 0 0 8px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Empty slots: one clickable region per 30-min grid cell. */
.sched-slot {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: inset 1px 0 0 var(--surface);
  cursor: pointer;
}

.sched-slot:hover {
  background: var(--accent-soft);
  outline: 1px solid var(--accent);
}

/* Reservation blocks: proportional to actual minutes (no rounding). */
.sched-resblock {
  position: absolute;
  top: 5px;
  bottom: 5px;
  z-index: 3;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.sched-resblock:hover {
  outline: 2px solid var(--accent-strong);
}

.sched-resblock__time {
  display: block;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
}

.sched-resblock__meta {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Current-time indicator (today only) */
.sched-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d64541;
  z-index: 4;
}

/* Legend under the board */
.sched-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.sched-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sched-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  vertical-align: middle;
}

.sched-dot--empty {
  background: var(--bg);
  border: 1px dashed var(--border);
}

.sched-dot--reserved {
  background: #fff;
  border: 1px solid var(--accent);
  border-left-width: 4px;
}

.sched-dot--off {
  border: 1px solid var(--border);
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0.05) 5px
  );
}

.sched-legend__daily {
  margin-left: auto;
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
}

/* Mobile: keep lane height compact but tappable; scroll inside board. */
@media (max-width: 640px) {
  .bottom-nav__link {
    font-size: 13px;
  }

  .customer-create-action {
    display: block;
    width: 100%;
  }

  .sched-page-head > div:first-child,
  .sched-page-head .date-nav--compact,
  .sched-head-actions {
    width: 100%;
  }

  .sched-page-head .date-nav--compact {
    margin-left: 0;
  }

  .sched-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-btn {
    width: 100%;
  }

  .sched-info {
    flex-basis: 132px;
    min-width: 132px;
    padding: 6px 8px;
  }

  .sched-inner {
    --sched-slot-width: 72px;
    min-width: max(100%, calc(132px + var(--sched-slot-width) * var(--sched-slot-count)));
  }

  .sched-track {
    min-height: 64px;
  }

  .sched-name {
    font-size: 13px;
  }

  .sched-room,
  .sched-shift {
    font-size: 10px;
  }

  .sched-edit {
    font-size: 10px;
  }

  .sched-resblock__time {
    font-size: 11px;
  }

  .sched-resblock__meta {
    display: none;
  }
}

/* Completed reservation blocks + status badges (Phase 6G) */
.sched-resblock--done {
  border-color: var(--text-muted);
  border-left-color: var(--text-muted);
  background: var(--bg);
  opacity: 0.85;
}

.sched-resblock--done:hover {
  outline-color: var(--text-muted);
}

.sched-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.sched-badge--completed {
  color: var(--accent-strong);
  border: 1px solid var(--accent);
}

.sched-badge--cancelled {
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Settlement statement (Phase 6H) — scoped stl-* classes */
.stl-section {
  margin-bottom: 18px;
}

.stl-line-money {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.stl-paybadge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}

.stl-paybadge--card {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.stl-rows {
  margin: 0 0 12px;
}

.stl-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  border-bottom: 1px dashed var(--border);
}

.stl-row dt {
  font-size: 14px;
  color: var(--text-muted);
}

.stl-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stl-row--total dt {
  color: var(--text);
  font-weight: 700;
}

.stl-row--total dd {
  font-size: 18px;
  font-weight: 800;
}

.stl-hero .payroll-hero__value {
  font-size: 28px;
}

.stl-direction {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
}

.stl-direction--to-shop {
  color: var(--accent-strong);
}

.stl-direction--to-therapist {
  color: #1f7a4d;
}

.stl-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.stl-action-btn {
  min-height: 48px;
}

.stl-transport-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.stl-transport-input {
  width: 120px;
}

.stl-btn {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}

.stl-statuschip {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

.stl-statuschip--settled {
  color: var(--accent-strong);
  border-color: var(--accent);
}

.stl-history-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Daily reservation section (Phase 6I) — scoped daily-res-* classes */
.daily-reservations {
  margin-bottom: 16px;
}

.daily-reservations__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.daily-reservations__board-link {
  font-size: 12px;
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
}

.daily-res-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.daily-res-card--done {
  opacity: 0.85;
}

/* Customer history visit note (Phase 8H.1): secondary hierarchy, wraps
   safely on mobile, preserves newlines, never truncates to one line. */
.visit-note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.daily-res-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.daily-res-card__time {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stl-badge--reserved {
  color: var(--accent-strong);
  border: 1px solid var(--accent);
}

.stl-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}

.daily-res-card__meta,
.daily-res-card__menu {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.daily-res-card__actions {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}

.daily-res-action {
  font-size: 13px;
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
}

.daily-res-action--primary {
  text-decoration: underline;
}

.daily-res-action--danger {
  color: var(--danger, #b3261e);
}

.daily-res-empty {
  margin: 0;
  padding: 8px 2px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Settlement share image (Phase 8D) — scoped share-* classes */
.share-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}

.share-controls .field__hint {
  flex-basis: 100%;
}

.share-hidden {
  display: none;
}

.share-result {
  margin: 12px 0;
}

.share-preview-img {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--border);
  background: #fff;
}

.share-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  max-width: 480px;
}

.share-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.share-card__shop {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-strong);
}

.share-card__title {
  font-size: 15px;
  font-weight: 700;
}

.share-card__who {
  font-size: 13px;
  color: var(--text-muted);
}

.share-card__lines {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-card__line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
}

.share-line-time {
  font-weight: 700;
  font-size: 14px;
}

.share-line-money {
  font-size: 13px;
  color: var(--text-muted);
}

.share-card__empty {
  color: var(--text-muted);
  font-size: 13px;
}

.share-card__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.share-note {
  font-size: 13px;
  font-weight: 700;
}

.share-card__final {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-final-label {
  font-size: 12px;
  color: var(--text-muted);
}

.share-final-direction {
  font-size: 17px;
  font-weight: 700;
}

.share-final-amount {
  font-size: 30px;
  font-weight: 700;
}