/* 社内管理画面（介護情報基盤 OMS）：上部のタイトルと左メニュー。色・書体は app.css の変数をそのまま使う。
   admin/inc/layout.php が出力する構造に対応。お客様向け画面では読み込まない。 */

:root{
  --oms-side-w:230px;               /* 「介護情報基盤ポータル」が省略されず1行に収まる広さ(2026-09-22調整。以前は200px。
                                        実測：225pxでは1px足りず省略記号が出たため、余裕を見て230pxにした) */
  --oms-side-w-collapsed:64px;
  --oms-topbar-h:57px;             /* 実際の高さは admin-shell.js が測って上書きする */
}

/* ---------- 上部バー ---------- */
.oms-topbar{flex-wrap:nowrap}
.oms-topbar .brand{margin-right:auto;min-width:0}
/* 「Order Management System」の右端を、上の「介護情報基盤 OMS」の右端（Sの位置）に実測で合わせた字間
   （.oms-sub は block 要素で「介護情報基盤 OMS」と同じ幅に伸びるが、文字自体はその中で左揃えのため、
   文字の右端を揃えるには letter-spacing で文字列自体の幅を widthいっぱいまで広げる必要がある。
   幅821px以上（brand-mainが23px）用の値。821px未満（brand-mainが19pxに縮む対応幅）は下のメディアクエリで別の値にする） */
.oms-sub{font-family:"Roboto Mono","Noto Sans JP",monospace;font-size:11px;letter-spacing:.173em;color:var(--ink-2);line-height:1.3;margin-top:1px}
/* 今月のチーム受注（上部バーの右端。2026-09-29）。ログイン後だけ出す（JSが hidden を外す）。押すとダッシュボードへ */
.oms-team{flex:none;display:inline-flex;align-items:baseline;gap:6px;margin-left:12px;padding:5px 14px;min-height:34px;box-sizing:border-box;border:2px solid var(--outline);border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font:700 13.5px "Zen Maru Gothic","Noto Sans JP",sans-serif;white-space:nowrap;align-items:center}
.oms-team[hidden]{display:none}
.oms-team:hover{background:var(--surface-2)}
.oms-team b{font-size:16px;font-variant-numeric:tabular-nums}
.oms-team .ts{display:none}
.oms-team small{font-size:12px;font-weight:700;color:var(--ink-2);margin-left:.35em}
.oms-team.done{background:#DDEFEA;color:#1F5B50;border-color:#1F5B50}
.oms-team.done small{color:#1F5B50}
.oms-team.none small{color:var(--ink-3)}
.oms-menu-btn{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;padding:0;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:2px solid var(--outline);border-radius:999px;
}
.oms-menu-btn:hover{background:var(--surface-2)}

/* ---------- 全体の枠 ---------- */
.oms-shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--oms-topbar-h))}
.oms-main{flex:1;min-width:0}

/* ---------- 左メニュー ---------- */
.oms-side{
  position:sticky;top:var(--oms-topbar-h);z-index:30;flex:none;
  width:var(--oms-side-w);height:calc(100vh - var(--oms-topbar-h));
  display:flex;flex-direction:column;gap:6px;
  padding:10px 10px 14px;overflow-x:hidden;overflow-y:auto;
  background:var(--surface);border-right:2px solid var(--outline);
  transition:width .16s ease;
}
.oms-side-head{display:flex;justify-content:flex-end}
.oms-collapse{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;cursor:pointer;flex:none;
  background:none;color:var(--ink-2);border:2px solid transparent;border-radius:999px;
}
.oms-collapse:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line-strong)}
.oms-collapse svg{transition:transform .16s ease}
.oms-nav{display:flex;flex-direction:column;gap:6px}

.oms-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 14px;cursor:pointer;text-align:left;text-decoration:none;
  font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700;font-size:14px;line-height:1.3;
  color:var(--ink);background:none;
  border:2px solid transparent;border-radius:999px;
}
.oms-item svg{flex:none}
.oms-item:hover{background:var(--surface-2)}
/* 今の画面：ヘッダーの選択中ボタンと同じ、金色の丸薬型 */
.oms-item[aria-current="page"]{background:var(--gold-bg);color:var(--gold-ink);border-color:var(--outline)}
.oms-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oms-label.oms-label-wrap{white-space:normal;overflow:visible;line-height:1.25}   /* 長い名前を2段で表示（layout.php の 'wrap' => true） */

