/* =====================================================================
   業務 SaaS 共通のデザインの決まり（全画面がこのファイルを先に読む。saas-ui スキルの正本）
   - 色：無彩色が土台。色は意味があるときだけ使う
       青＝データ・選択・リンク／緑＝達成・良い／赤＝未達・エラー・取り消し／琥珀＝注意
     グラデーションは使わない
   - 文字：本文 13px。補足 12px、列見出し 12px。数字の見出しは 20〜24px
     太さは 400・500・600 だけ（700 以上は使わない）
   - 余白：4 の倍数（4・8・12・16・24・32）
   - 角丸：札 4px、部品 6px、面 8px。丸い錠剤形（999px）は使わない
   - 線：面の区切りは 1px の線。左だけ太い色線の箱は使わない
   - 影：浮かぶもの（ダイアログ・トースト）にだけ
   - 動き：120〜160ms の色の変化だけ
   ===================================================================== */
:root{
  color-scheme:light;
  --bg:#fafafa;            /* 作業面 */
  --surface:#fff;          /* 表・入力・パネル */
  --subtle:#f4f4f5;        /* 列見出し・控えめな面 */
  --hover:#f4f4f5;
  --active:#e9e9ec;
  --line:#e4e4e7;          /* 区切り線 */
  --line-soft:#f0f0f2;     /* 表の行の線 */
  --line-strong:#d4d4d8;   /* 入力欄の枠 */
  --ink:#18181b;
  --ink-2:#3f3f46;
  --sub:#71717a;
  --faint:#a1a1aa;
  --accent:#2563eb; --accent-bg:#eff6ff; --accent-line:#bfdbfe;
  --pos:#15803d;    --pos-fill:#16a34a; --pos-bg:#f0fdf4; --pos-line:#bbf7d0;
  --neg:#dc2626;    --neg-bg:#fef2f2;   --neg-line:#fecaca;
  --warn:#b45309;   --warn-fill:#d97706; --warn-bg:#fffbeb; --warn-line:#fde68a;
  --focus:0 0 0 3px rgba(37,99,235,.18);
  --pop-shadow:0 0 0 1px rgba(24,24,27,.06),0 12px 32px -8px rgba(24,24,27,.22);
  --r-sm:4px; --r:6px; --r-lg:8px;
  --bar-h:48px;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:13px;line-height:1.6;
  font-family:"Segoe UI Variable Text","Segoe UI","Yu Gothic UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
h1,h2,h3,h4,p{margin:0}
b,strong{font-weight:600}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:rgba(37,99,235,.16)}
::placeholder{color:var(--faint)}
[hidden],.hide{display:none!important}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--sub)}
.spacer{margin-left:auto}

/* ===== 上の帯：製品名・画面の切り替え・状態 ===== */
.appbar{position:sticky;top:0;z-index:30;height:var(--bar-h);display:flex;align-items:center;gap:4px;
  padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.appbar .brand{display:flex;align-items:center;gap:8px;margin-right:16px;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.appbar .brand:hover{text-decoration:none}
.appbar .brand i{width:18px;height:18px;border-radius:5px;background:var(--ink);display:grid;place-items:center}
.appbar .brand i::after{content:"";width:8px;height:8px;border:2px solid #fff;border-radius:2px}
.gnav{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.gnav::-webkit-scrollbar{display:none}
.gnav a{display:flex;align-items:center;height:30px;padding:0 10px;border-radius:var(--r);color:var(--sub);
  font-weight:500;white-space:nowrap;transition:background .12s,color .12s}
.gnav a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.gnav a[aria-current="page"]{color:var(--ink);background:var(--active)}
.appbar .meta{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--sub);white-space:nowrap}
.appbar .meta input{height:28px;width:150px}

/* 接続の状態：丸印＋文字 */
.state{display:inline-flex;align-items:center;gap:6px}
.state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.state.ok::before{background:var(--pos-fill)}
.state.ng{color:var(--neg)}
.state.ng::before{background:var(--neg)}

/* ===== 画面の中の切り替え（下線のタブ） ===== */
.tabs{display:flex;gap:4px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs>button,.tabs>.tab{position:relative;height:40px;padding:0 10px;background:none;border:0;color:var(--sub);
  font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s}
.tabs>button:hover,.tabs>.tab:hover{color:var(--ink)}
.tabs>[aria-selected="true"],.tabs>.tab.on{color:var(--ink)}
.tabs>[aria-selected="true"]::after,.tabs>.tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--ink);border-radius:2px 2px 0 0}

/* ===== 見出し ===== */
.page-title{font-size:16px;font-weight:600;line-height:1.4}
.section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:0 0 8px}
.lead{font-size:12px;color:var(--sub);line-height:1.7;max-width:80ch}

/* ===== ボタン ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);
  font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover)}
.btn:active{background:var(--active)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#27272a}
.btn.danger{color:var(--neg);border-color:var(--neg-line)}
.btn.danger:hover{background:var(--neg-bg)}
.btn.ghost{border-color:transparent;background:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--hover)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.icon{width:32px;padding:0}
.btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.busy{position:relative;color:transparent!important;pointer-events:none}
.btn.busy::after{content:"";position:absolute;width:14px;height:14px;border:2px solid currentColor;border-color:var(--faint) var(--faint) var(--faint) transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 入力 ===== */
input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],input[type=email],input[type=tel],input[type=month],input:not([type]),select,textarea{
  height:32px;padding:0 10px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--ink);font-size:13px;transition:border-color .12s,box-shadow .12s}
