/* 仕上げのデザイン(app.css の後に読む)。
   - 文字の大きさ・ボタンの大きさ・並び・機能は、app.css のまま(高齢の方にも見やすい大きさを守る)。ここでは、質感・奥行き・動き・押せる場所の分かりやすさだけを整える
   - 色は、テーマ(見た目の設定)の変数(--primary・--side など)から作るので、どの色のテーマでも同じように効く
   - 印刷には効かせない(すべて screen の中)。動きを減らす設定の人には、動きを止める */
@media screen {
:root {
  --ds-radius-sm: 8px;
  --ds-radius: 12px;
  --ds-radius-lg: 16px;
  --ds-ring: color-mix(in srgb, var(--primary) 32%, transparent);
  --ds-line: color-mix(in srgb, var(--line) 75%, #fff);
  --ds-line-strong: color-mix(in srgb, var(--line) 70%, #8a96a3);
  --ds-head: color-mix(in srgb, var(--primary) 7%, #f7f9fb);
  --ds-hover: color-mix(in srgb, var(--primary) 5%, #fff);
  --ds-strong: color-mix(in srgb, var(--text) 92%, var(--primary));
  --ds-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --ds-shadow-2: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 18px -6px rgba(16, 24, 40, .10);
  --ds-shadow-3: 0 4px 10px -2px rgba(16, 24, 40, .10), 0 14px 32px -10px rgba(16, 24, 40, .22);
  --ds-ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---- 文字 */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3 { color: var(--ds-strong); letter-spacing: .02em; font-feature-settings: "palt"; }
.main > h1 { font-weight: 700; padding-bottom: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 22%, #fff); color: inherit; }
.num, td.num, th.num, .stat .value, .hm-n, .day-count { font-variant-numeric: tabular-nums; }
a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--primary-dark); }

/* ---- キーボードで動かすときの、今いる場所の印(マウスで押したときは出ない) */
:focus-visible { outline: 3px solid var(--ds-ring); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, button:focus-visible, .userbar-btn:focus-visible, .nav-tab:focus-visible { outline: 3px solid var(--ds-ring); outline-offset: 2px; }

/* ---- 左のメニュー: 奥行きと、いまの画面の印 */
.sidebar {
  background-image: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.06) 100%);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.08), 2px 0 12px -6px rgba(16,24,40,.25);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar a { transition: background-color .18s var(--ds-ease), color .18s var(--ds-ease), box-shadow .18s var(--ds-ease), transform .18s var(--ds-ease); }
@media (hover: hover) { .sidebar a:hover { transform: translateX(2px); } }
.sidebar a.active { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 70%, #000), inset 0 1px 0 rgba(255,255,255,.18); font-weight: 700; }
.sidebar .nav-sortable > a.active, .sidebar .support-group > a.active { position: relative; }
.sidebar .nav-sortable > a.active::after, .sidebar .support-group > a.active::after { content: ""; position: absolute; left: -10px; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: #fff; opacity: .9; }
.sidebar a.brand { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); letter-spacing: .03em; }
.sidebar a.brand.active { background: var(--primary); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 70%, #000); }
.sidebar a.brand:hover { transform: none; }
.nav-tabs { background: rgba(0,0,0,.14); margin: 0 10px 6px; padding: 4px !important; border-radius: 12px; gap: 4px !important; }
.nav-tab { border: 0 !important; border-radius: 9px !important; transition: background-color .18s var(--ds-ease), opacity .18s; }
.nav-tab.on { box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.nav-group, .nav-block .nav-group { letter-spacing: .06em; opacity: .85; }
.nav-display { background: rgba(0,0,0,.10); }
html[data-ui-theme="mizu"] .nav-tabs, html[data-ui-theme="momo"] .nav-tabs, html[data-ui-theme="matcha"] .nav-tabs, html[data-ui-theme="lemon"] .nav-tabs, html[data-ui-theme="lavender"] .nav-tabs, html[data-ui-theme="anzu"] .nav-tabs, html[data-ui-theme="mint"] .nav-tabs, html[data-ui-theme="mugi"] .nav-tabs { background: rgba(0,0,0,.07); }
html[data-ui-theme="mizu"] .sidebar a.brand, html[data-ui-theme="momo"] .sidebar a.brand, html[data-ui-theme="matcha"] .sidebar a.brand, html[data-ui-theme="lemon"] .sidebar a.brand, html[data-ui-theme="lavender"] .sidebar a.brand, html[data-ui-theme="anzu"] .sidebar a.brand, html[data-ui-theme="mint"] .sidebar a.brand, html[data-ui-theme="mugi"] .sidebar a.brand { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
html[data-ui-theme="mizu"] .sidebar a.brand.active, html[data-ui-theme="momo"] .sidebar a.brand.active, html[data-ui-theme="matcha"] .sidebar a.brand.active, html[data-ui-theme="lemon"] .sidebar a.brand.active, html[data-ui-theme="lavender"] .sidebar a.brand.active, html[data-ui-theme="anzu"] .sidebar a.brand.active, html[data-ui-theme="mint"] .sidebar a.brand.active, html[data-ui-theme="mugi"] .sidebar a.brand.active { background: var(--primary); color: #fff; }
html[data-ui-theme="mizu"] .nav-display, html[data-ui-theme="momo"] .nav-display, html[data-ui-theme="matcha"] .nav-display, html[data-ui-theme="lemon"] .nav-display, html[data-ui-theme="lavender"] .nav-display, html[data-ui-theme="anzu"] .nav-display, html[data-ui-theme="mint"] .nav-display, html[data-ui-theme="mugi"] .nav-display { background: rgba(0,0,0,.04); }

/* スマホ幅: メニューは、ボタンを小さめのチップにして、本文までの距離を短くする(項目・並びは変えない) */
@media (max-width: 520px) {
  .sidebar { box-shadow: 0 2px 10px -4px rgba(16,24,40,.35); gap: 2px; padding: 8px; height: auto; align-content: flex-start; align-items: center; } /* 行が画面の高さまで伸びて、項目が縦長になるのを防ぐ */
  .sidebar a.brand { flex: 1 1 100%; margin: 0 0 6px; padding: 10px 12px; font-size: 17px; }
  .nav-tabs { flex: 1 1 100%; margin: 0 0 6px; }
  .nav-tab { padding: 8px 4px; white-space: nowrap; }
  .sidebar a { font-size: 15px; padding: 7px 12px; margin: 2px; border-radius: 999px; }
  .sidebar a:hover { transform: none; }
  .sidebar .nav-sortable > a.active::after, .sidebar .support-group > a.active::after { display: none; }
  .nav-display { margin-top: 6px; border-radius: 10px; }
}

/* ---- 右上: 検索・アカウント(下の見出しや帯に重ねられても、押せるように、いちばん手前に置く) */
.userbar { position: relative; z-index: 6; }
.userbar-search input[type="search"] { border-radius: 999px; padding-left: 14px; background: #fff; box-shadow: var(--ds-shadow-1); }
.userbar-btn { transition: background-color .18s var(--ds-ease), color .18s, box-shadow .18s; box-shadow: var(--ds-shadow-1); font-weight: 600; }
.userbar-btn:hover { box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--primary) 60%, transparent); }

/* ---- カード・枠 */
.card { border-color: var(--ds-line); box-shadow: var(--ds-shadow-2); }
.center-page .card.narrow { box-shadow: var(--ds-shadow-3); border-radius: 20px; padding: 28px 30px; }
fieldset { border-color: var(--ds-line); border-radius: var(--ds-radius); background: color-mix(in srgb, var(--panel) 92%, var(--bg)); }
legend { color: var(--ds-strong); font-weight: 700; letter-spacing: .02em; padding: 0 8px; }
details > summary { transition: color .15s; }
.stat, .hm-tile { border-color: var(--ds-line); box-shadow: var(--ds-shadow-1); transition: transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease), border-color .2s; }
.stat { border-radius: 14px; }
.hm-tile { border-radius: 14px; }
@media (hover: hover) { a.hm-tile:hover, a.stat:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-2); } }
.day-panel, .bulk, .wd-detail { border-color: var(--ds-line); border-radius: var(--ds-radius); }

/* ---- ボタン: 主な操作(色)・ふつうの操作(白)・危ない操作(赤)を、ひと目で分ける */
.btn, button.btn { transition: background-color .18s var(--ds-ease), border-color .18s, color .18s, box-shadow .18s var(--ds-ease), transform .12s var(--ds-ease); box-shadow: var(--ds-shadow-1); font-weight: 600; border-color: var(--ds-line-strong); }
.btn:hover { background: var(--ds-hover); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: 0 3px 10px -4px rgba(16,24,40,.22); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn.primary, .btn.btn-save, button.btn.btn-save {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow: 0 1px 2px rgba(16,24,40,.12), 0 4px 12px -4px color-mix(in srgb, var(--primary) 75%, transparent);
}
.btn.primary:hover, .btn.btn-save:hover { box-shadow: 0 2px 4px rgba(16,24,40,.12), 0 8px 18px -6px color-mix(in srgb, var(--primary) 80%, transparent); }
.btn.danger { background: #fff; border-color: color-mix(in srgb, var(--err) 40%, #fff); }
.btn.danger:hover { background: color-mix(in srgb, var(--err) 7%, #fff); border-color: var(--err); }
.btn:disabled, .btn[disabled] { box-shadow: none; background-image: none; }
button.link { text-underline-offset: .18em; }

/* ---- 入力欄: 乗せると枠が濃く、入力中は色の輪 */
input, select, textarea { transition: border-color .15s var(--ds-ease), box-shadow .15s var(--ds-ease), background-color .15s; border-color: var(--ds-line-strong); }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ds-ring); }
input::placeholder, textarea::placeholder { color: #98a2b0; }
input:disabled, select:disabled, textarea:disabled { background: #f3f5f7; color: #6b7785; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--primary); }
input[type="checkbox"], input[type="radio"] { box-shadow: none; cursor: pointer; }
label.inline { cursor: pointer; }
/* 表の中の小さな入力欄(シフト・予定など)は、色の輪を内側に細く(隣のマスを隠さない) */
.cal input:focus, .cal select:focus, .shift-grid input:focus, .shift-grid select:focus { box-shadow: inset 0 0 0 2px var(--primary); }

/* ---- 表 */
.table { border-color: var(--ds-line); }
.table th, .table td { border-color: var(--ds-line); }
.table th { background: var(--ds-head); color: var(--ds-strong); font-weight: 600; }
.table tbody tr { transition: background-color .12s; }
.table tbody tr:hover > td { background-color: color-mix(in srgb, var(--primary) 4%, transparent); }
.table tr.total td { background: var(--ds-head); }
.table-wrap { border-radius: var(--ds-radius-sm); }
.cal th, .cal td { border-color: var(--ds-line); }
.cal th { background: var(--ds-head); }

/* ---- タブ: いまのタブに、太い下線 */
.tabs { border-bottom-color: var(--ds-line); }
.tabs a { position: relative; transition: color .15s, background-color .15s; border-bottom-width: 0; margin-bottom: -1px; }
.tabs a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); transform: scaleX(0); transition: transform .2s var(--ds-ease); }
.tabs a:hover { color: var(--primary-dark); }
.tabs a.active { color: var(--primary); font-weight: 700; }
.tabs a.active::after { transform: scaleX(1); }
.tabs.seg a::after { display: none; }
.tabs.seg { gap: 6px; }
.tabs.seg a { border-color: var(--ds-line-strong); background: #fff; box-shadow: var(--ds-shadow-1); margin-bottom: 0; }
.tabs.seg a.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--primary) 80%, transparent); }
.tabs a.tab-todo::after { background: #c53030; }

/* ---- お知らせの帯(保存しました・エラーなど): 左に色の線と印 */
.flash { position: relative; padding-left: 46px; border: 1px solid transparent; border-left-width: 5px; box-shadow: var(--ds-shadow-1); }
.flash::before { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }
.flash.success { border-color: #bfe3cb; border-left-color: var(--ok); }
.flash.success::before { content: "✓"; background: var(--ok); }
.flash.error { border-color: #f2c4bd; border-left-color: var(--err); }
.flash.error::before { content: "!"; background: var(--err); }
.flash.info { border-color: var(--tint-line); border-left-color: var(--primary); }
.flash.info::before { content: "i"; background: var(--primary); font-family: Georgia, serif; font-style: italic; }
.flash.warn { border-color: #f0c27a; border-left-color: #d08a00; } /* R37: 保存はできたが、注意があるとき(黄色) */
.flash.warn::before { content: "!"; background: #d08a00; }

/* ---- 小さな印 */
.badge, .hm-badge { font-weight: 600; border-radius: 999px; }
.badge { box-shadow: inset 0 0 0 1px rgba(16,24,40,.06); }
.chip { border-color: var(--ds-line-strong); background: #fff; }

/* ---- 画面の下の、提供元の表記 */
.credit-bar { background: color-mix(in srgb, var(--panel) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-top-color: var(--ds-line); }

/* ---- スクロールバー(細く、目立ちすぎない) */
.main ::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 10px; height: 10px; }
.main ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.main ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 38%, transparent); }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }

/* ---- ページを開いたとき、本文をふわっと出す(一瞬だけ。何度も動かない) */
/* 見出し(h1)には動きを付けない(動きを付けると、右上の検索・マイページ(右に寄せた部分)の上に重なって、押せなくなる) */
.main > .card, .main > .flash { animation: ds-in .32s var(--ds-ease) backwards; } /* both だと、終わったあとも transform が残り、中の position:fixed の窓の基準が、画面でなくカードになる */
.main > .card:nth-of-type(2) { animation-delay: .03s; }
.main > .card:nth-of-type(3) { animation-delay: .06s; }
@keyframes ds-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* 動きを減らす設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .sidebar a:hover, a.hm-tile:hover, a.stat:hover { transform: none !important; }
}

/* 印刷のときは、文字の大きさ(A−・A＋、標準の拡大)を効かせない(紙からはみ出さないように) */
@media print { html { zoom: 1 !important; } }

/* 文字の大きさ(画面全体の拡大)のとき、左のメニューの高さを、拡大の分だけ割り戻す(割り戻さないと、メニューの下が画面の外・提供元の表記の裏に隠れる)。--ui-zoom は header.ejs・app.js が入れる */
@media screen and (min-width: 521px) {
  .sidebar { height: calc(100vh / var(--ui-zoom, 1) - var(--credit-h, 64px)); }
}

/* 設定の入口(/settings) */
@media screen {
.sh-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sh-search-label { font-weight: 700; }
.sh-search input[type="search"] { flex: 1 1 320px; max-width: 560px; }
.sh-pending { border-left: 6px solid var(--err); }
.sh-pending h2 { display: flex; align-items: center; gap: 10px; }
.sh-pending-list { margin: 6px 0 0; padding-left: 20px; }
.sh-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sh-toc a { padding: 6px 14px; border-radius: 999px; background: var(--tint); border: 1px solid var(--tint-line); text-decoration: none; color: var(--primary-dark); font-weight: 600; }
.sh-toc a:hover { background: var(--primary); color: #fff; }
.sh-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); /* R39: 320px の画面で 340px の枠がはみ出した */ gap: 16px; align-items: start; }
.sh-groups .card { margin: 0; }
.sh-group h2 { margin-bottom: 4px; }
.sh-items { list-style: none; margin: 10px 0 0; padding: 0; }
.sh-item a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text); border: 1px solid transparent; }
.sh-item a:hover { background: var(--ds-hover, #f5f8fb); border-color: var(--tint-line); }
.sh-label { font-weight: 700; color: var(--primary-dark); }
.sh-desc { font-size: .88em; color: var(--muted); }
.sidebar a.nav-settings { font-weight: 700; }
}

/* 「#目印」付きで開いた場所に、少しのあいだ色を付ける(app.js) */
@media screen {
.hash-flash { outline: 3px solid var(--primary); outline-offset: 4px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--primary) 18%, transparent); transition: outline-color .4s, box-shadow .4s; scroll-margin-top: 16px; }
}

/* 選択欄の選び肢が長いとき、狭い画面で枠の外にはみ出さない(給料設定の「処遇改善加算の配分」など) */
@media screen and (max-width: 1100px) {
  .main label > select { max-width: 100%; }
}