/* =========================================================================
   R — ダークテーマ共通スタイル
   黒背景 + 赤アクセント (#E24B4A) + 白文字
   フォーム系画面 (login / register / profile / dashboard) で共通利用
   ========================================================================= */

:root {
  --r-bg: #000000;
  --r-surface: #111111;
  --r-surface-2: #161616;
  --r-border: #222222;
  --r-border-2: #2a2a2a;
  --r-text: #ffffff;
  --r-muted: #b0b0b0;
  --r-muted-2: #9a9a9a;
  --r-accent: #E24B4A;
  --r-accent-hover: #b73a39;
  --r-input-bg: #1a1a1a;
  --r-input-border: #333333;
}

body { background: var(--r-bg); color: var(--r-text); }

/* ---- App bar ---- */
.appbar {
  background: var(--r-bg);
  border-bottom: 1px solid var(--r-border);
}
.appbar .brand {
  color: var(--r-accent);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* ---- Card ---- */
.card {
  background: var(--r-surface);
  border-color: var(--r-border);
  color: var(--r-text);
}
.card .brand {
  color: var(--r-accent);
  font-weight: 800;
}
.card .company {
  color: var(--r-muted);
}
.muted { color: var(--r-muted); }
.info-list dt { color: var(--r-muted); }

/* ---- Form fields ---- */
form label > span {
  color: #d0d0d0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--r-input-border);
  border-radius: 8px;
  background: var(--r-input-bg);
  color: var(--r-text);
  font-family: inherit;
  font-size: 1rem;
}
textarea {
  min-height: 84px;
  resize: vertical;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--r-accent);
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.25);
}
::placeholder { color: #6a6a6a; }

/* ---- Buttons ---- */
.btn-primary {
  background: var(--r-accent);
  color: var(--r-text);
  border-color: transparent;
}
.btn-primary:hover { background: var(--r-accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--r-text);
  border-color: #444;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); }

.btn-ghost {
  background: transparent;
  color: var(--r-text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ---- Alerts ---- */
.alert-success { background: #15351a; color: #b3f0c0; }
.alert-error   { background: #3a1414; color: #f5b6b6; }
.alert-info    { background: #1a2a3a; color: #b3d1f0; }
.alert a { color: inherit; text-decoration: underline; }

/* ---- Anchors ---- */
a { color: var(--r-accent); }
a:hover { color: var(--r-accent-hover); }

/* ---- Section helpers ---- */
.section-title {
  margin: 24px 0 8px;
  font-size: 1.05rem;
  color: var(--r-text);
}
.field-help {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--r-muted-2);
}
.required {
  color: var(--r-accent);
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 6px;
}

/* ---- Emergency contact row (profile.php) ---- */
.contact-row {
  border: 1px solid var(--r-border-2);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
  background: var(--r-surface-2);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 520px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid .full { grid-column: 1 / -1; }
}
.contact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.9rem;
  color: var(--r-muted);
}
.btn-remove {
  background: transparent;
  color: var(--r-accent);
  border: 1px solid var(--r-accent);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}
.btn-remove:hover { background: rgba(226, 75, 74, 0.12); }
.btn-add {
  margin-top: 12px;
  background: transparent;
  color: var(--r-text);
  border: 1px dashed #555;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}
.btn-add:hover {
  border-color: var(--r-accent);
  color: var(--r-accent);
}