/* ------------------------------------------------------------------
 * shared.css
 * 保護者フォーム・管理画面 共通のデザイントークン。
 * 「学童らしい温かみのある配色」をCSS変数として一元管理する。
 * 色を変えたいときはここだけ修正すればよい。
 * ------------------------------------------------------------------ */
:root {
  --madoi-cream: #fdf6ec;
  --madoi-cream-dark: #f7ead3;
  --madoi-orange: #f4a261;
  --madoi-orange-dark: #e2793c;
  --madoi-brown: #6f4e37;
  --madoi-brown-light: #8d6748;
  --madoi-green: #6fbf87;
  --madoi-green-bg: #e6f6ea;
  --madoi-yellow: #f0b429;
  --madoi-yellow-bg: #fff6df;
  --madoi-red: #e76161;
  --madoi-red-bg: #fdecec;
  --madoi-gray-bg: #eef0f1;
  --madoi-text: #4a3b2f;
  --madoi-radius: 18px;
  --madoi-radius-sm: 10px;
  --madoi-shadow: 0 4px 14px rgba(111, 78, 55, 0.12);
}

html, body {
  background: var(--madoi-cream);
  color: var(--madoi-text);
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.madoi-card {
  background: #fff;
  border-radius: var(--madoi-radius);
  box-shadow: var(--madoi-shadow);
  border: 1px solid var(--madoi-cream-dark);
}

.btn-madoi-primary {
  background: var(--madoi-orange);
  border: none;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.85rem 1.4rem;
  font-size: 1.05rem;
  box-shadow: 0 4px 10px rgba(244, 162, 97, 0.4);
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn-madoi-primary:hover, .btn-madoi-primary:focus { background: var(--madoi-orange-dark); color: #fff; }
.btn-madoi-primary:active { transform: scale(0.98); }
.btn-madoi-primary:disabled { opacity: 0.5; }

.btn-madoi-secondary {
  background: #fff;
  border: 2px solid var(--madoi-orange);
  color: var(--madoi-orange-dark);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.7rem 1.2rem;
}

.madoi-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 700;
}
.madoi-badge-red { background: var(--madoi-red-bg); color: var(--madoi-red); }
.madoi-badge-yellow { background: var(--madoi-yellow-bg); color: #a06d00; }
.madoi-badge-green { background: var(--madoi-green-bg); color: #2f7a49; }
.madoi-badge-gray { background: var(--madoi-gray-bg); color: #666; }

.madoi-status-row-red { border-left: 6px solid var(--madoi-red); }
.madoi-status-row-yellow { border-left: 6px solid var(--madoi-yellow); }
.madoi-status-row-green { border-left: 6px solid var(--madoi-green); }
.madoi-status-row-gray { border-left: 6px solid #b7b7b7; }

.madoi-header {
  background: linear-gradient(135deg, var(--madoi-orange) 0%, var(--madoi-orange-dark) 100%);
  color: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: var(--madoi-shadow);
}

input.form-control, select.form-select, textarea.form-control {
  border-radius: var(--madoi-radius-sm);
  border: 1.5px solid var(--madoi-cream-dark);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
}
input.form-control:focus, select.form-select:focus, textarea.form-control:focus {
  border-color: var(--madoi-orange);
  box-shadow: 0 0 0 0.2rem rgba(244, 162, 97, 0.25);
}

label.form-label { font-weight: 700; color: var(--madoi-brown); }

@media (max-width: 480px) {
  .btn-madoi-primary, .btn-madoi-secondary { width: 100%; }
}