/* Admin View — Tailwind CDN で表しきれない部分だけを補う */

body { -webkit-font-smoothing: antialiased; }

/* ID・日時・金額は縦位置を揃える */
.num { font-variant-numeric: tabular-nums; }

/* ── ビュー切替セグメント ── */
#view-switch button { background: #fff; color: #6b7280; }
#view-switch button[aria-selected="true"] { background: #2d4a6e; color: #fff; }

/* ── テーブル ── */
/* ヘッダを固定したまま行だけスクロールさせる。ページ全体ではなくこの領域が縦に動く */
.tbl-scroll { max-height: calc(100vh - 268px); min-height: 220px; overflow: auto; }
.tbl { border-collapse: separate; border-spacing: 0; }
.tbl thead th {
  /* スクロールコンテナはテーブルのラッパー（.tbl-scroll）。その上端に貼り付ける */
  position: sticky; top: 0; z-index: 10;
  background: #f9fafb; border-bottom: 1px solid #e5e7eb;
  font-weight: 600; color: #6b7280; text-align: left;
  padding: 8px 10px; white-space: nowrap; user-select: none;
}
.tbl thead th[data-sort] { cursor: pointer; }
.tbl thead th[data-sort]:hover { color: #2d4a6e; }
.tbl tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f3f5; vertical-align: middle; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: #f8fafc; }
.tbl tbody tr.is-selected { background: #eff6ff; }
.tbl tbody tr.is-cancelled td { color: #9ca3af; }
.tbl tbody tr.is-cancelled .b-type { opacity: .4; }

/* ── バッジ ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.badge-plain::before { display: none; }

/* ── 月カレンダー ── */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-height: 116px; border-right: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; padding: 4px; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.is-out { background: #fafbfc; }
.cal-cell.is-today { background: #eff6ff; }
.chip {
  display: flex; align-items: center; gap: 4px; width: 100%;
  padding: 2px 4px 2px 0; border-radius: 3px; font-size: 11px;
  border-left: 3px solid var(--type-color, #9ca3af); background: #fff;
  margin-bottom: 2px; overflow: hidden; text-align: left;
}
.chip:hover { background: #f1f5f9; }

/* ── 週タイムライン ── */
.tl-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.tl-slot { border-right: 1px solid #eef0f2; border-bottom: 1px dashed #f1f3f5; height: 26px; }
.tl-slot.hour { border-bottom: 1px solid #e9ecef; }
.tl-col { position: relative; border-right: 1px solid #eef0f2; }
.tl-block {
  position: absolute; left: 2px; right: 2px; border-radius: 4px;
  padding: 2px 5px; font-size: 10px; line-height: 13px; overflow: hidden;
  border-left: 3px solid var(--type-color, #9ca3af); color: #1f2937; text-align: left;
  background: color-mix(in srgb, var(--type-color, #9ca3af) 12%, white);
  cursor: pointer;
}
.tl-block:hover { filter: brightness(0.97); box-shadow: 0 1px 6px rgba(0,0,0,.12); }

/* ── ドロワー ── */
#drawer .sec-title {
  font-size: 11px; font-weight: 700; color: #6b7280; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 8px;
}
#drawer dl { display: grid; grid-template-columns: 88px 1fr; row-gap: 6px; column-gap: 12px; }
#drawer dt { color: #6b7280; }
#drawer dd { color: #111827; word-break: break-word; }

/* ORCA 送信内容プレビュー（#drawer dt/dd に負けないよう ID を含めて指定する） */
#drawer .orca-pre { background: #0f172a; border-radius: 6px; padding: 10px 12px; font-size: 11.5px; }
#drawer .orca-pre dl { grid-template-columns: 132px 1fr; row-gap: 4px; column-gap: 10px; }
#drawer .orca-pre dt { color: #7dd3fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#drawer .orca-pre dd { color: #f1f5f9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#drawer .orca-pre .missing { color: #fda4af; }

/* ── スピナー ── */
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor;
        border-right-color: transparent; border-radius: 999px; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── スクロールバー ── */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }