/* 現調データ参照 — 画面全体の配色は色見本(トークン)で管理し、帳票だけは紙と同じ白地で表示する */
:root {
    --bg: #f2f5f7;
    --surface: #ffffff;
    --ink: #1b2b33;
    --muted: #5a7079;
    --line: #d5e0e5;
    --accent: #146a85;
    --accent-ink: #0e4f63;
    --accent-soft: #e2eff4;
    --danger: #b3261e;
    --danger-soft: #fbeceb;
    --ok: #2e7d4f;
    --ok-soft: #e5f3ea;
    --warn: #9a5a12;
    --warn-soft: #f8eedf;
    --topbar: #123b4a;
    --topbar-ink: #e8f2f6;
    --radius: 6px;
    --font: "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f191e;
        --surface: #16232a;
        --ink: #e2edf1;
        --muted: #93aab3;
        --line: #2a3c45;
        --accent: #5fb8d4;
        --accent-ink: #8fd0e4;
        --accent-soft: #173340;
        --danger: #f08b84;
        --danger-soft: #3a1f1d;
        --ok: #6cc494;
        --ok-soft: #173024;
        --warn: #dba05c;
        --warn-soft: #33271a;
        --topbar: #0b2530;
        --topbar-ink: #d6e7ee;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0f191e;
    --surface: #16232a;
    --ink: #e2edf1;
    --muted: #93aab3;
    --line: #2a3c45;
    --accent: #5fb8d4;
    --accent-ink: #8fd0e4;
    --accent-soft: #173340;
    --danger: #f08b84;
    --danger-soft: #3a1f1d;
    --ok: #6cc494;
    --ok-soft: #173024;
    --warn: #dba05c;
    --warn-soft: #33271a;
    --topbar: #0b2530;
    --topbar-ink: #d6e7ee;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    font-feature-settings: "palt";
}
a { color: var(--accent); }
a:hover { color: var(--accent-ink); }
h1 { font-size: 1.25rem; line-height: 1.4; margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.boot, .loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }

/* ボタン・入力 */
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
.btn-primary {
    background: var(--accent); color: var(--surface); border: 0; border-radius: var(--radius);
    padding: .5rem 1.1rem; font-weight: 500;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-ink); }
