:root {
  --color-primary: #0b6e99;
  --color-primary-dark: #085273;
  --color-bg: #f5f7f9;
  --color-card: #ffffff;
  --color-border: #dde3e8;
  --color-text: #223;
  --color-muted: #667;
  --color-danger: #c0392b;
  --color-warn-bg: #fff6d8;
  --color-warn-border: #e8d27a;
  --color-ok-bg: #e4f7ec;
  --color-ok-border: #86c9a3;
  --color-gray-bg: #eef0f2;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}

header.app-header {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

header.app-header h1 {
  font-size: 1.1rem;
  margin: 0;
}

header.app-header nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

header.app-header nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  opacity: 0.9;
}
header.app-header nav a:hover { opacity: 1; text-decoration: underline; }

main.container {
  max-width: 960px;
  margin: 24px auto;
  padding: 0 16px 60px;
}

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.1rem;
  border-left: 4px solid var(--color-primary);
  padding-left: 10px;
}

.login-wrap {
  max-width: 380px;
  margin: 10vh auto;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 4px;
  margin-top: 12px;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.95rem;
  background: #fff;
}

button, .btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--color-primary-dark); }
button.secondary, .btn.secondary { background: #6b7785; }
button.danger, .btn.danger { background: var(--color-danger); }
button:disabled { background: #aab; cursor: not-allowed; }

.btn-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.btn-row select, .btn-row input[type="date"], .btn-row input[type="text"] { width: auto; flex: 0 0 auto; }
.date-range-group { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.month-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 16px;
}
.month-nav .month-label { font-weight: 700; font-size: 1.05rem; min-width: 7em; text-align: center; }

.cal-wrap { border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
table.cal { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.85rem; }
table.cal th, table.cal td { border: 1px solid var(--color-border); vertical-align: top; }
table.cal th.week-col, table.cal td.week-col {
  width: 4.5em; background: #f0f3f5; font-weight: 600; text-align: center; vertical-align: middle;
}
table.cal th { background: #f0f3f5; padding: 6px 4px; text-align: center; }
table.cal th.weekend { background: #fbeaea; color: var(--color-danger); }
table.cal td.day-cell { padding: 4px; height: 1px; } /* height:1px lets child fill via 100% */
table.cal td.day-cell.weekend { background: #fbe4e4; }
table.cal td.day-cell.weekend .cal-daynum { color: var(--color-danger); }
table.cal td.day-cell.other-month { background: #fafafa; opacity: 0.55; }

.cal-day { display: flex; flex-direction: column; height: 100%; min-height: 90px; }
.cal-daynum { font-weight: 700; font-size: 0.85rem; margin-bottom: 4px; }
.cal-slots { display: flex; flex-direction: column; gap: 2px; }
.cal-slots .chip {
  display: block; text-decoration: none; border-radius: 4px; padding: 2px 4px;
  font-size: 0.78rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-slots .chip-ok { background: var(--color-primary); color: #fff; font-weight: 600; }
.cal-slots .chip-ok:hover { background: var(--color-primary-dark); }
.cal-slots .chip-ng { background: var(--color-gray-bg); color: #99a; }
.cal-slots .chip-none { color: #ccc; font-size: 0.78rem; }

/* スタッフ枠管理カレンダー用: すべてクリック可能（クローズ/再オープン切替） */
.cal-slots .chip-clickable { cursor: pointer; border: none; width: 100%; text-align: left; font: inherit; }
.cal-slots .chip-open { background: var(--color-primary); color: #fff; font-weight: 600; }
.cal-slots .chip-open:hover { background: var(--color-primary-dark); }
.cal-slots .chip-full { background: #6b7785; color: #fff; }
.cal-slots .chip-full:hover { background: #57616d; }
.cal-slots .chip-closed { background: var(--color-gray-bg); color: #99a; }
.cal-slots .chip-closed:hover { background: #dfe3e6; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
th { background: #f0f3f5; font-weight: 600; }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.slot-btn {
  background: #fff;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 10px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 0.15s, color 0.15s;
}
.slot-btn:hover, .slot-btn:focus-visible {
  background: var(--color-primary);
  color: #fff;
}
.slot-btn:hover .muted, .slot-btn:focus-visible .muted { color: #fff; }
.slot-btn.closed, .slot-btn.booked {
  background: var(--color-gray-bg);
  border-color: var(--color-border);
  color: #99a;
  cursor: not-allowed;
}
.slot-btn .date { font-weight: 600; display: block; }

.row-awaiting_fax { background: var(--color-gray-bg); }
.row-fax_received { background: var(--color-warn-bg); }
.row-registered { background: var(--color-ok-bg); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
}
.badge.awaiting_fax { background: var(--color-gray-bg); color: #556; }
.badge.fax_received { background: var(--color-warn-bg); color: #7a5c00; border: 1px solid var(--color-warn-border); }
.badge.registered { background: var(--color-ok-bg); color: #1c6b3f; border: 1px solid var(--color-ok-border); }
.badge.cancelled { background: #f5dede; color: var(--color-danger); }

.error { color: var(--color-danger); margin-top: 10px; font-size: 0.9rem; }
.muted { color: var(--color-muted); font-size: 0.85rem; }
.notice { background: var(--color-warn-bg); border: 1px solid var(--color-warn-border); border-radius: 6px; padding: 12px; margin-bottom: 16px; font-size: 0.9rem; }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-box {
  flex: 1;
  min-width: 140px;
  background: #f0f6f9;
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-box .num { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.stat-box .label { font-size: 0.85rem; color: var(--color-muted); }

@media (max-width: 600px) {
  main.container { margin: 8px auto; }
  .card { padding: 14px; }
}