:root {
    --bg: #eef3f9;
    --surface: #ffffff;
    --surface-2: #f5f8fc;
    --ink: #14202e;
    --muted: #5c6b7e;
    --line: #d9e2ee;
    --brand: #1d4ed8;          /* primary blue */
    --brand-strong: #1b3fae;
    --brand-ink: #ffffff;
    --accent: #2563eb;         /* links / secondary */
    --accent-soft: #e8f0fe;
    --sidebar-bg: #14213d;     /* deep navy */
    --sidebar-bg-2: #1b2c4d;
    --sidebar-ink: #e6ecf6;
    --sidebar-muted: rgba(230, 236, 246, .58);
    --danger: #c11f2f;
    --danger-bg: #fef2f3;
    --danger-line: #f5c2c7;
    --info-bg: #eaf1fe;
    --info-ink: #1b3fae;
    --radius: 12px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(20, 40, 80, .06), 0 4px 14px rgba(20, 40, 80, .06);
    --shadow-sm: 0 1px 2px rgba(20, 40, 80, .08);
    --tap: 44px;
    font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent); }
small { color: var(--muted); }
h1, h2, h3 { line-height: 1.3; }

/* ---------- 共通パーツ ---------- */
.eyebrow { font-size: .72rem; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin: 0 0 .25rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.danger { color: var(--danger); }
.center { text-align: center; }
.right { text-align: right; }
.section-title { font-size: 1rem; margin: 1.25rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 40px; border: 1px solid transparent; border-radius: 10px;
    padding: .55rem 1rem; font: inherit; font-size: .95rem; font-weight: 600;
    cursor: pointer; text-decoration: none; line-height: 1.2;
    transition: filter .12s ease, background-color .12s ease;
}
.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--primary:hover { background: var(--brand-strong); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.06); }
.btn--sm { min-height: 34px; padding: .35rem .7rem; font-size: .82rem; }
.btn--block { width: 100%; }
.inline-form { display: inline; }

.alert { border-radius: 10px; padding: .7rem .9rem; margin: .5rem 0 1rem; font-size: .9rem; }
.alert--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.alert--info { background: var(--info-bg); color: var(--info-ink); border: 1px solid #c3d6fb; }
.alert--warn { background: #fff8e8; color: #92400e; border: 1px solid #fde3ad; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.form-stack { display: flex; flex-direction: column; gap: .85rem; }
.form-stack--start { align-items: flex-start; }
.form-stack--start > .field { align-self: stretch; }
/* min-width: 0 が無いと、グリッド/フレックスの子は中身（selectの最長option等）の
   幅ぶん縮まずにはみ出す（お弁当式で既知のバグ。password-wrap input を参照）。
   .field 自体（grid/flexアイテム）と中の select/input/textarea の両方に必要。 */
.field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--muted); min-width: 0; }
/* radio/checkbox は対象外（.radio/.checkbox 側で見た目を作るため、テキスト入力用の
   border/padding/width:100% を当てると巨大なヒットボックスになってラベル文字が
   横に押し出される）。 */
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea, .form-grid textarea {
    font: inherit; color: var(--ink); padding: .6rem .7rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    width: 100%; min-width: 0; max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-grid textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* .field の外に置いた探す欄（管理画面のタイヤの移動）も、入力欄と同じ見た目・全幅にする */
.pt-tire-search { font: inherit; color: var(--ink); padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; width: 100%; min-width: 0; max-width: 100%; }
.pt-tire-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field em { color: var(--danger); font-style: normal; }
.password-wrap { display: flex; gap: .4rem; }
.password-wrap input { flex: 1; min-width: 0; }
.password-wrap button { border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); padding: 0 .8rem; cursor: pointer; font: inherit; font-size: .82rem; min-height: 40px; }
.checkbox, .radio { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--ink); }