.btn-primary.wide { width: 100%; padding: .65rem; }
.btn-quiet {
    background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
    padding: .4rem .9rem;
}
.btn-quiet:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field > span { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; }
.field input, .field select, .sort select {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.alert { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: .6rem .8rem; margin: .75rem 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.panel.narrow { max-width: 36rem; margin: 3rem auto; }
.muted { color: var(--muted); font-size: .85rem; }
.notice { background: var(--ok-soft); color: var(--ok); border-radius: var(--radius); padding: .6rem .8rem; margin: .75rem 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.btn-danger { background: var(--danger); color: var(--surface); border: 0; border-radius: var(--radius); padding: .5rem 1.1rem; font-weight: 500; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }
input.otp {
    font: inherit; font-size: 1.35rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; text-align: center;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; width: 100%;
}
input.otp:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* 上部バー */
.topbar {
    background: var(--topbar); color: var(--topbar-ink);
    display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; height: 52px;
}
.brand { color: var(--topbar-ink); text-decoration: none; font-weight: 700; letter-spacing: .06em; }
.brand:hover { color: #fff; }
.env-badge { background: #e0a43a; color: #1b2b33; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; }
.topnav { display: flex; gap: .25rem; margin-left: .5rem; }
.topnav a { color: var(--topbar-ink); text-decoration: none; padding: .3rem .7rem; border-radius: var(--radius); opacity: .8; }
.topnav a.active, .topnav a:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.user { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.user .btn-quiet { color: var(--topbar-ink); border-color: rgba(255, 255, 255, .3); padding: .25rem .7rem; }
.user .btn-quiet:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.user-link { color: var(--topbar-ink); text-decoration: none; display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border-radius: var(--radius); }
.user-link:hover { background: rgba(255, 255, 255, .12); }
.user-short { display: none; }
.user-flag { background: #e0a43a; color: #1b2b33; font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; white-space: nowrap; }
.page { padding: 1.25rem; max-width: 1480px; margin: 0 auto; }

/* ログイン */
.login { min-height: calc(100vh - 52px - 2.5rem); display: grid; place-items: center; }
.login-card {
    width: min(100%, 25rem); background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem;
}
.login-card form { display: flex; flex-direction: column; gap: 1rem; }
.login-lead, .login-note { color: var(--muted); font-size: .85rem; margin: 0; }

/* 検索 */
.search { display: grid; grid-template-columns: 250px 1fr; gap: 1.25rem; align-items: start; }
.filters {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem;
    position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
}
.filters-toggle { display: none; }
.filters-body { display: flex; flex-direction: column; gap: .8rem; }
.filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.results { min-width: 0; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.count { margin: 0; color: var(--muted); }
.count strong { color: var(--ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sort { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); }
.sort select { width: auto; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
table.list { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.list th {
    text-align: left; font-size: .74rem; letter-spacing: .05em; color: var(--muted); font-weight: 500;
    padding: .55rem .7rem; border-bottom: 2px solid var(--line); white-space: nowrap; background: var(--surface);
}
table.list td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: var(--accent-soft); }
table.list td a { font-weight: 500; text-decoration: none; white-space: nowrap; }
table.list td:nth-child(2) { min-width: 10em; }
table.list td:nth-child(3) { min-width: 13em; }
table.list td:nth-child(n+4) { white-space: nowrap; }

/* 中くらいの幅(ノートPCの分割表示など): 絞り込みを一覧の上に移し、開閉できるようにする */
@media (max-width: 1100px) {
    .search { grid-template-columns: 1fr; gap: .75rem; }
    .filters { position: static; max-height: none; padding: 0; overflow: hidden; }
    .filters-toggle {
        display: block; width: 100%; text-align: left; background: var(--surface); color: var(--ink);
        border: 0; padding: .7rem 1rem; font-weight: 500;
    }
    .filters-toggle::after { content: "▾"; float: right; color: var(--muted); }
    .filters.open .filters-toggle::after { content: "▴"; }
    .filters-body { display: none; padding: 0 1rem 1rem; }
    .filters.open .filters-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
    .filters.open .filter-actions { grid-column: 1 / -1; }
}
.cards { display: none; list-style: none; margin: 0; padding: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; font-size: .88rem; color: var(--muted); }

.chip { display: inline-block; font-size: .72rem; font-weight: 500; padding: .05rem .55rem; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chip-done { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip-wait { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip-todo { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.chip-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }

/* 帳票の画面 */
.detail-head {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "back title print" "back meta print";
    gap: .3rem 1.25rem; align-items: center; margin-bottom: 1rem;
}
.detail-head .back { grid-area: back; }
.detail-title { grid-area: title; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ctl-no { color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .35em; }
.detail-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; margin: 0; font-size: .8rem; }
.detail-meta div { display: flex; gap: .4rem; }
.detail-meta dt { color: var(--muted); }
.detail-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.print-btn { grid-area: print; }
.print-head { display: none; }

/* 帳票本体: 常に白地(紙と同じ見え方)。Canbus の 64 列の升目をそのまま使う */
.sheet { --row-h: 21px; color: #1b2b33; }
.sheet-grid {
    display: grid; grid-template-columns: repeat(64, minmax(0, 1fr)); gap: 0;
    background: #ffffff; border-top: 1px solid #c9d5db; border-left: 1px solid #c9d5db; min-width: 1120px;
    font-size: 11px; line-height: 1.3;
}
.sheet { overflow-x: auto; background: #ffffff; border-radius: var(--radius); }
/* 罫線は各マスの右と下に引く(項目のない場所は白地のまま) */
.cell {
    background: #ffffff; min-width: 0; overflow: hidden; display: flex;
    border-right: 1px solid #c9d5db; border-bottom: 1px solid #c9d5db;
}
.cell-band { align-items: center; padding: 0 .45rem; font-weight: 700; letter-spacing: .03em; }
.cell-band span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-field { flex-direction: column; }
.cell-title {
    font-size: 10px; padding: 1px .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 0 0 auto; font-weight: 500;
}
.cell-value { padding: 1px .35rem; flex: 1 1 auto; display: flex; align-items: center; overflow: hidden; word-break: break-all; }
.cell-value.num { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.cell-value.status { font-weight: 700; }
.cell-field.no-title .cell-value { background: #fbfcfd; }
/* リッチテキスト(申し送り・仕様詳細・部材配置図など)。枠に収まらない分は枠の中でスクロールする */
.cell-value.rich { display: block; overflow: auto; font-size: .8rem; line-height: 1.45; padding: 2px .4rem; }
.rich p, .rich div, .rich ul, .rich ol, .rich h1, .rich h2, .rich h3, .rich h4, .rich blockquote { margin: 0 0 .25em; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich img { max-width: 100%; height: auto; }
.rich table { border-collapse: collapse; margin: .2em 0; }
.rich td, .rich th { border: 1px solid var(--line); padding: 1px 4px; vertical-align: top; }
dd.rich { overflow-x: auto; }
/* 表(Table)の項目 */
.subtable th { background: #eef3f5; font-weight: 600; text-align: left; white-space: nowrap; }
.subtable td, .subtable th { font-size: .78rem; }
/* 高さ1マスの項目は項目名と値を横に並べる */
.cell-field.h1 { flex-direction: row; align-items: stretch; }
.cell-field.h1 .cell-title { display: flex; align-items: center; max-width: 55%; }
.sheet-sections { display: none; }

/* スマートフォン */
@media (max-width: 760px) {
    .page { padding: .75rem; }
    .topbar { padding: 0 .75rem; gap: .6rem; }
    .user-name { display: none; }
    .user-short { display: inline; }
    .user-flag { font-size: 0; padding: 0; width: .55rem; height: .55rem; }
    .filters.open .filters-body { display: flex; flex-direction: column; }
    .table-wrap.has-cards { display: none; }  /* 検索結果は下のカード表示に切り替える(管理画面の表は横スクロールで表示) */
    .cards { display: flex; flex-direction: column; gap: .5rem; }
    .cards a {
        display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: .7rem .85rem; color: var(--ink); text-decoration: none;
    }
    .cards a:active { background: var(--accent-soft); }
    .card-top { display: flex; justify-content: space-between; align-items: center; }
    .card-no { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
    .card-name { font-weight: 500; margin: .15rem 0; }
    .card-meta { font-size: .8rem; color: var(--muted); }

    .detail-head { grid-template-columns: 1fr auto; grid-template-areas: "back print" "title title" "meta meta"; }
    .sheet { background: transparent; overflow: visible; }
    .sheet-grid { display: none; }
    .sheet-sections { display: flex; flex-direction: column; gap: .75rem; color: var(--ink); }
    .empty-toggle { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
    .sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .sec h3 { margin: 0; padding: .45rem .8rem; font-size: .9rem; }
    .sec dl { margin: 0; padding: .25rem .8rem .5rem; }
    .sec .sub { font-size: .75rem; font-weight: 700; color: var(--muted); letter-spacing: .05em; margin: .6rem 0 .1rem; }
    .sec .row { display: grid; grid-template-columns: 42% 1fr; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--line); }
    .sec .row:last-child { border-bottom: 0; }
    .sec dt { color: var(--muted); font-size: .82rem; }
    .sec dd { margin: 0; word-break: break-all; }
    .sec dd.num { text-align: left; }
}

/* 印刷: 常に A4 縦1枚の升目配置 */
@page { size: A4 portrait; margin: 7mm; }
@media print {
    :root { color-scheme: light; }
    body { background: #fff; color: #000; font-size: 7pt; }
    .topbar, .detail-head, .sheet-sections, .empty-toggle, #blazor-error-ui { display: none !important; }
    .page { padding: 0; max-width: none; }
    .print-head { display: flex; justify-content: space-between; gap: 4mm; font-size: 7.5pt; margin-bottom: 2mm; color: #000; }
    .sheet { --row-h: 3.72mm; overflow: visible; border-radius: 0; }
    .sheet-grid { display: grid !important; min-width: 0; width: 100%; font-size: 6.3pt; line-height: 1.2; }
    .cell-title { font-size: 5.6pt; padding: 0 .6mm; }
    .cell-value { padding: 0 .6mm; }
    .cell-value.rich { overflow: hidden; font-size: 5.8pt; line-height: 1.25; }
    .cell-band { padding: 0 1mm; }
    .sheet, .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* Blazor のエラー表示 */
#blazor-error-ui {
    color-scheme: light only; background: #fff4d6; color: #1b2b33; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* アカウント・2段階認証 */
.account { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.account h1 { margin: 0; font-size: 1.3rem; }
.account h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.account .panel p { margin: .5rem 0; }
.account-info { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; margin: 0 0 .75rem; }
.account-info dt { color: var(--muted); font-size: .85rem; }
.account-info dd { margin: 0; overflow-wrap: anywhere; }
.enroll-steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 1.1rem; }
.enroll-steps li > strong { display: block; margin-bottom: .35rem; }
.enroll-steps .muted { display: block; }
.qr { display: block; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); margin: .5rem 0; }
.secret { display: inline-block; margin-top: .3rem; font-size: .95rem; letter-spacing: .08em; overflow-wrap: anywhere; color: var(--ink); background: var(--accent-soft); padding: .15rem .45rem; border-radius: 4px; }
.enroll-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.enroll-form input.otp { width: 11rem; }
@media (max-width: 760px) {
    .account-info { grid-template-columns: 1fr; gap: 0; }
    .account-info dd { margin-bottom: .5rem; }
}

/* 参照メニュー(上部バーの下) */
.menubar {
    display: flex; align-items: center; gap: .15rem; padding: 0 1.25rem; background: var(--surface);
    border-bottom: 1px solid var(--line); overflow-x: auto; white-space: nowrap; scrollbar-width: thin;
}
.menubar a {
    color: var(--muted); text-decoration: none; padding: .65rem .8rem; border-bottom: 3px solid transparent;
    font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem;
}
.menubar a:hover { color: var(--ink); }
.menubar a.active { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 500; }
.menubar a.planned { opacity: .6; }
.menubar small { font-size: .68rem; border: 1px solid var(--line); border-radius: 99px; padding: 0 .4rem; }
.menubar-sep { width: 1px; height: 1.2rem; background: var(--line); margin: 0 .4rem; flex: none; }

/* 画面の見出し */
.page-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.page-title { margin: 0; font-size: 1.25rem; }

/* データ種別の目印 */
.ds-tag {
    display: inline-block; font-size: .72rem; font-weight: 500; padding: .05rem .5rem; border-radius: 4px; white-space: nowrap;
    background: var(--accent-soft); color: var(--accent-ink); border-left: 3px solid var(--accent);
}
.ds-ress { border-left-color: #7b5ea7; }
.ds-renewal { border-left-color: #c77c1e; }
.ds-design { border-left-color: #2e7d4f; }
.ds-sekou { border-left-color: #b3261e; }
.ds-tag small { font-weight: 400; margin-left: .4em; opacity: .85; }

/* ホーム */
.home { max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.home-search h1 { margin: 0 0 .25rem; font-size: 1.15rem; }
.home-search-form { display: flex; gap: .5rem; margin-top: .75rem; }
.home-search-form input {
    flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .7rem;
}
.home-search-form input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.home-heading { margin: .5rem 0 0; font-size: 1rem; color: var(--muted); font-weight: 500; }
.ds-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ds-card {
    display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); border-top: 3px solid var(--accent);
}
.ds-card:hover { border-color: var(--accent); }
.ds-card.planned { border-top-color: var(--line); color: var(--muted); }
.ds-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ds-card-name { font-weight: 700; }
.ds-card-desc { margin: 0; font-size: .85rem; color: var(--muted); }
.ds-card-stats { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .85rem; }
.ds-card-stats strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* 横断検索の絞り込み */
.ds-choices { border: 0; padding: 0; margin: 0; }
.ds-choices legend { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; padding: 0; margin-bottom: .25rem; }
.check { display: flex; align-items: center; gap: .45rem; font-size: .9rem; padding: .15rem 0; cursor: pointer; }
.hint { font-size: .75rem; color: var(--muted); }
.range { display: flex; align-items: center; gap: .4rem; }
.range input {
    font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: .45rem .5rem; width: 100%; min-width: 0;
}

/* 関連データ(同じ管理番号の他のデータ) */
.related { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; }
.related h2 { margin: 0 0 .5rem; font-size: .95rem; display: flex; gap: .6rem; align-items: baseline; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.related a { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .35rem .4rem; border-radius: 4px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.related a:hover { background: var(--accent-soft); }
@media print { .menubar, .related { display: none !important; } }
@media (max-width: 760px) {
    .menubar { padding: 0 .5rem; }
    .menubar a { padding: .6rem .6rem; font-size: .85rem; }
    .page-head { flex-direction: column; gap: .2rem; }
}

/* 参照項目の中のアプリ切り替え */
.app-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: 0 0 1rem; }
.app-tabs a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 99px; font-size: .85rem;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
}
.app-tabs a:hover { border-color: var(--accent); }
.app-tabs a.active { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.app-tabs a.empty:not(.active) { color: var(--muted); }
.app-count { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .8; }

/* ホームのカード: 参照項目とその中のアプリ */
.ds-card { text-decoration: none; }
.ds-card:hover { border-color: var(--line); }
a.ds-card-head { color: inherit; text-decoration: none; }
a.ds-card-head:hover .ds-card-name { color: var(--accent); text-decoration: underline; }
.ds-card.ds-ress { border-top-color: #7b5ea7; }
.ds-card.ds-renewal { border-top-color: #c77c1e; }
.ds-card.ds-design { border-top-color: #2e7d4f; }
.ds-card.ds-sekou { border-top-color: #b3261e; }
.ds-card.planned { border-top-color: var(--line); }
.ds-card-apps { list-style: none; margin: .1rem 0 .3rem; padding: 0; display: flex; flex-direction: column; }
.ds-card-apps a {
    display: flex; justify-content: space-between; gap: .5rem; padding: .2rem .3rem; border-radius: 4px;
    font-size: .82rem; color: var(--ink); text-decoration: none;
}
.ds-card-apps a:hover { background: var(--accent-soft); }
.ds-card-apps a.empty { color: var(--muted); }
.ds-card-apps span { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
    .app-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
    .app-tabs a { white-space: nowrap; }
}

/* 管理者の操作欄(帳票画面) */
.admin-panel { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: 1rem; }
.admin-panel.deleted { border: 1px solid var(--danger); background: var(--danger-soft); }
.admin-panel p { margin: .35rem 0; }
.admin-panel .field { max-width: 32rem; }
.admin-panel .field input { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; width: 100%; }
.admin-panel-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn-danger:disabled { opacity: .5; }
@media print { .admin-panel { display: none !important; } }

/* 管理画面 */
.admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.admin-toolbar p { margin: 0; }
.admin-edit, .admin-created { margin-bottom: 1rem; }
.admin-edit h2, .admin-created h2, .admin-section h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.admin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem 1.25rem; margin-bottom: .75rem; }
.admin-form fieldset { border: 0; padding: 0; margin: 0; }
.admin-form legend { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .04em; padding: 0; margin-bottom: .25rem; }
.admin-form input[type=text], .admin-form input[type=email], .admin-form select {
    font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; width: 100%;
}
.check.indent { padding-left: 1.4rem; }
.actions .spacer { flex: 1; }
.btn-quiet.small { padding: .2rem .6rem; font-size: .8rem; }
table.list tr.inactive td { color: var(--muted); }
.admin-section { margin-bottom: 1.5rem; }
.admin-section h2 { display: flex; gap: .6rem; align-items: baseline; }
.import-steps { margin: 0 0 .75rem; padding-left: 1.3rem; font-size: .85rem; }
.import-pick { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.file-name { word-break: break-all; font-size: .8rem; }
.state-error { color: var(--danger); }
.state-done { color: var(--ok); font-weight: 500; }
.import-details { margin-top: .75rem; font-size: .85rem; }
.import-details ul { margin: .4rem 0; padding-left: 1.3rem; }
.pw-form { display: flex; flex-direction: column; gap: .75rem; max-width: 26rem; }
.pw-form input { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem .6rem; width: 100%; }