/* 画面の見た目。**業務で毎日見る表なので、装飾より読みやすさを優先する。**
   ★の付く語だけを色で強調する。多くに色を付けると色が意味を失う。 */
:root {
  --line: #d6d9de; --head: #f2f4f7; --alert: #b3261e; --warn-bg: #fff4e5;
  --note-bg: #eef3fb; --ink: #1c1f23; --dim: #5b6168;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
       color: var(--ink); font-size: 14px; background: #fff; }
main { padding: 12px 16px 60px; }
h1 { font-size: 20px; margin: 8px 0; }
h2 { font-size: 16px; margin: 24px 0 6px; border-bottom: 2px solid var(--line);
     padding-bottom: 4px; }
.count { font-size: 14px; color: var(--dim); font-weight: normal; }
.of { font-size: 13px; color: var(--dim); font-weight: normal; }
.lead { color: var(--dim); margin: 4px 0 10px; }

.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
       padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--head); }
.brand { font-weight: bold; text-decoration: none; color: var(--ink); }
.bar nav { display: flex; gap: 12px; flex-wrap: wrap; }
.bar nav a { text-decoration: none; color: var(--ink); padding: 2px 4px; }
.bar nav a.on { border-bottom: 2px solid var(--ink); font-weight: bold; }
.who { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--dim); }
.who form { display: inline; }
.runbar { margin: 0; padding: 6px 16px; background: var(--note-bg);
          border-bottom: 1px solid var(--line); font-size: 13px; }

.notice, .warn, .note, .error { padding: 8px 10px; border-radius: 4px; margin: 8px 0; }
.warn { background: var(--warn-bg); border: 1px solid #f0c48a; }
.note { background: var(--note-bg); border: 1px solid #c3d3ec; }
.error { background: #fde8e6; border: 1px solid #e8a9a3; color: var(--alert); }
.alert { color: var(--alert); font-weight: bold; }
.empty { color: var(--dim); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
           margin: 10px 0; padding: 10px; background: var(--head); border-radius: 4px; }
.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--dim); }
.filters select, .filters input { font-size: 14px; padding: 3px 5px; }
.filters .clear { align-self: center; font-size: 13px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { border: 1px solid var(--line); padding: 3px 6px; text-align: left;
         white-space: nowrap; }
th { background: var(--head); position: sticky; top: 0; }
tbody tr:nth-child(even) { background: #fafbfc; }

.kv { list-style: none; padding: 0; margin: 6px 0; }
.kv li { padding: 2px 0; }

.login { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.login label { display: flex; flex-direction: column; gap: 3px; }
.login input { font-size: 15px; padding: 5px; }

/* 連絡事項の本文。★DBには全文が入っている（シートは900字で切る）ので、
   改行をそのまま見せる。 */
.detail { white-space: pre-wrap; background: #fafbfc; border: 1px solid var(--line);
          border-radius: 4px; padding: 8px 10px; margin: 4px 0 8px;
          font-family: inherit; font-size: 13px; line-height: 1.5; }
.dimtext { color: var(--dim); }

/* CSVの導線。**表のすぐ上に置く。**いま見えているものが落ちる、と分かる位置。 */
.csvbar { margin: 6px 0; font-size: 13px; }
.csvbar code { background: #fff4e5; padding: 0 3px; }