/* 楓の管理画面。予約表は横に時間が流れる */
:root {
  --paper: #f2f2f0;
  --card: #fbfbfa;
  --ink: #18191b;
  --ink-soft: #5a5d62;
  --ink-on: #f4f5f7;
  --line: #d8d8d3;
  --indigo: #2b3a67;
  --indigo-soft: #e3e6ef;
  --res-line: #b9c1d8;
  --seated-bg: #e3efe8;
  --seated-line: #b8d4c3;
  --done-bg: #ecedeb;
  --off: #e8e8e5;
  --ok: #2f6b4f;
  --ok-bg: #e3efe8;
  --warn: #a8262f;
  --warn-bg: #f8e4e6;
  --muted: #9a9d9f;
  --bar: #18191b;
  --bar-ink: #eceded;
  --bar-tag: #e7b23a;
  --check-line: #a9abae;
  --check-on: var(--indigo);
  --check-ink: var(--ink-on);
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Zen Kaku Gothic New", "Hiragino Sans", Meiryo, sans-serif; font-size: 15px; line-height: 1.6; }
a { color: var(--indigo); }
input, select, textarea, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.demo-bar { background: var(--bar); color: var(--bar-ink); font-size: 13px; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; }
.demo-bar p { margin: 0; }
.demo-bar b { background: var(--bar-tag); color: var(--bar); border-radius: 4px; padding: 0 6px; margin-right: 8px; font-size: 12px; }
.demo-bar nav { display: flex; gap: 16px; flex-wrap: wrap; }
.demo-bar a { color: var(--bar-ink); }
.demo-bar .demo-bar__lang { border: 1px solid currentColor; border-radius: 4px; padding: 0 8px; text-decoration: none; }

.a-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 10px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.a-brand { font-weight: 700; }
.a-head nav { display: flex; gap: 4px; flex-wrap: wrap; }
.a-head nav a { padding: 6px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.a-head nav a[aria-current="page"] { background: var(--indigo-soft); color: var(--indigo); font-weight: 700; }
.a-logout { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.a-main { padding: 20px 20px 64px; max-width: 1400px; margin: 0 auto; }
.a-h1 { font-size: 22px; margin: 0 0 14px; }
.a-h2 { font-size: 17px; margin: 28px 0 10px; }
.a-card .a-h2 { margin-top: 0; }
.a-note { color: var(--ink-soft); font-size: 13px; }
.a-strong { font-weight: 700; }
.a-flash { background: var(--ok-bg); color: var(--ok); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.a-error { background: var(--warn-bg); color: var(--warn); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.a-btn { display: inline-block; background: var(--indigo); color: var(--ink-on); border: 1px solid var(--indigo); border-radius: 8px; padding: 8px 16px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.a-btn--ghost { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 400; }
.a-link { background: none; border: 0; padding: 0; color: var(--warn); text-decoration: underline; cursor: pointer; }
.a-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.a-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.a-card > summary { cursor: pointer; font-weight: 700; }
.a-card[open] > summary { margin-bottom: 12px; }
.a-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .a-cols { grid-template-columns: minmax(0, 1fr); } }
.a-dl { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.a-dl dt { color: var(--ink-soft); font-size: 13px; }
.a-dl dd { margin: 0; }
.a-form { display: grid; gap: 12px; }
.a-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.a-form input:not([type="radio"]):not([type="checkbox"]), .a-form select, .a-form textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-weight: 400; width: 100%; }
.a-form > .a-btn { justify-self: start; }
.a-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
@media (max-width: 760px) { .a-row3 { grid-template-columns: minmax(0, 1fr); } }
.a-check { display: flex !important; flex-direction: row; gap: 6px; align-items: center; font-weight: 400 !important; }
.a-radios { border: 0; padding: 0; margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.a-radios legend { font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 4px; width: 100%; }
.a-radios label { display: flex; flex-direction: row; gap: 6px; align-items: center; font-weight: 400; }
.a-times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.a-times > span { font-size: 13px; color: var(--ink-soft); width: 5em; }
.a-time { position: relative; display: block !important; }
.a-time input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.a-time span { display: block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.a-time input:checked + span { background: var(--indigo); color: var(--ink-on); border-color: var(--indigo); }
.a-time input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }
.a-price input { width: 90px !important; display: inline-block; }

.a-daybar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.a-daybar input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.a-daybar .a-note { margin: 0 auto 0 0; }
.a-tl-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.a-tl { display: grid; min-width: 1100px; }
.a-tl__corner { grid-row: 1; grid-column: 1; border-bottom: 1px solid var(--line); }
.a-tl__hour { grid-row: 1; font-size: 12px; color: var(--ink-soft); padding: 6px 4px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.a-tl__table { grid-column: 1; display: grid; align-content: center; padding: 0 10px; border-bottom: 1px solid var(--line); line-height: 1.3; position: sticky; left: 0; background: var(--card); z-index: 2; }
.a-tl__table small { color: var(--ink-soft); font-size: 11px; }
.a-tl__cell { border-bottom: 1px solid var(--line); }
.a-tl__cell.is-hour { border-left: 1px solid var(--line); }
.a-tl__cell.is-off { background: var(--off); }
.a-res { z-index: 1; margin: 4px 1px; border-radius: 6px; padding: 3px 8px; background: var(--indigo-soft); border: 1px solid var(--res-line); color: var(--ink); text-decoration: none; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; justify-content: center; }
.a-res b { font-variant-numeric: tabular-nums; }
.a-res em { font-style: normal; font-size: 10px; background: var(--card); border-radius: 4px; padding: 0 4px; margin-left: 4px; color: var(--indigo); }
.a-res.is-seated { background: var(--seated-bg); border-color: var(--seated-line); }
.a-res.is-done { background: var(--done-bg); border-color: var(--line); color: var(--ink-soft); }

.a-scroll { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; background: var(--card); }
.a-table th, .a-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; }
.a-table td:first-child, .a-table th:first-child { padding-left: 12px; }
.a-table th { font-size: 12px; color: var(--ink-soft); }
.a-table small { color: var(--ink-soft); margin-left: 6px; }
.a-table tr.is-cancelled td, .a-table tr.is-noshow td, .a-table tr.is-hidden td { color: var(--muted); }
.a-table tr.is-cancelled td { text-decoration: line-through; }

.a-login { max-width: 380px; margin: 60px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; gap: 12px; }
.a-login h1 { margin: 0; font-size: 22px; }
.a-login h1 small { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.a-login label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.a-login input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; }
.a-login__demo { background: var(--indigo-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0; }

/* チェックボックス。ブラウザ既定の青ではなく、画面の色に合わせて少し大きく描く */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; display: inline-grid; place-content: center; border: 2px solid var(--check-line); border-radius: 6px; background: var(--card); cursor: pointer; vertical-align: middle; transition: background-color .12s ease-out, border-color .12s ease-out; }
input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; background: var(--check-ink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .12s ease-out; }
input[type="checkbox"]:checked { background: var(--check-on); border-color: var(--check-on); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover { border-color: var(--check-on); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--check-on); outline-offset: 2px; }
input[type="radio"] { accent-color: var(--check-on); width: 18px; height: 18px; margin: 0; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"], input[type="checkbox"]::before { transition: none; } }

.a-table--menu { table-layout: fixed; }
.a-table--menu .c-price { width: 190px; }
.a-table--menu .c-show { width: 110px; }
.a-table--menu td { vertical-align: middle; }
.a-check { gap: 8px !important; }