/* ポータル専用テーマ（青・紫）。共通の asada.css のあとに読み込み、ポータルの画面だけを上書きする。
   元案: Codex 2026-09-14 portal-ui/portal-theme.css。次の点を変えて取り込んだ。
   - タイルは依頼者の指示で今の小さめ（高さ 66px・4列）のまま。2026-09-14 に22色の濃い背景＋白い文字へ変更
   - 使わない赤系テーマ（.brand-red）を削除
   - タイルの背景色と文字色は、アプリ管理画面で選んだ色（タグの style 属性）を常に優先する
   他のアプリには読み込まれない。全アプリ共通の見た目を変えるときは asada_common/static/asada.css を直す。 */

:root {
  --bg: #f6f8ff;
  --fg: #182445;
  --muted: #566581;
  --faint: #667590;
  --line: #dce3f3;
  --line-soft: #edf0fa;
  --head: #f3f6ff;
  --zebra: #fafbff;
  --accent: #4967df;
  --accent-hover: #3852bd;
  --accent-bg: #eef2ff;
  --violet: #635bdb;
  --violet-hover: #5149c6;
  --violet-bg: #f0efff;
  --ok: #28a745;
  --ok-bg: #eaf8ee;
  --radius: 12px;
  --sidebar-w: 224px;
  --topbar-h: 56px;  /* チラシ作成の上部バーと同じ高さ */
  --font: "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
}

html { font-size: 14px; }
body { letter-spacing: .015em; }
h1, h2, h3, h4 { font-weight: 700; }
h1 { font-size: 23px; letter-spacing: .025em; }
h2 { font-size: 16px; }