/* ---------- 認証・インストール ---------- */
.auth-page { display: flex; min-height: 100vh; min-height: 100dvh; align-items: center; justify-content: center; padding: 1.5rem;
    background: linear-gradient(160deg, #1d4ed8 0%, #14213d 100%); }
.auth-shell { width: 100%; max-width: 420px; }
.auth-card { background: var(--surface); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(10, 20, 50, .28); padding: 1.75rem; }
.auth-card h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
/* ログイン画面のロゴ（白いカードの上なので元のロゴ画像をそのまま使う） */
.auth-card .auth-logo { margin: 0 0 1rem; }
.auth-card .auth-logo img { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
/* ログイン画面は見出しまわりと下のリンクを中央寄せ（入力欄は横幅いっぱいのまま） */
.auth-card > .eyebrow, .auth-card > h1, .auth-card > .auth-lead, .auth-card > p.small { text-align: center; }

/* ---------- アプリシェル（管理画面） ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.app-sidebar {
    width: 224px; flex-shrink: 0; display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--sidebar-bg-2) 0%, var(--sidebar-bg) 100%);
    color: var(--sidebar-ink); padding: .7rem .6rem;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.app-brand { display: block; padding: .85rem .7rem .85rem; color: inherit; text-decoration: none; }
/* 紺のメニューの上では、黒文字を白に置き換えた背景透過のロゴ（logo-white.png）を使う */
/* 控えめに：幅を抑えてメニューの中央に置く */
.app-brand__logo { display: block; width: 100%; max-width: 138px; height: auto; margin: 0 auto; }
.app-nav { display: flex; flex-direction: column; gap: .06rem; flex: 1; overflow-y: auto; min-height: 0; }
.app-nav__link {
    display: flex; align-items: center; gap: .6rem;
    color: rgba(230, 236, 246, .84); text-decoration: none; padding: .48rem .7rem;
    border-radius: 8px; font-size: .9rem; font-weight: 500;
}
.app-nav__link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.app-nav__link.is-active svg { opacity: 1; }
.app-nav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.app-nav__link.is-active { background: var(--brand); color: #fff; font-weight: 600; }

.app-sidebar__foot { margin-top: .5rem; padding: .55rem .55rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.app-user__name { display: block; font-weight: 600; font-size: .84rem; color: #fff; margin-bottom: .2rem; line-height: 1.3; }
.app-user__line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.app-user__line form { display: contents; }
.app-user__role { font-size: .72rem; color: var(--sidebar-muted); }
.app-logout {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .28rem .6rem; font: inherit; font-size: .74rem; font-weight: 600;
    color: #fff; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.app-logout:hover { background: rgba(255, 255, 255, .18); }
.app-logout--block { display: flex; width: 100%; padding: .45rem; font-size: .82rem; }

.app-overlay { display: none; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* デスクトップでは上部バーは不要（サイドバー常時表示＋各ページに見出しがある）。
   モバイルではハンバーガー用に下の @media で復活させる。 */
.app-topbar { display: none; }
.app-topbar__title { font-weight: 600; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar__menu { display: none; }

.app-content { padding: 1.5rem; max-width: 1360px; width: 100%; margin: 0 auto; }
.page-intro h1 { font-size: 1.35rem; margin: 0 0 .25rem; }

/* ---------- ダッシュボード統計 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); display: block; text-decoration: none; color: inherit; }
.stat-card:hover { border-color: var(--brand); }
.stat-card__label { font-size: .8rem; color: var(--muted); }
.stat-card__value { display: block; font-size: 1.8rem; font-weight: 700; margin-top: .3rem; color: var(--ink); }
.stat-card__value small { font-size: .8rem; font-weight: 400; color: var(--muted); margin-left: .3rem; }
.stat-card__sub { display: block; margin-top: .4rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.card + .card { margin-top: 1rem; }
.card--warn { border-color: #fbcf8b; }
.card--danger { border-color: var(--danger-line); }
.roadmap { margin: .5rem 0 0; padding-left: 1.2rem; }
.roadmap li { margin: .35rem 0; }

/* ---------- ツールバー・検索 ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.toolbar h1 { font-size: 1.35rem; margin: 0; }
.toolbar--sub { margin-top: 1.75rem; }
.toolbar--sub h2 { font-size: 1.05rem; margin: 0; }
.toolbar__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.searchbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.searchbar input[type="search"], .searchbar input[type="text"] { flex: 1; min-width: 160px; max-width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.searchbar select { min-width: 0; max-width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: #fff; }

/* ---------- テーブル ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .78rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.table td.right, .table th.right { text-align: right; }
.table .center { text-align: center; padding: 1.25rem; }
.table tbody tr:hover { background: var(--surface-2); }
.table tfoot th, .table tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
.table .strong { font-weight: 700; }
/* 一覧の「1件2行」表示：関連する2項目を1つのセルに上下で並べて列数（横幅）を抑える。2行目も通常の文字で見落とさないようにする */
.table .line2 { display: block; margin-top: .25rem; }

/* ---------- バッジ ---------- */
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.badge--green { background: #e2f4ea; color: #2c6b4c; }     /* 受付済み・契約中：控えめな淡い緑 */
.badge--yellow { background: #fdf0c4; color: #7c5310; }
.badge--orange { background: #ffe6cf; color: #9a3412; }
.badge--red { background: #fcdcdc; color: #991b1b; }
.badge--blue { background: #cdddfb; color: #1b3fae; }      /* 完了：青 */
.badge--sky { background: #e6f1fd; color: #2f6fd6; }       /* 作業中：薄い青 */
.badge--purple { background: #e5e0fd; color: #5b3fd0; }
.badge--pink { background: #fbdcec; color: #9d174d; }
.badge--gray { background: #e9eef4; color: #46566a; }
/* 現場に出る依頼（配達・回収）は塗りつぶしで目立たせる */
.badge--delivery { background: #db2777; color: #fff; }
.badge--pickup { background: #4ade80; color: #064e2b; }

/* ---------- 詳細リスト ---------- */
.detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1.5rem; margin: 0; }
.detail-list > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.detail-list__full { grid-column: 1 / -1; }
.detail-list dt { font-size: .76rem; color: var(--muted); }
.detail-list dd { margin: 0; word-break: break-word; }

/* ---------- フォーム ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem 1.25rem; }
.form-grid .field--full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.statusbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.postal-lookup__row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.postal-lookup__row input { max-width: 10rem; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.pagination__link { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--ink); min-height: 36px; display: inline-flex; align-items: center; background: var(--surface); }
.pagination__link:hover { background: var(--surface-2); }
.pagination__link.is-disabled { color: var(--muted); opacity: .45; pointer-events: none; }
.pagination__status { color: var(--muted); font-size: .84rem; text-align: center; }
.pagination__status small { display: block; font-size: .74rem; }

/* ---------- 写真グリッド（管理画面） ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin: .35rem 0 1rem; }
.photo-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }

/* ---------- 請求書アクション ---------- */
.invoice-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.invoice-actions select { padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* ---------- 請求書 明細プレビュー（内訳） ---------- */
.invoice-breakdown { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: .6rem 0; overflow: hidden; }
.invoice-breakdown > summary { cursor: pointer; padding: .7rem .85rem; background: var(--surface-2); font-size: .92rem; list-style: none; }
.invoice-breakdown > summary::-webkit-details-marker { display: none; }
.invoice-breakdown > summary::before { content: "▸"; display: inline-block; margin-right: .5rem; color: var(--muted); transition: transform .12s ease; }
.invoice-breakdown[open] > summary::before { transform: rotate(90deg); }
.invoice-breakdown > .table-scroll { padding: 0 .5rem .5rem; }
.invoice-breakdown .table { font-size: .84rem; }
.invoice-breakdown .table th, .invoice-breakdown .table td { white-space: nowrap; }
.invoice-breakdown .table tr.is-warn td { background: #fff4e5; }

/* ---------- 請求書ドキュメント ---------- */
.invoice-print-area { background: #fff; }
.invoice-doc { color: #111; font-size: .86rem; }
.invoice-page { background: #fff; padding: 2rem; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 1rem; overflow-x: auto; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.invoice-title { font-size: 1.8rem; letter-spacing: .3em; margin: 0; }
.invoice-meta { border-collapse: collapse; }
.invoice-meta th, .invoice-meta td { border: 1px solid #ccc; padding: .25rem .7rem; font-size: .8rem; text-align: left; white-space: nowrap; }
.invoice-meta th { background: #eef2f7; font-weight: 500; }
.invoice-parties { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.invoice-parties .strong, .strong { font-weight: 700; }
.invoice-parties .right { text-align: right; }
.invoice-parties p { margin: .1rem 0; }
.invoice-subject { margin: 0 0 1rem; }
.invoice-total-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.invoice-total { border-collapse: collapse; flex: 1; min-width: 220px; }
.invoice-total th { background: #eef2f7; border: 1px solid #ccc; padding: .8rem 1rem; text-align: left; width: 34%; }
.invoice-total td { border: 1px solid #ccc; padding: .8rem 1rem; text-align: right; font-size: 1.4rem; font-weight: 700; }
.invoice-items { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.invoice-items th, .invoice-items td { border: 1px solid #ccc; padding: .4rem .6rem; }
.invoice-items thead th { background: #d7e4ff; }
.invoice-summary { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.invoice-summary table { border-collapse: collapse; min-width: 320px; }
.invoice-summary th, .invoice-summary td { border: 1px solid #ccc; padding: .35rem .7rem; }
.invoice-summary th { background: #eef2f7; text-align: left; }
.invoice-box { border: 1px solid #ccc; padding: .7rem; margin-bottom: 1rem; }
.invoice-box--inline { display: inline-block; }
.invoice-store-total { font-size: 1.3rem; font-weight: 700; border-bottom: 2px solid #333; display: inline-block; padding-bottom: .2rem; margin: 0 0 1rem; }
.invoice-detail-table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.invoice-detail-table th, .invoice-detail-table td { border: 1px solid #ccc; padding: .25rem .4rem; white-space: nowrap; }
.invoice-detail-table thead th { background: #d7e4ff; }
.invoice-doc .center { text-align: center; }
.invoice-doc .right { text-align: right; }
.invoice-doc .small { font-size: .76rem; }

/* ================================================================ *
 * レスポンシブ（管理画面）
 * ================================================================ */
@media (max-width: 899px) {
    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; height: 100%; z-index: 60;
        width: 264px; max-width: 84vw; transform: translateX(-100%);
        transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .3);
    }
    .app-shell.is-nav-open .app-sidebar { transform: none; }
    .app-shell.is-nav-open .app-overlay { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 18, 35, .45); border: 0; padding: 0; }
    /* モバイルだけ上部バーを表示（ハンバーガー＋ページ名） */
    .app-topbar {
        display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: .75rem;
        background: var(--surface); border-bottom: 1px solid var(--line); padding: .55rem .9rem; min-height: 52px;
    }
    .app-topbar__menu {
        display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 42px; height: 42px; padding: 0 10px; border: 1px solid var(--line);
        border-radius: 9px; background: var(--surface); cursor: pointer; flex-shrink: 0;
    }
    .app-topbar__menu span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
    .app-content { padding: 1rem; }
}

@media (max-width: 720px) {
    .detail-list, .form-grid { grid-template-columns: 1fr; }
    .toolbar h1 { font-size: 1.2rem; }
    /* 幅の広い表はカードごと横スクロールで守る（テーブル構造は維持） */
    .card:has(> .table), .card:has(> form > .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card > .table th, .card > .table td,
    .card > form > .table th, .card > form > .table td { white-space: nowrap; }
    .stat-card__value { font-size: 1.55rem; }
    .btn { min-height: var(--tap); }
    .btn--sm { min-height: 36px; }
    /* iOS のフォーカス時ズーム防止 */
    .field input, .field select, .field textarea,
    .searchbar input, .searchbar select { font-size: 16px; }
}

@media (max-width: 400px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .app-content { padding: .8rem; }
}

/* ---------- 印刷（A4縦・請求書のみ出力） ---------- */
@media print {
    .app-sidebar, .app-topbar, .app-overlay, .print-hidden, .toolbar, nav { display: none !important; }
    .app-shell, .app-main, .app-content { display: block; margin: 0; padding: 0; max-width: none; }
    /* 画面の背景色が紙に出ないように（中身の短いページの下に色が付いていた） */
    html, body, .app-shell, .app-main, .app-content { background: #fff !important; }
    .invoice-page { border: 0; border-radius: 0; padding: 12mm; margin: 0; page-break-after: always; overflow: visible; }
    /* 明細は12列あるので、A4 縦の幅に収める。折り返すのは事業所・お客様名・車種・ナンバー・担当者だけ
       （日付・サイズ・本数・契約・金額は折り返さない） */
    .invoice-detail-table { font-size: .68rem; }
    .invoice-detail-table th, .invoice-detail-table td { padding: .2rem .3rem; }
    .invoice-detail-table td:nth-child(2), .invoice-detail-table td:nth-child(3), .invoice-detail-table td:nth-child(4),
    .invoice-detail-table td:nth-child(5), .invoice-detail-table td:nth-child(9) { white-space: normal; overflow-wrap: break-word; }
    .invoice-page:last-child { page-break-after: auto; }
    .invoice-title { font-size: 1.5rem; }
    /* 表紙が1枚に収まるように（店舗が多い月は振込先が2枚目に押し出されていた） */
    .invoice-box p { margin: .15rem 0; }
    .invoice-items th, .invoice-items td { padding: .3rem .6rem; }
    @page { size: A4 portrait; margin: 0; }
}

/* ================================================================ *
 * 現場担当者ポータル / 顧客ポータル（スマホ最適化シェル wk-*）
 * ================================================================ */
.wk-page { background: var(--bg); margin: 0; padding-bottom: 3rem; }
.wk-topbar {
    position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; background: var(--brand); color: #fff; padding: .7rem 1rem;
    padding-top: calc(.7rem + env(safe-area-inset-top));
}
.wk-brand { font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none; }
.wk-brand small { display: block; color: rgba(255, 255, 255, .78); font-size: .68rem; font-weight: 500; line-height: 1.2; }
.wk-user { display: flex; align-items: center; gap: .5rem; font-size: .8rem; flex-shrink: 0; }
.wk-user > span { color: rgba(255, 255, 255, .9); }
.wk-topbar .btn { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .38); }
.wk-topbar .btn:hover { background: rgba(255, 255, 255, .24); }

/* 下部固定タブナビ（現場担当者ポータル・顧客ポータル共通、旧システム風） */
.wk-tabnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(20, 40, 80, .08);
}
.wk-tabnav__link {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: .5rem .2rem .5rem; min-height: 56px;
    color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 600;
}
.wk-tabnav__link svg { width: 25px; height: 25px; }
.wk-tabnav__link.is-active { color: var(--brand); }
.wk-tabnav__link.is-active svg { stroke-width: 2.6; }
.wk-tabnav__link:active { background: var(--surface-2); }
.wk-page--tabbed .wk-main { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

.wk-main { max-width: 720px; margin: 0 auto; padding: .9rem; }
.wk-title { font-size: 1.15rem; margin: .3rem 0 .8rem; }
.wk-back { margin: 0 0 .6rem; font-size: .9rem; }
.wk-back a { text-decoration: none; }

.wk-group-label { margin: 1.1rem 0 .5rem; font-weight: 700; font-size: .92rem; color: var(--ink); }
.wk-group-label.is-overdue { color: var(--danger); }
.wk-group-label small { color: var(--muted); font-weight: 400; }

.wk-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .9rem; margin-bottom: .6rem; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.wk-card--static { cursor: default; }
.wk-card__head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .45rem; font-size: .82rem; color: var(--muted); }
.wk-card__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.wk-card__customer { font-weight: 700; font-size: 1rem; }
.wk-card__tire { font-size: .9rem; margin-top: .15rem; }
.wk-card__meta { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.wk-card__notes { margin-top: .4rem; font-size: .82rem; background: var(--surface-2); border-radius: 8px; padding: .4rem .55rem; }
.wk-tag { background: var(--accent-soft); color: var(--brand-strong); border-radius: 6px; padding: .05rem .4rem; font-size: .76rem; font-weight: 600; }

.wk-empty { text-align: center; color: var(--muted); }

.wk-search, .wk-toggle { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.wk-search input[type="search"] { flex: 1; min-width: 160px; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 16px; }
.wk-toggle a { flex: 1; text-align: center; padding: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 600; min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.wk-toggle a.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.wk-page .card { margin-bottom: .8rem; }
.wk-page .field { font-size: .82rem; margin-bottom: .7rem; }
.wk-page .field input, .wk-page .field select, .wk-page .field textarea { font: inherit; font-size: 16px; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); width: 100%; }
.wk-page .field input[type="radio"], .wk-page .field input[type="checkbox"] { width: auto; padding: 0; }
.wk-page .field .radio, .wk-page .field .checkbox { flex-direction: row; }
.wk-page .btn--block { width: 100%; padding: .85rem; font-size: 1rem; margin-top: .3rem; min-height: 48px; }
.wk-hint { color: var(--muted); font-size: .76rem; }

/* 現場：作業写真アップロード（カメラ／ファイルでボタンを分ける） */
.wk-photo-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin: .15rem 0 .35rem; }
.wk-photo-pick .btn { flex: 1 1 8rem; min-height: 48px; }
.wk-page .field .wk-photo-pick input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }

.wk-shelf-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .55rem; }
.wk-shelf-form input[type="text"] { flex: 1; min-width: 0; padding: .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; }

.wk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .5rem; margin: .3rem 0 .6rem; }
.wk-photos img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }

.wk-page .table { font-size: .84rem; }
.wk-page .card:has(> .table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 顧客ポータル（依頼者＝店舗）: 少し明るいブルー ---------- */
.pt-page .wk-topbar { background: var(--accent); }
.pt-page .wk-tabnav__link.is-active { color: var(--accent); }
.pt-page .wk-toggle a.is-active { background: var(--accent); border-color: var(--accent); }
/* :not(.is-active) が無いと、上の白文字指定より詳細度で勝ってしまい「進行中」ボタンの
   文字が背景色と同化して読めなくなる（既存バグ）。 */
.pt-page a:not(.btn):not(.wk-tabnav__link):not(.wk-brand):not(.pt-renewal-banner):not(.is-active):not(.app-nav__link):not(.pt-sidebar__brand):not(.stat-card):not(.wk-icon-btn) { color: var(--accent); }

.pt-renewal-banner { display: block; text-decoration: none; font-size: .88rem; }
.pt-renewal-banner strong { font-weight: 700; }

.pt-pick { display: flex; align-items: flex-start; gap: .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem; margin-bottom: .5rem; font-size: .86rem; }
.pt-pick input { margin-top: .2rem; }
.pt-pick.is-disabled { opacity: .55; }
.pt-pick strong { font-weight: 700; }

/* 依頼者（店舗）はPC操作の可能性も高く、社外の非技術者が使う前提のため、
   現場アプリより一回り大きい文字・タップ領域・余白にする（pt-page限定）。 */
.pt-page .wk-title { font-size: 1.3rem; }
.pt-page .wk-topbar .btn { min-height: 40px; padding: .5rem .85rem; font-size: .85rem; }
.pt-page .card { padding: 1.1rem 1.2rem; }
.pt-page .field { font-size: .95rem; margin-bottom: .9rem; }
.pt-page .field > span { font-weight: 600; color: var(--ink); margin-bottom: .1rem; }
.pt-page .field input, .pt-page .field select, .pt-page .field textarea {
    padding: .85rem .9rem; font-size: 16px;
}
.pt-page .field .radio { padding: .5rem 0; font-size: 1rem; gap: .6rem; }
.pt-page .field input[type="radio"], .pt-page .field input[type="checkbox"] { width: 20px; height: 20px; }
.pt-page .btn--block { font-size: 1.05rem; padding: 1rem; min-height: 52px; }
.pt-page .wk-hint { font-size: .82rem; }

/* 依頼フォーム「タイヤを選ぶ」：件数が多い店舗でも検索で絞り込める一覧（wk-tabnav同様、
   ネイティブ select の代わりにカード一覧＋検索ボックスにして見やすくする）。 */
.pt-tire-search { margin-bottom: .5rem; }
.pt-tire-list { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 46vh; overflow-y: auto; background: #fff; -webkit-overflow-scrolling: touch; }
.pt-tire-card { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.pt-tire-card:last-child { border-bottom: none; }
.pt-tire-card:hover { background: var(--surface-2); }
.pt-tire-card:has(input:checked) { background: var(--accent-soft); }
/* 依頼済み（進行中の依頼がある）タイヤは選べない */
.pt-tire-card.is-disabled { cursor: not-allowed; opacity: .6; }
.pt-tire-card.is-disabled:hover { background: transparent; }
.pt-tire-card input[type="radio"] { flex-shrink: 0; margin: 0; }
.pt-tire-card__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pt-tire-card__body strong { font-size: .95rem; font-weight: 700; color: var(--ink); }
.pt-tire-card__body span { font-size: .85rem; color: var(--muted); }

/* 回収の2段階質問から決まった扱いを、送信前に言葉で確認するための一文 */
.pt-guided-summary { margin: 0 0 .3rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: .9rem; font-weight: 600; }

.pt-change-report { margin-top: .8rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: .5rem; }
.pt-change-report__title { font-weight: 600; color: var(--ink); font-size: .88rem; }
.pt-change-report input[type="text"] { margin-top: -.2rem; }

/* 登録内容の確認：1項目ごとに「現在の登録・入力欄・変更なし」を縦に並べる */
.pt-confirm-row { display: flex; flex-direction: column; gap: .25rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.pt-confirm-row + .pt-confirm-row { padding-top: .55rem; }
.pt-confirm-row > span:first-child { font-weight: 600; color: var(--ink); }
.pt-confirm-row .checkbox { align-self: flex-start; }
.pt-page .field .pt-confirm-row input[type="text"]:disabled { background: var(--line); color: var(--muted); }

/* デスクトップでは横幅いっぱいに広がりすぎないよう、本文と下部タブの幅を揃えて中央寄せにする */
@media (min-width: 640px) {
    .pt-page .wk-main { max-width: 640px; padding: 1.5rem 1.2rem; }
    .pt-page .wk-tabnav {
        left: 50%; right: auto; width: 100%; max-width: 640px; transform: translateX(-50%);
        border-left: 1px solid var(--line); border-right: 1px solid var(--line);
        border-radius: 14px 14px 0 0; overflow: hidden;
    }
}

/* 店舗ポータル：似ているお客様の候補（名前＋切り替えボタン） */
.pt-candidates { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pt-candidates li { display: flex; flex-direction: column; gap: .35rem; padding: .5rem .6rem; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 8px; }
.pt-candidates__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* 保管場所の入力部品（列・段・番号のプルダウン） */
.storage-picker { display: flex; flex-direction: column; gap: .35rem; }
.storage-picker__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.storage-picker__row select { flex: 1 1 6rem; min-width: 0; }
.storage-picker__warn { color: var(--danger); }

/* LINE通知設定：朝のまとめのプレビュー */
.line-preview { white-space: pre-wrap; background: var(--bg, #f5f7fb); border: 1px solid var(--line); border-radius: 8px; padding: .75rem; font: inherit; font-size: .9rem; }

/* 現場：配達の手順（①積み込み → ②お届け・完了） */
.wk-steps { list-style: none; display: flex; gap: .4rem; margin: 0 0 .75rem; padding: 0; }
.wk-steps li { flex: 1; text-align: center; padding: .55rem .4rem; border-radius: 8px; background: var(--surface, #fff); border: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.wk-steps li span { font-weight: 700; }
.wk-steps li.is-current { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
.wk-steps li.is-done { color: var(--muted); text-decoration: line-through; }

/* 顧客のカルテ：各まとまりへのジャンプ */
.karte-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }
.karte-nav a { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface, #fff); font-size: .85rem; text-decoration: none; }

/* 依頼詳細：状況の変更（完了／キャンセルのボタン） */
.status-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.status-actions__complete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.status-actions__complete .field { margin: 0; }

/* 依頼のキャンセル（編集の取り消しと区別するため、枠と見出しで分ける） */
.request-cancel { margin-top: 1rem; padding: .85rem; border: 1px solid var(--danger-line, #f3c2c2); border-radius: 10px; background: var(--danger-bg, #fff5f5); }
.request-cancel__title { margin: 0 0 .35rem; font-size: .95rem; color: var(--danger); }
.request-cancel .field { margin-bottom: .5rem; }

/* 左メニューのまとまり見出し（業務管理／請求管理／システム設定） */
/* まとまりの見出し：上に区切り線を引き、太い文字で「見出し」と分かるようにする */
.app-nav__section {
    display: block; margin: .8rem .2rem .3rem; padding: .85rem .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .6);
}
/* 先頭の「業務管理」もロゴとの間に区切り線を引く（ロゴ下の余白と線の下の余白をそろえる） */
.app-nav > .app-nav__section:first-child { margin-top: 0; }

/* 左メニュー：開閉できるまとまり（請求管理・システム設定） */
.app-nav__group { display: flex; flex-direction: column; gap: .06rem; }
.app-nav__toggle { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.app-nav__toggle::-webkit-details-marker { display: none; }
/* 開閉の目印は見出し右端の矢印（閉じているとき右向き・開いているとき下向き） */
.app-nav__toggle::after {
    content: ''; width: .42rem; height: .42rem; margin-right: .35rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s;
}
.app-nav__group[open] > .app-nav__toggle::after { transform: rotate(45deg); }
.app-nav__toggle:hover { color: #fff; }


/* ---- 一覧の絞り込み欄（上段：検索＋ボタン／下段：詳しい条件を格子状に） ---- */
.filter-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1rem; }
.filter-panel__main { display: flex; gap: .5rem; align-items: center; }
.filter-panel__main input[type="search"] { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); }
.filter-panel__main input[type="search"]:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.filter-panel__main .btn { flex: 0 0 auto; white-space: nowrap; }
.filter-panel__more { margin-top: .7rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.filter-panel__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 600; color: var(--brand); user-select: none; }
.filter-panel__more > summary::-webkit-details-marker { display: none; }
.filter-panel__more > summary::before { content: '▸'; font-size: .75rem; transition: transform .15s; }
.filter-panel__more[open] > summary::before { transform: rotate(90deg); }
.filter-panel__badge { font-size: .72rem; font-weight: 600; color: #fff; background: var(--brand); border-radius: 999px; padding: .05rem .5rem; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem .9rem; margin-top: .75rem; }
.filter-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; margin: 0; }
.filter-field__label { font-size: .75rem; font-weight: 600; color: var(--muted); }
.filter-field select, .filter-field input[type="text"], .filter-field input[type="date"] { width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); min-width: 0; }
.filter-field--range { grid-column: span 2; }
.filter-field__range { display: flex; align-items: center; gap: .4rem; }
.filter-field__range input { flex: 1; }
.filter-field__range span { color: var(--muted); }
.filter-field--check { justify-content: flex-end; }
.filter-field--check .checkbox { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; }
.filter-panel__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .85rem; }
@media (max-width: 720px) {
    .filter-panel { padding: .75rem; }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .filter-field--range { grid-column: 1 / -1; }
    .filter-panel__main { flex-wrap: wrap; }
    .filter-panel__main input[type="search"] { flex: 1 1 100%; }
    .filter-panel__main .btn { flex: 1 1 0; }
    .filter-panel__main input[type="search"], .filter-field select, .filter-field input { font-size: 16px; }
    .filter-panel__actions .btn { flex: 1; }
}
@media (max-width: 380px) {
    .filter-grid { grid-template-columns: 1fr; }
}

/* ---- ログイン画面の「スマホのホーム画面に追加」案内（includes/install-guide.php） ---- */
.install-guide { margin-top: 1rem; background: var(--surface); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(10, 20, 50, .18); padding: 1.1rem 1.25rem; }
.install-guide h2 { margin: 0 0 .35rem; font-size: 1rem; }
.install-guide .btn { margin-top: .4rem; }
.install-guide__steps { margin: .5rem 0 0; padding-left: 1.3rem; line-height: 1.6; }
.install-guide__steps li + li { margin-top: .45rem; }
.install-guide__icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; color: var(--brand); }

/* ================================================================ *
 * 予定表（includes/schedule-board.php）：今日・明日の店舗別まとめ＋月カレンダー
 * ================================================================ */
.wk-main--wide { max-width: 1280px; }
.sched-alert a { margin-left: .4rem; }
.sched-days { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (min-width: 900px) { .sched-days { grid-template-columns: 1fr 1fr; } .sched-days--single { grid-template-columns: 1fr; } }
.sched-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-sm); min-width: 0; }
.sched-day__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.sched-day__head h2 { margin: 0; font-size: 1.1rem; }
.sched-day__counts { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.sched-day__closed { margin: 0 0 .6rem; font-size: .85rem; color: var(--danger); font-weight: 600; }
.sched-fold > summary { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; cursor: pointer; padding: .6rem .8rem; margin-bottom: .6rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sched-fold__total strong { font-size: 1.15rem; }
.sched-fold[open] .sched-fold__hint { display: none; }
.sched-stores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.sched-days--single .sched-stores { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sched-store { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sched-store__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .5rem .7rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.sched-store__counts { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-item + .sched-item { border-top: 1px solid var(--line); }
.sched-item a { display: flex; gap: .55rem; align-items: flex-start; padding: .55rem .7rem; color: inherit; text-decoration: none; }
.sched-item a:hover { background: var(--surface-2); }
.sched-item.is-done { opacity: .5; }
.sched-item__main { display: flex; flex-direction: column; min-width: 0; }
.sched-item__customer { font-weight: 700; font-size: .92rem; }
.sched-item__sub { font-size: .82rem; color: var(--muted); }
.sched-item__loc { font-size: .82rem; font-weight: 700; color: var(--brand-strong); }

.sched-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
/* 年月を中央に、前月を左端・翌月を右端に置く（今月以外のときは年月の下に「今月に戻る」） */
.sched-cal__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.sched-cal__head h2 { margin: 0; font-size: 1.1rem; text-align: center; white-space: nowrap; }
.sched-cal__title { text-align: center; }
.sched-cal__today { display: inline-block; margin-top: .15rem; font-size: .8rem; }
.sched-cal__nav { display: flex; gap: .4rem; }
.sched-cal__nav--end { justify-content: flex-end; }
.sched-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sched-cal__dow { text-align: center; font-size: .76rem; font-weight: 700; color: var(--muted); padding: .2rem 0; }
.sched-cal__cell { min-height: 76px; border: 1px solid var(--line); border-radius: 8px; padding: .3rem .35rem; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; color: inherit; text-decoration: none; background: var(--surface); min-width: 0; }
.sched-cal__cell:hover { border-color: var(--brand); }
.sched-cal__cell.is-blank { border: 0; background: transparent; }
.sched-cal__cell.is-closed { background: var(--surface-2); }
.sched-cal__cell.is-today { border: 2px solid var(--brand); }
.sched-cal__cell.is-selected { box-shadow: 0 0 0 3px rgba(29, 78, 216, .25); }
.sched-cal__cell.is-overdue .sched-cal__date { color: var(--danger); }
.sched-cal__date { font-size: .8rem; font-weight: 700; }
.sched-cal__date small { margin-left: .25rem; font-weight: 600; color: var(--muted); font-size: .68rem; }
.sched-cal__chip { font-size: .7rem; padding: .05rem .4rem; }
.sched-cal__done { font-size: .68rem; color: var(--muted); }
.sched-cal__legend { margin: .6rem 0 0; }
@media (max-width: 600px) {
    .sched-cal { padding: .6rem .5rem; }
    .sched-cal__grid { gap: 2px; }
    .sched-cal__cell { min-height: 58px; padding: .2rem; }
    .sched-cal__chip { font-size: .62rem; padding: 0 .25rem; }
}
.sched-day.is-highlight { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.sched-day__label { display: block; font-size: .72rem; font-weight: 700; color: var(--brand); letter-spacing: .04em; }
.sched-day__close { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; margin-left: .2rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 1.1rem; line-height: 1; }
.sched-day__close:hover { color: var(--ink); border-color: var(--muted); }
/* 予定表：「選択した日」の欄が出るとき・消えるときの動き（動きを減らす設定の端末では動かさない） */
@keyframes sched-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sched-leave { to { opacity: 0; transform: translateY(6px) scale(.99); } }
.sched-pop { animation: sched-pop .24s cubic-bezier(.2, .8, .2, 1); }
#sched-selected.is-loading { opacity: .55; transition: opacity .15s; }
.sched-cal__cell { transition: box-shadow .15s, border-color .15s; }
.sched-cal.is-loading .sched-cal__grid { opacity: .55; transition: opacity .15s; }
/* 予定表：今日・明日以外の日を押したときに前面に出すウィンドウ（assets/js/app.js） */
.sched-modal { border: 0; padding: 0; background: transparent; width: min(440px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(10, 20, 50, .35); }
.sched-modal::backdrop { background: rgba(10, 18, 35, .5); }
.sched-modal > .sched-day { margin: 0; border-width: 0; box-shadow: none; }
.sched-modal__loading { min-height: 6rem; display: flex; align-items: center; justify-content: center; }
.sched-modal.is-opening { animation: sched-pop .24s cubic-bezier(.2, .8, .2, 1); }
.sched-modal.is-opening::backdrop { animation: sched-fade .2s ease-out; }
.sched-modal.is-closing { animation: sched-leave .16s ease-in forwards; }
.sched-modal.is-closing::backdrop { animation: sched-fade .16s ease-in reverse forwards; }
@keyframes sched-fade { from { opacity: 0; } to { opacity: 1; } }
html.sched-modal-open { overflow: hidden; }
/* ポップアップは縦型：店舗ごとの枠を縦1列に並べ、日付・件数・×の見出しはスクロールしても上に残す */
.sched-modal .sched-stores { grid-template-columns: 1fr; gap: .6rem; }
.sched-modal .sched-day__head { position: sticky; top: 0; z-index: 1; background: var(--surface); margin: -.9rem -1rem .7rem; padding: .9rem 1rem .7rem; border-bottom: 1px solid var(--line); }
.sched-modal .sched-day__counts { justify-content: flex-start; }
/* 店舗ポータルの回収：選んだお客様の「どのタイヤを回収しますか？」 */
.pt-pickup-choice { margin-top: .8rem; }
.pt-pickup-choice__title { display: block; font-weight: 700; margin-bottom: .35rem; }
.pt-pickup-choice .pt-tire-list { max-height: none; }
.pt-pickup-choice .pt-tire-card.is-disabled { opacity: .55; }
.pt-pickup-choice__add strong { color: var(--brand-strong); }
.pt-pickup-choice__note { display: block; margin-top: .4rem; font-weight: 600; }
.pt-name-change { margin-top: .5rem; padding: .55rem .7rem; border: 1px solid var(--warn, #f59e0b); border-radius: var(--radius-sm); background: #fffbeb; }
.pt-name-change > span { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .2rem; }
/* 登録内容の確認：「変更なし／変更あり」を横に並べる */
.pt-confirm-choice { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .15rem 0 .2rem; }
.pt-confirm-choice .radio { margin: 0; }

/* ================================================================ *
 * 店舗ポータル：メイン画面（portal/index.php）とメニュー（スマホは下、PCは上）
 * ================================================================ */
.pt-due__left { color: #b45309; margin-left: .35rem; }
.pt-due__item.is-overdue .pt-due__left, .pt-due__left.is-overdue { color: var(--danger); }

/* ================================================================ *
 * 店舗ポータル・現場用の PC（900px 以上）：左サイドバー＋本文（管理画面と同じ作り）。スマホは従来どおり。
 *   本文は最大 1360px で、広い画面では中央に置く。表・カードは本文の幅いっぱい、入力欄は 560px まで。
 * ================================================================ */
.pt-pc-only { display: none; }
.pt-sidebar { display: none; }
@media (min-width: 900px) {
    .pt-pc-only { display: block; }
    .pt-sp-only { display: none; }

    /* 共通の枠：左サイドバー分を空け、スマホ用のヘッダー・下部メニューは出さない */
    .pt-page, .wr-page { padding-left: 236px; }
    .pt-page .wk-topbar, .pt-page .pt-nav, .wr-page .wk-topbar, .wr-page .wk-tabnav { display: none; }
    .pt-page .wk-main, .pt-page--wide .wk-main, .wr-page .wk-main, .wr-page .wk-main--wide { max-width: 1680px; margin: 0 auto; padding: 1.8rem clamp(1.4rem, 3vw, 3rem) 3rem; }
    .pt-page.wk-page--tabbed .wk-main { padding-bottom: 2.5rem; }
    .wr-page.wk-page--tabbed .wk-main { padding-bottom: 3rem; }
    .pt-page .wk-title, .wr-page .wk-title { font-size: 1.45rem; margin: 0 0 .9rem; }
    .pt-page .card.pt-pc-only, .wr-page .card.pt-pc-only { padding: .4rem .6rem; }

    /* サイドバー（店舗ポータル。現場用も同じ部品を使う） */
    .pt-sidebar { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 236px; height: auto; z-index: 40; }
    .pt-sidebar__brand { display: block; padding: 1rem .8rem 1.1rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-weight: 700; font-size: 1.02rem; }
    .pt-sidebar__brand small { display: block; margin-top: .25rem; font-size: .78rem; font-weight: 500; color: var(--sidebar-muted); }
    .pt-page .pt-sidebar a.app-nav__link { color: rgba(230, 236, 246, .84); }
    .pt-page .pt-sidebar a.app-nav__link.is-active { color: #fff; }
    .pt-page .pt-sidebar .app-nav__link svg { width: 18px; height: 18px; }
    .pt-sidebar__count { margin-left: auto; font-style: normal; background: var(--danger); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .5rem; }
    .pt-sidebar .app-sidebar__foot { display: flex; flex-direction: column; gap: .4rem; padding-bottom: .6rem; }
    .pt-sidebar .app-sidebar__foot form { display: block; }
    .pt-sidebar .app-logout { width: 100%; }

    /* 店舗ポータルの入力欄：スマホ向けに大きくしていた文字・入力欄・ボタンを PC では標準の大きさに */
    .pt-page .field { font-size: .92rem; }
    .pt-page .field input, .pt-page .field select, .pt-page .field textarea { padding: .6rem .75rem; font-size: .95rem; }
    .pt-page .field input[type="text"], .pt-page .field input[type="email"], .pt-page .field input[type="password"], .pt-page .field input[type="tel"], .pt-page .field input[type="date"], .pt-page .field input[type="number"], .pt-page .field select, .pt-page .field textarea { width: 100%; max-width: 560px; }
    .pt-page .field .radio { padding: .3rem 0; font-size: .95rem; }
    .pt-page .field input[type="radio"], .pt-page .field input[type="checkbox"] { width: 17px; height: 17px; }
    .pt-page .btn--block { width: auto; min-width: 260px; min-height: 44px; padding: .7rem 1.6rem; font-size: 1rem; }
    .pt-page .pt-tire-list { max-height: 420px; }
    .pt-page .wk-search input[type="search"] { font-size: .95rem; padding: .55rem .75rem; }
    .pt-page .wk-toggle a { min-height: 38px; padding: .4rem; }
    /* 更新・廃棄の依頼：タイヤの選択肢は2列に */
    .pt-page form.card .field:has(> .pt-pick) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
    .pt-page form.card .field:has(> .pt-pick) > span { grid-column: 1 / -1; }
    /* 表 */
    .pt-page .pt-pc-only .table td, .pt-page .pt-pc-only .table th { white-space: nowrap; }
    .pt-page .pt-pc-only .table td:nth-child(2), .pt-page .pt-pc-only .table td:nth-child(3) { white-space: normal; }

    /* 店舗ポータルのダッシュボード */
    .pt-page a.stat-card { color: inherit; }
    /* 「進行中の依頼」「最近の完了」は同じ高さに並べる */
    /* ダッシュボードの表は折り返して枠内に収める（横スクロールを出さない） */

    /* 依頼を作成（店舗ポータル・管理画面）：お客様・タイヤの選択肢は横に並べ、入力欄は読みやすい幅に */
    .pt-request-form .pt-tire-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; gap: .5rem; padding: .5rem; background: var(--surface-2); }
    .pt-request-form .pt-tire-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
    .pt-request-form .pt-tire-card:last-child { border-bottom: 1px solid var(--line); }
    .pt-request-form .pt-tire-card:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
    /* フォームの中身は1本の列（最大760px）にそろえる：入力欄・選択リスト・お知らせ・確認欄がすべて同じ幅になる */
    .pt-request-form > * { max-width: none; }
    .pt-request-form .field input[type="text"], .pt-request-form .field input[type="date"], .pt-request-form .field input[type="number"], .pt-request-form .field input[type="search"], .pt-request-form .field select, .pt-request-form .field textarea { width: 100%; max-width: none; }

    /* 現場用：入力欄とボタンは広がりすぎない幅に */
    .wr-page .field input[type="text"], .wr-page .field input[type="date"], .wr-page .field input[type="number"], .wr-page .field select, .wr-page .field textarea { width: 100%; max-width: 560px; }
    .wr-page .btn--block { width: auto; min-width: 280px; }
    .wr-page .field .storage-picker, .pt-page .field .storage-picker { max-width: 560px; }
    /* 現場用の表 */
    .wr-table td { vertical-align: middle; }
    .wr-table .btn, .wr-table .badge { white-space: nowrap; }
    .wr-table td.right { width: 1%; }
    .wr-table .wr-group th { background: var(--surface-2); color: var(--ink); font-size: .85rem; font-weight: 700; padding: .45rem .65rem; }
    .wr-table .wr-group.is-overdue th { color: var(--danger); background: #fff1f1; }
    .wr-table .wr-notes { max-width: 260px; white-space: normal; font-size: .8rem; color: var(--muted); }
    /* 棚入れの表：保管場所の入力欄（列・段・番号＋保存）を1行に収める */
    .wr-shelf-table td { vertical-align: top; }
    .wr-shelf-table td:not(.wr-shelf-cell) { white-space: nowrap; padding-top: .85rem; }
    .wr-shelf-cell { min-width: 430px; white-space: normal; }
    .wr-shelf-cell .wk-shelf-form { margin-top: 0; flex-direction: row; align-items: flex-start; gap: .6rem; }
    .wr-shelf-cell .storage-picker { flex: 1; min-width: 0; }
    .wr-shelf-cell .wk-shelf-form .btn { align-self: flex-start; }
}

/* ================================================================ *
 * ロゴ：スマホの青いヘッダーは白一色のロゴ、PC のサイドバー（紺）は赤入りの白抜きロゴ（管理画面と同じ）
 * ================================================================ */
.wk-brand__logo { display: block; height: 24px; width: auto; margin-bottom: .15rem; }
.pt-sidebar__brand { text-align: center; }
.pt-sidebar__logo { display: block; width: 100%; max-width: 138px; height: auto; margin: .15rem auto .45rem; }
.pt-sidebar__brand small + small { margin-top: .1rem; }

/* スマホのヘッダー：ロゴと店舗名（名前）を横並び、アカウント設定・ログアウトは小さなアイコンの丸ボタン */
.wk-topbar .wk-brand { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.wk-topbar .wk-brand__logo { height: 22px; margin: 0; flex-shrink: 0; }
.wk-topbar .wk-brand small { display: block; min-width: 0; padding-left: .55rem; border-left: 1px solid rgba(255, 255, 255, .45); font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-user { gap: .35rem; }
.wk-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; flex-shrink: 0; }
.wk-icon-btn svg { width: 18px; height: 18px; }
.wk-icon-btn:hover { background: rgba(255, 255, 255, .26); }
.pt-page a.wk-icon-btn { color: #fff; }
@media (max-width: 899px) {
    /* スマホの検索欄：検索ボックスと「検索」を1行目、「お預かり中のみ」などのチェックは2行目に（ボックスを広くしてガイド文が見切れないように） */
    .wk-search .checkbox { order: 3; flex-basis: 100%; }
}
/* ================================================================ *
 * 事務・管理用のスマホ専用表示（899px 以下）。PC の見た目は変えない。
 *   上部：ロゴ＋画面名＋メニュー（右から全項目のメニューが開く）／下部：よく使う5つのタブ
 *   一覧：主な一覧（依頼・保管・顧客・作業履歴）は専用カード、ほかの表は「見出し：内容」のカードに
 * ================================================================ */
.ad-tabnav { display: none; }
@media (min-width: 900px) {
    .ad-sp-only { display: none !important; }
}
@media (max-width: 899px) {
    .ad-pc-only { display: none !important; }
    body.ad-page { background: var(--bg); }
    /* 上部バー */
    .ad-page .app-topbar {
        background: linear-gradient(180deg, var(--sidebar-bg-2) 0%, var(--sidebar-bg) 100%); color: #fff; border-bottom: 0;
        gap: .6rem; padding: .5rem .8rem; padding-top: calc(.5rem + env(safe-area-inset-top)); min-height: 54px;
    }
    .app-topbar__brand { display: block; flex-shrink: 0; }
    .app-topbar__brand img { display: block; height: 22px; width: auto; }
    .ad-page .app-topbar__title { padding-left: .6rem; border-left: 1px solid rgba(255, 255, 255, .45); font-size: .88rem; color: #fff; }
    .ad-page .app-topbar__menu {
        align-items: center; width: 38px; height: 38px; padding: 0; border-radius: 999px;
        background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
    }
    .ad-page .app-topbar__menu span { width: 16px; background: #fff; }
    /* メニューは右から開く（メニューボタンが右上のため） */
    .ad-page .app-sidebar { left: auto; right: 0; transform: translateX(100%); }
    .ad-page .app-shell.is-nav-open .app-sidebar { transform: none; }
    /* 下部タブ */
    .ad-page .ad-tabnav { display: flex; }
    .ad-page .ad-tabnav .wk-tabnav__link.is-active { color: var(--sidebar-bg); }
    .ad-page .app-content { padding: .9rem .8rem calc(5rem + env(safe-area-inset-bottom)); }
    /* 見出し・操作ボタン。CSV 出力はスマホでは使わないので出さない */
    .ad-page .toolbar { margin: .2rem 0 .8rem; }
    .ad-page .toolbar h1 { font-size: 1.15rem; }
    .ad-page .toolbar a[href*="format=csv"] { display: none; }
    /* 専用カードの一覧：外側の枠は消してカードを並べる */
    .ad-page .card.ad-list { background: transparent; border: 0; box-shadow: none; padding: 0; }
    .ad-page .ad-list .wk-card { color: inherit; }
    .ad-page .ad-list .wk-card:active { background: var(--surface-2); }
    /* そのほかの表：1行を1枚のカードにして「見出し：内容」で縦に並べる（横スクロールをなくす） */
    .ad-page .card:has(> .table.ad-stack), .ad-page .card:has(> form > .table.ad-stack), .ad-page .card:has(> .table-scroll > .table.ad-stack) {
        background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible;
    }
    .ad-page .table-scroll:has(> .table.ad-stack) { overflow: visible; }
    .ad-page .table.ad-stack thead { display: none; }
    .ad-page .table.ad-stack, .ad-page .table.ad-stack > tbody, .ad-page .table.ad-stack > tfoot, .ad-page .table.ad-stack tr { display: block; width: 100%; }
    .ad-page .table.ad-stack tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; margin-bottom: .6rem; box-shadow: var(--shadow-sm); }
    .ad-page .table.ad-stack tr:hover { background: var(--surface); }
    .ad-page .table.ad-stack td, .ad-page .table.ad-stack tbody th, .ad-page .table.ad-stack tfoot th {
        display: flow-root; border: 0; padding: .3rem 0 .3rem 6.6rem;
        white-space: normal !important; text-align: left !important; font-weight: inherit;
    }
    .ad-page .table.ad-stack td::before, .ad-page .table.ad-stack tbody th::before, .ad-page .table.ad-stack tfoot th::before {
        content: attr(data-label); float: left; width: 6.1rem; margin-left: -6.6rem; padding-top: .08rem;
        font-size: .74rem; font-weight: 600; color: var(--muted); line-height: 1.35;
    }
    .ad-page .table.ad-stack [data-label=""] { padding-left: 0; }
    .ad-page .table.ad-stack [data-label=""]::before { content: none; }
    .ad-page .table.ad-stack td:empty { display: none; }
    .ad-page .table.ad-stack td.center { text-align: center !important; }
    .ad-page .table.ad-stack .line2 { display: inline; margin: 0 0 0 .5rem; }
    .ad-page .table.ad-stack td .btn { margin: .15rem .3rem .15rem 0; }
}

/* 事務・管理用の「依頼を作成」：店舗ポータルと同じ縦1列のフォーム。PC ではボタンを広げすぎない */
.ad-request-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ad-request-form .field > span:first-child { font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
    .ad-request-form .btn--block { width: auto; min-width: 280px; align-self: flex-start; }
}

/* 送信中・読み込み中の表示（assets/js/app.js）：押したボタンの回転アイコン、画面上部の読み込みバー、
   画面全体を覆う透明な幕（読み込み中にほかの所を押せないように）、時間がかかるときの「読み込み中…」 */
.app-loading-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; overflow: hidden; pointer-events: none; opacity: 0; background: rgba(37, 99, 235, .18); transition: opacity .15s ease; }
.app-loading-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--accent); }
.app-loading-bar.is-active { opacity: 1; }
.app-loading-bar.is-active::before { animation: app-loading-bar 1s ease-in-out infinite; }
@keyframes app-loading-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.app-busy-shield { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: transparent; cursor: progress; transition: background-color .2s ease; }
.app-busy-shield.is-active { display: flex; }
.app-busy-shield.is-slow { background: rgba(15, 23, 42, .12); }
.app-busy-shield__pill { display: inline-flex; align-items: center; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(15, 23, 42, .82); color: #fff; font-size: .9rem; font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .2); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.app-busy-shield.is-slow .app-busy-shield__pill { opacity: 1; transform: none; }
html.is-busy, html.is-busy * { cursor: progress !important; }
button.is-loading { pointer-events: none; opacity: .85; }
/* 押したリンク：押した状態のまま（メニュー・下部タブ・一覧のカードなど） */
a.is-pressed { opacity: .7; }
.app-nav__link.is-pressed { opacity: 1; background: rgba(255, 255, 255, .14); }
.wk-tabnav__link.is-pressed { opacity: 1; background: var(--surface-2); color: var(--brand); }
.wk-card.is-pressed, .stat-card.is-pressed { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.app-spinner { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: app-spin .7s linear infinite; }
.wk-icon-btn .app-spinner { margin: 0; }
@keyframes app-spin { to { transform: rotate(360deg); } }

/* カードの店舗名：お客様名のすぐ上に小さな見出しとして（店舗 → お客様 → 車・タイヤの順に読めるように） */
.wk-card__store { font-size: .78rem; font-weight: 600; color: #46566a; margin-bottom: .05rem; }

/* ---------- 自動ログアウト（時間切れ）のお知らせ（assets/js/app.js） ---------- */
.session-expired { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 18, 35, .6); }
.session-expired__card { background: var(--surface, #fff); color: var(--ink, #111); width: min(420px, 100%); border-radius: var(--radius, 12px); padding: 1.4rem 1.3rem 1.2rem; box-shadow: 0 24px 60px rgba(10, 20, 50, .35); }
.session-expired__title { margin: 0 0 .7rem; font-size: 1.15rem; }
.session-expired__card p { margin: 0 0 .6rem; line-height: 1.7; }
.session-expired__btn { display: flex; justify-content: center; width: 100%; margin-top: 1rem; }
html.is-session-expired { overflow: hidden; }
@media print { .session-expired { display: none; } }

/* 店舗ポータル：休業日のお知らせ（更新・廃棄の赤、自動更新のオレンジとは別の青系の情報カード） */
.pt-closed { background: #f0f6ff; border: 1px solid #c9ddf7; border-radius: var(--radius); padding: .8rem 1.1rem; margin-bottom: 1.1rem; }
.pt-closed__title { margin: 0 0 .3rem; font-size: .95rem; color: #1e4f8a; }
.pt-closed__list { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.pt-closed__list span { color: var(--muted, #666); margin-left: .4rem; }
.pt-closed__lead { margin: .4rem 0 0; font-size: .82rem; color: var(--muted, #666); }

/* 保管規約（依頼フォームの同意欄・サイン用の印刷ページ） */
.pt-terms__body { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .8rem; background: var(--surface-2); }
.pt-terms__body summary { cursor: pointer; font-size: .9rem; }
.terms-article { display: flex; gap: .8rem; margin-top: .6rem; font-size: .9rem; }
.terms-article__no { flex: 0 0 4.2rem; }
.terms-article p { margin: 0 0 .2rem; }

/* 店舗ポータル：連絡先・依頼の詳細 */
.pt-contact { margin-top: 1.2rem; }
.pt-contact__title { margin: 0 0 .4rem; font-size: .95rem; }
.pt-contact p { margin: .15rem 0; }
.pt-request-detail__notes { white-space: pre-wrap; }

/* 店舗ポータル：新しく完了した依頼のお知らせ・依頼状況の絞り込み */
.pt-new-done { background: #f0faf3; border: 1px solid #bfe3c8; border-radius: var(--radius); padding: .8rem 1.1rem; margin-bottom: 1.1rem; }
.pt-new-done__title { margin: 0 0 .4rem; font-size: .95rem; color: #1d6b35; }
.pt-new-done__list { margin: 0 0 .6rem; padding-left: 1.2rem; font-size: .9rem; }
.pt-new-done__list a { text-decoration: none; color: inherit; }
.wk-search select { padding: .7rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 16px; background: #fff; }

/* 招待の案内状（画面には出さず、印刷のときだけ出す） */
.invite-sheet { display: none; }
@media print {
    body.print-invite * { visibility: hidden !important; }
    body.print-invite .invite-sheet, body.print-invite .invite-sheet * { visibility: visible !important; }
    body.print-invite .invite-sheet { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 14mm; box-sizing: border-box; font-size: 12pt; line-height: 1.6; color: #000; }
}
.invite-sheet__title { font-size: 20pt; margin: 0 0 .6rem; text-align: center; }
.invite-sheet__to { font-size: 14pt; margin: 0 0 .8rem; }
.invite-sheet__step { font-size: 13pt; margin: 1.1rem 0 .4rem; border-bottom: 1px solid #000; padding-bottom: .15rem; }
.invite-sheet__qr { display: flex; gap: 1rem; align-items: center; }
.invite-sheet__qrimg { flex: 0 0 34mm; width: 34mm; height: 34mm; }
.invite-sheet__qrimg svg { width: 100%; height: 100%; }
.invite-sheet__table { border-collapse: collapse; width: 100%; }
.invite-sheet__table th, .invite-sheet__table td { border: 1px solid #000; padding: .4rem .6rem; text-align: left; }
.invite-sheet__table th { width: 40%; font-weight: 600; }
.invite-sheet__code { font-size: 20pt; font-weight: 700; letter-spacing: .15em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.invite-sheet__contact { margin-top: 1rem; }
.invite-sheet__note { margin-top: 1.2rem; font-size: 10pt; }

/* ================================================================ *
 * 店舗ポータルのホーム（スマホ・PC 共通の1つのレイアウト）
 *   箱と影を減らし、余白・細い区切り線・文字の大きさで見せる。強調の色は「お手続きが必要」（赤）だけ。
 *   .ph-… は portal/index.php 専用。
 * ================================================================ */
.ph { width: 100%; }
.pt-page .ph a { text-decoration: none; }

/* 上：日付と、依頼ボタン（ホームのボタンはこれ1つ） */
.ph-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ph-top__date { margin: 0; font-size: .9rem; letter-spacing: .04em; color: var(--muted); }
.pt-page .ph a.ph-cta { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: var(--tap); padding: .7rem 1.5rem; border-radius: 999px; background: var(--brand); color: #fff !important; font-weight: 700; font-size: 1rem; letter-spacing: .02em; box-shadow: 0 6px 16px rgba(29, 78, 216, .28); transition: transform .15s, box-shadow .15s; }
.ph-cta span { display: inline-block; transition: transform .15s; }
.pt-page .ph a.ph-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(29, 78, 216, .36); background: var(--brand-strong); }
.ph-cta:hover span { transform: translateX(3px); }

/* 見出し */
.ph-head { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; flex-wrap: wrap; }
.ph-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.ph-head p { flex-basis: 100%; margin: .2rem 0 0; font-size: .82rem; color: var(--muted); }
.pt-page .ph a.ph-more { font-size: .84rem; color: var(--muted) !important; }
.pt-page .ph a.ph-more:hover { color: var(--accent) !important; }
.ph-count { display: inline-block; min-width: 1.6em; margin-left: .3em; padding: .05em .55em; border-radius: 999px; background: var(--danger); color: #fff; font-size: .74rem; font-weight: 700; text-align: center; vertical-align: .1em; }
.ph-count--note { background: #d97706; }

/* お手続きが必要なタイヤ（あるときだけ。赤いしるしはここだけ） */
.ph-due, .ph-auto { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--radius); padding: 1.1rem 1.3rem .5rem; margin-bottom: 1.6rem; }
.ph-auto { border-left-color: #d97706; }
.ph-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.ph-list > li + li { border-top: 1px solid var(--line); }
.ph-sub { font-size: .86rem; color: #46566a; }
.ph-due__item { display: flex; align-items: center; justify-content: space-between; gap: .7rem 1.2rem; flex-wrap: wrap; padding: .9rem 0; }
.ph-due__main { display: grid; gap: .1rem; min-width: 0; }
.ph-due__limit { font-size: .84rem; color: #b45309; }
.ph-due__limit strong { font-weight: 700; }
.ph-due__limit.is-overdue { color: var(--danger); }
.ph-due__actions { display: flex; align-items: center; gap: 1.1rem; }
.pt-page .ph a.ph-link { font-size: .88rem; font-weight: 600; color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pt-page .ph a.ph-link:hover { text-decoration-color: currentColor; }
.pt-page .ph a.ph-link--danger { color: var(--danger) !important; }

/* 件数（1つの帯に並べる） */
.ph-figures { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.8rem; overflow: hidden; }
.pt-page .ph a.ph-figure { flex: 1 1 8.5rem; display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.3rem; color: inherit !important; transition: background .15s; }
.pt-page .ph a.ph-figure:hover { background: var(--surface-2); }
.ph-figure + .ph-figure { border-left: 1px solid var(--line); }
.ph-figure__label { font-size: .84rem; color: #46566a; }
.ph-figure strong { font-size: 2rem; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.ph-figure small { margin-left: .25rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
.ph-figure--note strong { color: #b45309; }

/* 進行中の依頼・最近の完了（短い一覧。1行を押すと依頼の詳細） */
.ph-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 0 1.4rem; align-items: start; }
.ph-sec { margin-bottom: 1.6rem; padding: 1rem 1.2rem .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ph-sec > .ph-head { padding-bottom: .6rem; border-bottom: 2px solid var(--line); }
.ph-sec > .ph-head h2 { font-size: .98rem; }
.ph-sec .ph-list { margin-top: 0; }
.ph-empty { margin: 1rem 0; font-size: .88rem; color: var(--muted); }
.pt-page .ph a.ph-row { display: flex; align-items: center; gap: .9rem; padding: .8rem .2rem; color: inherit !important; transition: background .15s; }
.pt-page .ph a.ph-row:hover { background: var(--surface-2); }
.ph-row--static { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 0; flex-wrap: wrap; }
.ph-row__date { flex: 0 0 3.4rem; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-row__body { flex: 1; display: grid; gap: .05rem; min-width: 0; }
.ph-row__body strong { font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-row__body .ph-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-status { display: inline-flex; align-items: center; gap: .38rem; padding: .18rem .65rem .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: #e9eef4; color: #46566a; }
.ph-status::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; opacity: .7; }
.ph-status--wait { background: #e2f4ea; color: #2c6b4c; }
.ph-status--working { background: #e6f1fd; color: #2f6fd6; }
.ph-status--done { background: #cdddfb; color: #1b3fae; }

/* ホームのお知らせ（休業日・新しく完了）も、同じ「白地＋左の細い線」にそろえる */
.pt-page .pt-closed, .pt-page .pt-new-done { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #3b82f6; }
.pt-page .pt-new-done { border-left-color: #16a34a; }

@media (max-width: 899px) {
    .ph-figure + .ph-figure { border-left: 0; }
    .ph-figure:nth-child(2) { border-left: 1px solid var(--line); }
    .ph-figure:nth-child(3) { flex-basis: 100%; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .ph-top { margin-bottom: 1.2rem; }
    .pt-page .ph a.ph-cta { width: 100%; justify-content: space-between; }
    .ph-due, .ph-auto { padding: 1rem 1rem .4rem; }
    .ph-due__actions { width: 100%; }
    .ph-due__actions .btn { flex: 1; }
    .ph-figure strong { font-size: 1.7rem; }
}

/* ================================================================ *
 * 店舗ポータル全体（依頼する・保管状況・依頼状況・各詳細）をホームの見た目にそろえる
 *   .pt-page の中だけに効く（現場用・事務用の画面は変わらない）。
 *   考え方：箱と影を減らす／区切りは細い線／状況は色つきの点＋文字／強調の色は青（操作）と赤（要手続き）だけ。
 * ================================================================ */
.pt-page .wk-title { margin: .2rem 0 1.1rem; font-size: 1.4rem; font-weight: 800; letter-spacing: .01em; }
.pt-page .card { box-shadow: none; }

/* 「お手続きが必要なタイヤがあります」の案内：ホームの赤い線つきの白地にそろえる */
.pt-page .pt-renewal-banner { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: var(--radius); padding: .75rem 1rem; }
.pt-page .pt-renewal-banner strong { color: var(--danger); }
.pt-page a.pt-renewal-banner:hover { background: var(--surface-2); }

/* 進行中／すべて・お預かり中のみ などの切り替え：下線のタブ */
.pt-page .wk-toggle { gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.pt-page .wk-toggle a { flex: 0 0 auto; min-height: 0; margin-bottom: -1px; padding: .7rem 1.3rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted) !important; font-size: .92rem; }
.pt-page .wk-toggle a:hover { color: var(--ink) !important; }
.pt-page .wk-toggle a.is-active { background: none; border-bottom-color: var(--brand); color: var(--ink) !important; }

/* 検索 */
.pt-page .wk-search input[type="search"], .pt-page .wk-search select { background: var(--surface); }
.pt-page .wk-group-label { margin: 1.2rem 0 .3rem; }
.pt-page .wk-group-label small { font-size: .8rem; }
.pt-page .wk-empty { background: transparent; border: 1px dashed var(--line); }

/* 状況・種類：淡い色の札（バッジ）に、点をひとつ添える。色でひと目で見分けられるようにする */
.pt-page .badge { display: inline-flex; align-items: center; gap: .38rem; padding: .18rem .65rem .18rem .55rem; font-size: .78rem; font-weight: 700; }
.pt-page .badge::before { content: ""; flex: 0 0 auto; width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; opacity: .7; }
/* 配達・回収の種類は、現場と同じ濃い色の札（点なし） */
.pt-page .badge--delivery::before, .pt-page .badge--pickup::before { display: none; }
.pt-page .badge--delivery, .pt-page .badge--pickup { padding: .18rem .65rem; }

/* PC の表：白い面にのせ、見出しは太い字、行は細い線で区切る */
.pt-page .card.pt-pc-only { padding: .3rem 1rem .5rem; background: var(--surface); border: 1px solid var(--line); }
.pt-page .pt-pc-only .table { font-size: .92rem; }
.pt-page .pt-pc-only .table th { padding: .7rem .7rem; border-bottom: 2px solid var(--line); font-size: .78rem; font-weight: 700; color: #3b4a5e; }
.pt-page .pt-pc-only .table td { padding: .9rem .7rem; }
.pt-page .pt-pc-only .table tbody tr:last-child td { border-bottom: 0; }
.pt-page .pt-pc-only .table td a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.pt-page .pt-pc-only .table td a:hover { text-decoration: underline; }

/* スマホの一覧カード：1件ずつの白いカード（影は付けない） */
.pt-page .wk-card { margin: 0 0 .6rem; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.pt-page a.wk-card { color: var(--ink) !important; }
.pt-page a.wk-card:hover, .pt-page a.wk-card.is-pressed { background: var(--surface-2); }
.pt-page .wk-card__head { margin-bottom: .4rem; }
.pt-page .wk-card__customer { font-size: 1rem; font-weight: 700; }
.pt-page .wk-card__tire { color: #3b4a5e; font-size: .88rem; }
.pt-page .wk-card__meta { color: var(--muted); }

/* 並べ替え・ページ送り */
.pt-page .pagination__link { border-radius: 999px; background: var(--surface); }

/* 依頼フォーム：選択肢（ラジオ）は、押しやすい横長の選択肢にする */
.pt-page .pt-request-form label.radio { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.pt-page .pt-request-form label.radio + label.radio { margin-top: .5rem; }
.pt-page .pt-request-form label.radio:hover { border-color: var(--accent); }
.pt-page .pt-request-form label.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.pt-page .pt-request-form .pt-tire-list label.radio { border: 0; }

/* 詳細画面の「← 戻る」 */
.pt-page .wk-back a { color: var(--muted); font-weight: 600; }
.pt-page .wk-back a:hover { color: var(--accent); }
@media (max-width: 600px) {
    .pt-page .wk-search input[type="search"] { flex-basis: 100%; }
}
/* 保管状況の表：車種 / ナンバーの列を狭くしすぎない */
@media (min-width: 900px) {
    .pt-page .pt-tires-table { font-size: .86rem; }
    .pt-page .pt-tires-table th, .pt-page .pt-tires-table td { padding-left: .4rem; padding-right: .4rem; }
    .pt-page .pt-tires-table td:nth-child(3) { min-width: 8rem; }
    .pt-page .pt-tires-table td:nth-child(5) { white-space: nowrap; }
    /* 狭い画面では、お客様・車種を折り返して、種別・ホイールなど短い列は1行のまま保つ。収まらないときは表の中で横にスクロール */
    .pt-page .pt-tires-table td:nth-child(2), .pt-page .pt-tires-table td:nth-child(3) { white-space: normal; }
    .pt-page .pt-tires-table td:nth-child(2) { min-width: 7rem; }
    .pt-page .card.pt-pc-only:has(> .pt-tires-table) { overflow-x: auto; }
    .pt-page .pt-tires-table .badge { padding: .16rem .5rem .16rem .45rem; font-size: .74rem; }
    /* 見出しも各項目も中央寄せ */
    .pt-page .pt-tires-table th, .pt-page .pt-tires-table td { text-align: center; vertical-align: middle; }
}

/* 事務・管理用の「依頼を作成」：店舗ポータルの依頼フォームと同じ見た目（選択肢は押しやすい横長、入力欄は大きめ） */
.ad-request-form { padding: 1.1rem 1.2rem; box-shadow: none; max-width: 760px; }
.ad-request-form .field { font-size: .95rem; }
.ad-request-form .field input, .ad-request-form .field select, .ad-request-form .field textarea { padding: .85rem .9rem; font-size: 16px; }
.ad-request-form .field input[type="radio"], .ad-request-form .field input[type="checkbox"] { width: 20px; height: 20px; }
.ad-request-form label.radio { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.ad-request-form label.radio + label.radio { margin-top: .5rem; }
.ad-request-form label.radio:hover { border-color: var(--accent); }
.ad-request-form label.radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.ad-request-form .pt-tire-list label.radio { border: 0; }
.ad-request-form .btn--block { font-size: 1.05rem; padding: 1rem; min-height: 52px; }

/* 更新・廃棄の依頼：「ご依頼の内容」の選択肢も、依頼フォームと同じ押しやすい横長にする（タイヤの選択は元のカードのまま） */
.pt-page .pt-renewal-form label.radio:not(.pt-pick) { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s; }
.pt-page .pt-renewal-form label.radio:not(.pt-pick) + label.radio:not(.pt-pick) { margin-top: .5rem; }
.pt-page .pt-renewal-form label.radio:not(.pt-pick):hover { border-color: var(--accent); }
.pt-page .pt-renewal-form label.radio:not(.pt-pick):has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* ================================================================ *
 * 店舗ポータルの PC：画面の幅に合わせて、ホーム・各画面が本文いっぱいに広がる。
 *   広い画面では「依頼を作成」の小さな入力欄やアカウント設定のカードを横に並べ、スペースを有効に使う。
 * ================================================================ */
.pt-account-grid { display: grid; gap: 1rem 1.2rem; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .pt-account-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
    .pt-page .pt-account-grid .field input[type="text"], .pt-page .pt-account-grid .field input[type="email"], .pt-page .pt-account-grid .field input[type="password"] { max-width: none; }
    .pt-page .pt-account-grid .btn--block { width: 100%; min-width: 0; margin-top: auto; }
    .pt-account-grid > .card { display: flex; flex-direction: column; }
}
@media (min-width: 1280px) {
    .pt-page .pt-request-form:not(.ad-request-form) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; align-items: start; }
    .pt-page .pt-request-form:not(.ad-request-form) > * { max-width: none; grid-column: 1 / -1; }
    .pt-page .pt-request-form:not(.ad-request-form) > label.field:not(:has(textarea)) { grid-column: auto; }
    .pt-page .pt-request-form:not(.ad-request-form) > label.field[hidden] { display: none; }
}

.pt-account-grid > .card { margin: 0; }
.pt-account-grid > .card > .section-title:first-child, .pt-account-grid > form > .section-title { margin-top: 0; }

/* 店舗ポータル：希望日の3営業日前を過ぎた依頼の「変更・取り消し」ボタンと、問い合わせを促すダイアログ */
.pt-late-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.pt-late-dialog { border: 0; border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem; width: min(440px, calc(100vw - 24px)); max-width: none; box-shadow: 0 24px 60px rgba(10, 20, 50, .35); background: var(--surface); color: var(--ink); }
.pt-late-dialog::backdrop { background: rgba(10, 18, 35, .5); }
.pt-late-dialog h2 { margin: 0 0 .7rem; font-size: 1.1rem; }
.pt-late-dialog__contact { margin: .8rem 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.pt-late-dialog__contact p { margin: .2rem 0; }
.pt-late-dialog .btn--block { width: 100%; min-width: 0; margin-top: .6rem; }