textarea{height:auto;padding:8px 10px;line-height:1.6;resize:vertical}
select{padding-right:28px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
input:disabled,select:disabled,textarea:disabled{background:var(--subtle);color:var(--faint);cursor:not-allowed}
input[readonly]{background:var(--subtle);color:var(--ink-2)}
input[readonly]:hover,input[readonly]:focus{border-color:var(--line-strong);box-shadow:none}
input.invalid,select.invalid,textarea.invalid{border-color:var(--neg)}
input.invalid:focus,select.invalid:focus{box-shadow:0 0 0 3px rgba(220,38,38,.15)}
input[type=checkbox],input[type=radio]{width:15px;height:15px;margin:0;accent-color:var(--ink);cursor:pointer}
.field{display:grid;gap:4px}
.field>label,.label{font-size:12px;font-weight:500;color:var(--ink-2)}
.check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap}

/* 月・週・日などの切り替え：白いつまみ */
.seg{display:inline-flex;padding:2px;gap:2px;background:var(--subtle);border:1px solid var(--line);border-radius:var(--r)}
.seg button{height:26px;padding:0 10px;border:0;background:none;border-radius:4px;color:var(--sub);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(24,24,27,.06)}

/* ===== 操作の帯（絞り込み） ===== */
.toolbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.toolbar .lbl{font-size:12px;color:var(--sub);margin-right:2px}

/* ===== 表 ===== */
.table-wrap,.scroller{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{height:34px;padding:0 12px;background:var(--subtle);border-bottom:1px solid var(--line);color:var(--sub);
  font-size:12px;font-weight:500;text-align:left;white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fcfcfd}

/* ===== 札（状態・種類） ===== */
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--r-sm);
  background:var(--subtle);color:var(--ink-2);font-size:11.5px;font-weight:500;white-space:nowrap;line-height:1}
.badge.pos{background:var(--pos-bg);color:var(--pos)}
.badge.neg{background:var(--neg-bg);color:var(--neg)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.accent{background:var(--accent-bg);color:var(--accent)}

/* ===== お知らせ ===== */
.callout{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--subtle);color:var(--ink-2);font-size:12px;line-height:1.7}
.callout b,.callout strong{color:var(--ink);font-weight:600}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.callout.neg{background:var(--neg-bg);border-color:var(--neg-line);color:var(--neg)}
.callout.pos{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
.callout.accent{background:var(--accent-bg);border-color:var(--accent-line)}

/* ===== 空・読み込み ===== */
.empty{padding:40px 16px;text-align:center;color:var(--sub);font-size:13px}
.loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:56px 16px;color:var(--sub)}
.loading::before{content:"";width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--ink-2);border-radius:50%;animation:spin .7s linear infinite}

/* ===== ダイアログ ===== */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;
  padding:8vh 16px 16px;overflow-y:auto;background:rgba(24,24,27,.4)}
.modal.on{display:flex}

/* ===== 折りたたみ ===== */
details.fold{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
details.fold>summary{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;cursor:pointer;
  list-style:none;font-weight:500;color:var(--ink-2)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid var(--sub);border-bottom:1.5px solid var(--sub);transform:rotate(-45deg);transition:transform .12s}
details.fold[open]>summary::before{transform:rotate(45deg)}
details.fold>summary:hover{color:var(--ink)}
details.fold[open]>summary{border-bottom:1px solid var(--line)}
details.fold>.fold-body{padding:12px}

@media (max-width:760px){
  .appbar{padding:0 12px}
  .appbar .brand{margin-right:8px}
  .appbar .brand span{display:none}
  .appbar .meta .hide-sp{display:none}
  .tabs{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}