/* 上部バー: 白地・タイトル左の四角は出さない */
.topbar { padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px #283b750d; }
/* タイトルと右側の文字の大きさは、チラシ作成の上部バーに揃える（2026-09-14 依頼者の指示） */
.topbar { height: var(--topbar-h); }
.topbar .brand { font-size: 21.6px; font-weight: 700; gap: 11px; color: var(--fg); }
.topbar .brand:hover { color: var(--accent); }
.topbar .brand .mark { display: none; }
.topbar .crumb, .topbar .who { color: var(--muted); }
.topbar .who { font-size: 14.4px; gap: 16px; }
.topbar .who strong { color: var(--fg); }
.topbar .who a { color: var(--accent); }
.topbar .crumb::before { color: var(--faint); }
.topbar .who .muted { color: var(--muted); }

/* 左メニュー: 選択中は薄い青＋左の青線。全面の塗りつぶしはしない */
.sidebar { padding: 20px 12px; gap: 6px; background: #fcfdff; }
.sidebar .nav { height: 42px; padding: 0 14px; color: #465572; }
.sidebar .nav .ic { color: #6c7da2; width: 19px; height: 19px; }
.sidebar .nav.on { color: var(--accent); background: var(--accent-bg); font-weight: 700; box-shadow: inset 3px 0 var(--accent); }
.sidebar .nav.on .ic { color: var(--accent); }
.sidebar .nav.on:hover { background: var(--line-soft); }
.sidebar .label { color: #667590; background: transparent; border: 0; font-size: 11px; font-weight: 400; letter-spacing: .04em; margin: 6px 8px 0; padding: 6px 6px 2px; }
.sidebar .label ~ .nav { margin-left: 8px; }
/* 本文をスクロールしても左メニューは動かない（上部バーの下に固定）。項目が多いときはメニューの中だけスクロール */
.layout.has-sidebar .sidebar { position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto; align-self: start; }

/* 本文・カード */
.main { padding: 28px 28px 48px; gap: 22px; }
.hrow { gap: 12px; }
.card { box-shadow: 0 4px 18px #31467808; overflow-wrap: anywhere; }
.card > h2, .card > .card-head { padding: 16px 18px; font-size: 14px; font-weight: 700; }
.card-head .gname { color: var(--fg); font-size: 14px; font-weight: 700; }
.group .card-head { border-bottom-color: #ddd1f4; }
.card-head .count { display: inline-block; color: #21843a; background: var(--ok-bg); border-radius: 6px; padding: 2px 8px; margin-left: 6px; font-weight: 500; }
.group .card-head .gtools a { color: var(--accent); }
.card .body { padding: 18px; }
.cols { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
.stack { gap: 18px; }

/* ボタン・入力欄: 主要ボタンは紫、それ以外は白 */
.btn { height: 36px; border-radius: 8px; border-color: #cdd6ee; font-size: 13px; font-weight: 500; }
.btn.sm { height: 30px; }
.btn.primary { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 700; box-shadow: 0 3px 8px #635bdb26; }
.btn.primary:hover { background: var(--violet-hover); border-color: var(--violet-hover); color: #fff; }
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="number"], input[type="search"], select {
  height: 36px; border-radius: 8px; border-color: #cdd6ee;
}
textarea { border-radius: 8px; border-color: #cdd6ee; }
.inline-search { height: 36px; border-radius: 8px; }
.inline-search input { height: 30px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline-color: var(--accent); }

/* 表・状態表示: 件数と状態は緑。休職・注意・危険は共通の色のまま（クラスが2つ付くので下の指定より優先される） */
.tbl th { height: 40px; font-weight: 700; color: #465779; }
.tbl td { height: 40px; }
.pill, .tag { border-radius: 6px; font-size: 12px; }
.pill { background: var(--ok-bg); color: #21843a; }
.tag.a { background: var(--accent-bg); color: var(--accent); }
.flash.ok { background: var(--ok-bg); color: #21843a; border-color: #c3e6cb; }

/* タイル: 大きさは今のまま（高さ 66px・4列）。背景はアプリ登録画面で選んだ22色、文字とアイコンは白（style 属性で指定）。
   22色はどれも白い文字が読める濃さに調整済み（app/palette.py） */
/* 幅は 147px で固定し、左から詰めて並べる。ブラウザを広げても伸びず、並ぶ数が増えるだけ（2026-09-14 依頼者の指示。220px の3分の2） */
.tilegrid { grid-template-columns: repeat(auto-fill, 147px); }
.tile span { max-width: 100%; padding: 0 6px; text-align: center; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile { border: 0; font-weight: 700; box-shadow: 0 2px 6px #1824451f; transition: box-shadow .16s, transform .16s, filter .16s; }
.tile .ic { stroke-width: 1.9; }
.tile:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 18px #18244533; color: #fff; }
.tile:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; }
.tile.dragging { transform: none; opacity: .5; }
.tile.over { outline: 3px dashed var(--fg); outline-offset: 2px; }

.li { padding: 14px 18px; font-size: 13px; }
.li .d { font-size: 12px; }
.kv { padding: 16px 18px; }
.foot { padding: 10px 18px; }
.pg a, .pg span { border-radius: 6px; }
.pg .on { background: var(--accent); border-color: var(--accent); }

/* ユーザー一覧の「選べる列」の並べ替えボタン。並べ替え中は青 */
.tbl th .colsort { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 5px; font-size: 10px; color: var(--faint); vertical-align: middle; }
.tbl th .colsort:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.tbl th .colsort.on { color: #fff; background: var(--accent); border-color: var(--accent); }

/* 削除の区画は赤い枠で、ふつうのカードと区別する */
.danger-zone { border-color: #e2b3af; }
.danger-zone > h2 { color: var(--danger); border-bottom-color: #f0d2cf; }

/* ログイン画面 */
.centered { padding: 8vh 16px 24px; }
.centered .card { max-width: 100%; }

@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { padding: 10px 14px; }
  .layout.has-sidebar .sidebar { position: static; height: auto; overflow: visible; }
  .sidebar .nav { height: 38px; }
  .sidebar .label ~ .nav { margin-left: 0; }
  .main { padding: 20px 16px 32px; }
  .topbar { height: auto; min-height: var(--topbar-h); padding: 7px 16px; flex-wrap: wrap; gap: 8px; }
  .topbar .who { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 560px) {
  /* スマホ幅では 147px が2つ並びきらないことがあるので、2列にして幅は 147px を超えないようにする */
  .tilegrid { grid-template-columns: repeat(2, minmax(0, 147px)); }
}
@media (max-width: 576px) {
  /* スマホ幅もチラシ作成と同じ大きさ */
  .topbar .brand { font-size: 17.6px; }
  .topbar .who { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover { transition: none; transform: none; }
}