/* ---------- 最下段：ログイン中の名前とログアウト ---------- */
.oms-pw{width:100%}
.oms-user{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1.5px solid var(--line)}
.oms-user-name{font-size:13px;color:var(--ink-2);line-height:1.4;padding:0 6px;word-break:break-all}
.oms-avatar{
  display:none;width:34px;height:34px;margin:0 auto;border-radius:50%;flex:none;
  align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-deep);border:2px solid var(--outline);
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:14px;
}

/* ---------- 折りたたみ（PC幅）：アイコンだけの細い表示 ---------- */
@media (min-width:821px){
  .oms-collapsed .oms-side{width:var(--oms-side-w-collapsed);padding-left:9px;padding-right:9px}
  .oms-collapsed .oms-side-head{justify-content:center}
  .oms-collapsed .oms-collapse svg{transform:rotate(180deg)}
  .oms-collapsed .oms-label,.oms-collapsed .oms-user-name{display:none}
  .oms-collapsed .oms-item{justify-content:center;padding:9px 0}
  .oms-collapsed .oms-avatar{display:flex}
}

/* ---------- スマホ幅：メニューは隠し、上部のボタンで開く ---------- */
@media (max-width:820px){
  .oms-menu-btn{display:inline-flex}
  body:not(.oms-authed) .oms-menu-btn{display:none}
  .oms-topbar{padding:8px 14px;gap:12px}
  .oms-topbar .brand-main{font-size:19px}
  .oms-team{margin-left:0;padding:3px 10px;min-height:36px;font-size:12.5px;line-height:1.2}
  .oms-team .tf{display:none}
  .oms-team .ts{display:inline}
  .oms-team .ts small{display:block;font-size:10.5px;margin-left:0}
  .oms-team b{font-size:15px}
  .oms-sub{letter-spacing:.039em}   /* brand-mainが19pxに縮む幅なので、字間もこの幅用に実測し直した値 */
  .oms-collapse{display:none}
  .oms-side{
    position:fixed;left:0;top:var(--oms-topbar-h);bottom:0;height:auto;z-index:60;
    width:min(260px,82vw);transform:translateX(-102%);
    transition:transform .18s ease;box-shadow:6px 0 0 rgba(58,46,34,.18);
  }
  .oms-open .oms-side{transform:none}
  .oms-scrim{position:fixed;inset:var(--oms-topbar-h) 0 0 0;z-index:55;background:rgba(43,46,34,.45)}
  .oms-scrim[hidden]{display:none}
}
@media (min-width:821px){
  .oms-scrim{display:none!important}
}
/* 狭いスマホ幅：上部バーの英字の小さい表記は隠し、名称を少し小さくして、チーム受注が収まるようにする */
@media (max-width:420px){
  .oms-topbar{gap:8px;padding:8px 10px}
  .oms-topbar .oms-sub{display:none}
  .oms-topbar .brand-main{font-size:16.5px;white-space:nowrap}
  .oms-topbar .brand svg{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .oms-side,.oms-collapse svg{transition:none}
}

/* ---------- HS未登録リスト・ヒアリングシート閲覧・案件進捗管理で共通に使う小さな部品 ---------- */
/* 表が枠からはみ出して、横にスクロールできるときだけ、表の上に出す案内（出し分けは admin-shell.js。収まっているPC幅では出ない） */
.scroll-hint{display:none;margin:0 0 6px;font-size:12px;color:var(--ink-2)}
.scroll-hint.on{display:block}
.unfilled{color:var(--danger);font-weight:700}
.tel-link{color:var(--accent-deep);font-weight:700;text-decoration:none;white-space:nowrap}
.tel-link:hover{text-decoration:underline}
.wait-note{display:inline-block;font-size:11.5px;font-weight:700;color:#8A3B00;background:#FFD9A8;border:1.5px solid #8A3B00;border-radius:999px;padding:0 8px;white-space:nowrap}
.contact-line{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.state-pill{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px;padding:3px 10px;border-radius:999px;border:1.5px solid var(--outline);white-space:nowrap}
.state-pill.st-e{background:#EDEDED;color:#555}
.state-pill.st-a{background:#FBEECB;color:#94670F}
.state-pill.st-g{background:#DDEFEA;color:#1F5B50}

/* ---------- スマホ幅（820px以下）：ボタンとプルダウンを、指で押しやすい大きさ（44px以上）にする（2026-09-26） ----------
   PC幅の見た目は変えない。管理画面専用（お客様画面は admin-shell.css を読み込まない）。
   対象：ボタン類（.btn・リンク型ボタン・表の中の▶やポップアップの×）、プルダウン（select）、ページ番号、メニュー項目 */
@media (max-width:820px){
  .btn,.btn-sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  select{min-height:44px}
  button.linkbtn,a.linkbtn,.backrow button{min-height:44px;display:inline-flex;align-items:center}
  .contract-toggle-btn{min-width:44px;min-height:44px}
  .modal-close-btn{min-width:44px;min-height:44px}
  #screen-hl .hl-pager a,#screen-hl .hl-pager span.pg{min-width:44px;height:44px}   /* 画面内のスタイル(.hl-pager a)より強くするため、#screen-hl を付ける */
  .oms-item{min-height:44px}
  .oms-menu-btn{width:44px;height:44px}
}

/* ---------- 「トップに戻る」ボタン（右下の「↑」。管理画面の全ページ。2026-09-26） ----------
   一定量スクロールしたら出す（.on）。位置は、通常は右下（下から18px・右から16px）。画面下に固定の操作バー（新規案件登録の
   「キャンセル／プレビューを見る」など）と重なるときは、admin-shell.js が --oms-totop-bottom を測って、その上に持ち上げる。
   z-index：ポップアップ(100)・メニュー(55〜60)より下 */
.oms-totop{
  position:fixed;right:16px;bottom:var(--oms-totop-bottom,18px);z-index:45;
  width:44px;height:44px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--outline);border:2px solid var(--outline);box-shadow:0 3px 10px rgba(58,46,34,.25);
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s,bottom .12s ease;
}
.oms-totop.on{opacity:1;visibility:visible;transform:none}
.oms-totop:hover{background:var(--surface-2)}
.oms-totop svg{display:block}
@media (prefers-reduced-motion:reduce){.oms-totop{transition:none}}

/* ---------- パスワード欄の目のマーク（ログイン画面・パスワード変更。layout.php の oms_pw_eye）2026-10-04 ----------
   入れ物の .pw-wrap と、入力欄の右の余白は app.css のもの（お客様画面の「表示」ボタンと共通。app.css は変えない）。
   ここでは目のマークのボタンだけを決める（app.css の .pw-wrap button を、この中だけ上書き） */
.pw-wrap .oms-eye{
  right:4px;width:40px;height:40px;padding:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.pw-wrap .oms-eye:hover{background:var(--surface-2);color:var(--ink)}
.pw-wrap .oms-eye:focus-visible{outline:2px solid var(--outline);outline-offset:1px}
.pw-wrap .oms-eye svg{display:block}
.pw-wrap .oms-eye .oms-eye-hide{display:none}
.pw-wrap .oms-eye[aria-pressed="true"] .oms-eye-show{display:none}
.pw-wrap .oms-eye[aria-pressed="true"] .oms-eye-hide{display:block}

/* ---------- 本文の枠（2026-10-21。POPEYE の画面の幅の決まりにそろえる） ----------
   ログインした画面の本文（.wrap.wide・一括支払いのご案内の .bl-wrap）は、画面の幅に合わせて広がり、最大 1440px（左右の余白 20px を含む）で
   止めて、左メニューの右の中央に置く。幅 900px 以下は左右の余白 16px。上下の余白は今のまま（app.css）。
   スクロールバーの場所はいつも取っておく（中身が短い画面でも、画面を移ったときに本文が左右にずれない）。
   今のままにするもの：app.css の .wrap（960px）、ログイン画面（body.oms-authed が付く前）、管理画面の狭い .wrap の画面（送信内容の確認・
   登録の完了。表示中の .screen の中が .wrap だけのときは、スクロールバーの場所も取らない）、お客様の画面（confirm.php はこのファイルを読まない）。
   印刷は変えない（@media screen の中だけ。一括支払いのご案内の印刷は billing_letter.php の @media print のまま） */
@media screen{
  html:has(> body.oms-authed):not(:has(.oms-main .screen:not([hidden]) > .wrap:not(.wide))){scrollbar-gutter:stable}
  body.oms-authed .oms-main .wrap.wide,
  body.oms-authed .oms-main .bl-wrap{max-width:1440px;padding-left:20px;padding-right:20px}
}
@media screen and (max-width:900px){
  body.oms-authed .oms-main .wrap.wide,
  body.oms-authed .oms-main .bl-wrap{padding-left:16px;padding-right:16px}
}

/* ログイン画面の「ログイン状態を保持する」と、その下の注意書き */
.oms-remember{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;cursor:pointer;width:fit-content}
.oms-remember input{width:18px;height:18px;margin:0;accent-color:var(--accent-deep)}
.oms-remember-note{margin:4px 0 0 26px;font-size:12px;color:var(--ink-3)}