/* 印刷依頼システム — 画面デザイン「Trusted Network」(新しい UI)
   ------------------------------------------------------------------
   style.css の**後ろ**に重ねる差分だけのファイル。HTML の作りは classic と
   同じで、当てる先も既存のクラス名(.card .btn .chip .badge .job …)だけ。
   切り替えは /files のボタン(POST /ui/theme → data\ui.json)。

   きまり
     * 外部リソースは一切読まない(Web フォント・外部 CSS・画像 URL なし)。
       文字は端末に入っているものを使う。CSP は今までのまま。
     * 最小タップ 44px・本文 16px は classic と同じ。
     * 動きは prefers-reduced-motion で止める。
     * 地が濃いので「カードの中は濃い文字」「カードの外は明るい文字」。 */

:root {
  /* 文字は端末のもの。数字は桁を揃える(tabular-nums)。 */
  --font-ja: "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    Meiryo, "Segoe UI", system-ui, sans-serif;

  /* 地(青〜グレーのグラデーション) */
  --n-bg1: #0b1a33;
  --n-bg2: #14305c;
  --n-bg3: #2a3b55;
  --n-bg4: #4a5568;

  /* 濃い地の上に出す明るい文字 */
  --n-on-dark: #e6edf7;
  --n-on-dark-soft: #b9cdee;
  --n-on-dark-faint: #8fa6cc;
  --n-link-dark: #9cc4ff;

  /* すりガラスのカードの中(明るい地の上の濃い文字) */
  --n-ink: #0f1a2e;
  --n-ink-mid: #334155;
  --n-ink-soft: #64748b;
  --n-ink-faint: #94a3b8;
  --n-line: #e2e8f0;
  --n-line-strong: #cbd5e1;

  /* 青(主役の 1 色) */
  --n-blue: #2563eb;
  --n-blue-deep: #1d4ed8;
  --n-blue-ink: #1e3a8a;
  --n-blue-tint: #dbeafe;

  --n-ok: #22c55e;
  --n-ok-tint: #dcfce7;
  --n-ok-ink: #14532d;
  --n-err: #ef4444;
  --n-err-tint: #fee2e2;
  --n-err-ink: #991b1b;

  --n-card-radius: 18px;
  --n-btn-radius: 14px;
  --n-input-radius: 12px;

  --n-shadow: 0 22px 48px rgba(2, 8, 23, .45);
  --n-shadow-soft: 0 10px 26px rgba(2, 8, 23, .28);
  --n-ring: 0 0 0 4px rgba(59, 130, 246, .25);
}

/* ---------- 地とレイヤー ---------- */

body.ui-network {
  min-height: 100vh;
  background: linear-gradient(160deg,
      var(--n-bg1) 0%, var(--n-bg2) 38%, var(--n-bg3) 70%, var(--n-bg4) 100%)
    fixed no-repeat;
  background-color: var(--n-bg2);
  color: var(--n-on-dark);
  font-variant-numeric: tabular-nums;
}

/* 背景のネットワーク図(base.html が入れる飾り)。触れない・読み上げない。 */
.ui-network .netbg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ui-network .netbg .n {
  animation: net-blink 4s ease-in-out infinite;
}

.ui-network .netbg .n:nth-child(2n) { animation-delay: 1.3s; }
.ui-network .netbg .n:nth-child(3n) { animation-delay: 2.2s; }

@keyframes net-blink {
  0%, 100% { opacity: .45; }
  50% { opacity: .95; }
}

.ui-network main {
  position: relative;
  z-index: 1;
}

.ui-network :focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* ---------- ヘッダー(透明寄り) ---------- */

.ui-network .topbar {
  min-height: 56px;
  background: rgba(11, 26, 51, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-network .topbar .brand {
  display: inline-flex;
  align-items: center;
  flex: none;                 /* 縮めない(縮むと文字が折り返す) */
  gap: 8px;                   /* ブランドマークのぶんだけ classic より詰める */
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 角丸の青いグラデーション正方形 + プリンターの線アイコン */
.ui-network .brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, #60a5fa, var(--n-blue));
  box-shadow: 0 6px 16px rgba(37, 99, 235, .5);
  color: #fff;
}

.ui-network .brandmark svg { width: 17px; height: 17px; }

/* タブ(依頼する/依頼一覧/受付停止)は **1 行のまま**。
   狭い画面でリンクが縮められると 4 文字が 2 行に折り返して読みづらかった
   (施主指摘 2026-08-20)。文字の寸法と余白は classic の .topbar nav a と
   同じにし(14px・太さ 400・padding 0 10px)、それでも入りきらないときは
   折り返さずに**横へ流す**。見た目(色・角丸・ハイライト)は変えない。 */

.ui-network .topbar nav {
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;          /* Firefox: 横棒を出さない */
  -ms-overflow-style: none;
}

.ui-network .topbar nav::-webkit-scrollbar { display: none; }

.ui-network .topbar nav a {
  flex: none;
  padding: 0 10px;
  border-bottom: 0;
  border-radius: 10px;
  color: #cfe0ff;
  font-weight: 400;
  white-space: nowrap;
}

.ui-network .topbar nav a:hover,
.ui-network .topbar nav a:active {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-bottom-color: transparent;
}

/* ---------- カードの外の文字(濃い地の上) ---------- */

.ui-network main > .hint,
.ui-network .listhead .hint,
.ui-network .uiswitch .hint {
  color: var(--n-on-dark-soft);
}

.ui-network main > .hint a,
.ui-network .listhead .hint a,
.ui-network .uiswitch .hint a { color: var(--n-link-dark); }

.ui-network .listhead h1 {
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
}

.ui-network .listhead label,
.ui-network .uiswitch p { color: #dbe6f7; }

.ui-network .empty { color: var(--n-on-dark-faint); }

/* ---------- ログアウト(目立たないように小さく) ----------
   大きさ・押せる範囲(44px)・上の余白は style.css のまま。
   ここは濃い地の上で読める文字色だけを足す(カードの外に出るので、
   どの画面でもこの 1 組で足りる)。 */

/* 背景のネットワーク図(.netbg)は position:fixed の z-index:0 なので、
   main と同じように 1 段持ち上げないと**飾りが文字の上に重なる**
   (文字がかすれて見切れたように見える原因だった)。 */
.ui-network .pagefoot {
  position: relative;
  z-index: 1;
}

.ui-network .pagefoot .logout-quiet button { color: var(--n-on-dark-faint); }

.ui-network .pagefoot .logout-quiet button:hover,
.ui-network .pagefoot .logout-quiet button:active { color: var(--n-on-dark); }

/* ---------- 画面デザインの切り替え(/files の上) ---------- */

.ui-network .uiswitch {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--n-card-radius);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ui-network .uiswitch-now b { color: #fff; }

/* ---------- すりガラスのカード ---------- */

.ui-network .card,
.ui-network .joblist .job,
.ui-network .tablewrap {
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--n-card-radius);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--n-shadow);
  color: var(--n-ink);
}

.ui-network .card {
  padding: 22px 20px;
  margin-bottom: 18px;
}

.ui-network .card h1 {
  color: var(--n-ink);
  font-weight: 700;
  letter-spacing: .03em;
}

.ui-network .card a,
.ui-network .joblist a,
.ui-network .tablewrap a { color: var(--n-blue-deep); }

.ui-network .card .hint,
.ui-network .joblist .hint,
.ui-network .tablewrap .hint { color: var(--n-ink-soft); }

/* リンクの姿をしたボタン(「依頼一覧を見る」など)はボタンの色のまま */
.ui-network .card a.btn,
.ui-network .joblist a.btn,
.ui-network .tablewrap a.btn { color: var(--n-ink); }

.ui-network a.btn.primary { color: #fff; }

/* ---------- フォーム ---------- */

.ui-network label {
  color: var(--n-ink-mid);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ui-network input[type="text"],
.ui-network input[type="password"],
.ui-network input[type="number"],
.ui-network input[type="date"],
.ui-network input[type="time"],
.ui-network input[type="search"],
.ui-network textarea,
.ui-network select {
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--n-line-strong);
  border-radius: var(--n-input-radius);
  background: #fff;
  color: var(--n-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ui-network input:focus,
.ui-network textarea:focus,
.ui-network select:focus {
  outline: none;
  border-color: var(--n-blue);
  box-shadow: var(--n-ring);
}

.ui-network input::placeholder,
.ui-network textarea::placeholder { color: var(--n-ink-faint); }

/* ファイル選び。design の「点線で囲った投入口」に寄せる。 */
.ui-network input[type="file"] {
  padding: 14px;
  border: 1.5px dashed #93b4e6;
  border-radius: var(--n-input-radius);
  background: linear-gradient(180deg, #f4f8ff, #eaf1fd);
  color: var(--n-blue-ink);
}

.ui-network label.check {
  color: var(--n-ink-mid);
  font-weight: 400;
}

.ui-network label.check input[type="checkbox"] { accent-color: var(--n-blue); }

.ui-network label.sec { border-top-color: var(--n-line); }

.ui-network fieldset { border-top-color: var(--n-line); }

.ui-network legend {
  color: var(--n-ink-mid);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- 選択チップ ---------- */

.ui-network .chip span {
  min-height: var(--tap);
  padding: 0 16px;
  border: 1.5px solid var(--n-line-strong);
  border-radius: 999px;
  background: #fff;
  color: #1e293b;
  font-weight: 500;
  transition: border-color .15s ease, background .15s ease,
    color .15s ease, box-shadow .15s ease;
}

.ui-network .chip span:hover { border-color: #94b8ec; }

/* 選んだチップは青いハロー(塗りつぶさない = 文字が読みやすい) */
.ui-network .chip input:checked + span {
  border-color: var(--n-blue);
  background: linear-gradient(180deg, #eaf2ff, var(--n-blue-tint));
  color: var(--n-blue-ink);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

.ui-network .chip input:focus-visible + span {
  outline: 2px solid var(--n-blue);
  outline-offset: 2px;
}

/* ---------- ボタン ---------- */

.ui-network .btn {
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid #d3deee;
  border-radius: var(--n-btn-radius);
  background: #eef3fb;
  color: var(--n-ink);
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .12s ease, box-shadow .2s ease,
    background .2s ease, border-color .2s ease;
}

.ui-network .btn:hover {
  border-color: #bfd3f2;
  background: #e4ecf9;
}

.ui-network .btn:active { transform: translateY(1px); }

.ui-network .btn[disabled] { transform: none; }

.ui-network .btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6 0%, var(--n-blue) 60%,
    var(--n-blue-deep) 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .45),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.ui-network .btn.primary:hover,
.ui-network .btn.primary:active {
  border-color: transparent;
  background: linear-gradient(135deg, #3b82f6 0%, var(--n-blue-deep) 100%);
  box-shadow: 0 14px 30px rgba(37, 99, 235, .6),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

.ui-network .btn.danger {
  border-color: #f3c5c5;
  background: #fdecec;
  color: #7f1d1d;
}

.ui-network .btn.danger:hover { border-color: #e7a9a9; background: #fbdede; }

.ui-network .btn.small {
  min-height: var(--tap);
  padding: 9px 15px;
  border-radius: 12px;
  font-size: .8125rem;
}

.ui-network .btn.big {
  min-height: 52px;
  border-radius: var(--n-btn-radius);
  font-size: 1rem;
}

/* ---------- 注記・エラー ---------- */

.ui-network .error {
  border: 1px solid #fecaca;
  border-left: 4px solid var(--n-err);
  border-radius: 12px;
  background: #fff5f5;
  color: #7f1d1d;
}

.ui-network .notebox {
  border: 1px solid var(--n-line);
  border-left: 3px solid var(--n-line-strong);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--n-ink-mid);
}

.ui-network .joblist .notebox.err,
.ui-network .card .notebox.err {
  border-color: #fecaca;
  border-left-color: var(--n-err);
  background: #fff5f5;
  color: #7f1d1d;
}

.ui-network .joblist .notebox.err small,
.ui-network .card .notebox.err small { color: #9f1239; }

.ui-network .joblist .notebox.run,
.ui-network .card .notebox.run {
  border-color: #bfdbfe;
  border-left-color: var(--n-blue);
  background: #f2f7ff;
  color: var(--n-blue-ink);
}

/* 一覧の頭にある「受付を止めている相手」は濃い地の上に出る */
.ui-network .listhead .notebox.err {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  border: 1px solid rgba(248, 113, 113, .5);
  border-left: 1px solid rgba(248, 113, 113, .5);
  border-radius: 12px;
  background: rgba(239, 68, 68, .14);
  color: #fecaca;
  font-weight: 600;
}

.ui-network .listhead .notebox.err a { color: #fff; }

/* ---------- 自動印刷の状態(濃い地の上の 1 行の帯) ----------
   ピル/バッジ風はやめ、classic と同じ「左揃えの帯」にする(施主指示
   2026-08-20。丸い枠に長い文が入って行がガタガタになり読みにくかった)。
   長い文は自然に折り返し、太字は <b> だけ。 */

.ui-network .autostate {
  display: block;
  min-height: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-left: 3px solid rgba(255, 255, 255, .40);
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  color: var(--n-on-dark);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
}

/* ピルのときに付けていた丸い点は出さない */
.ui-network .autostate::before { content: none; }

.ui-network .autostate b { font-weight: 700; color: #fff; }

.ui-network .autostate.on {
  border-color: rgba(74, 222, 128, .40);
  border-left-color: #4ade80;
  background: rgba(34, 197, 94, .14);
  color: #d7f5e3;
}

.ui-network .autostate.on b { color: #bbf7d0; }

.ui-network .autostate.off {
  border-color: rgba(248, 113, 113, .45);
  border-left-color: #f87171;
  background: rgba(239, 68, 68, .14);
  color: #fbd5d5;
}

.ui-network .autostate.off b { color: #fee2e2; }

/* ---------- 依頼カード(左の帯で状態を示す) ---------- */

.ui-network .joblist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 0;
}

.ui-network .joblist .job {
  padding: 15px 15px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  border-left: 4px solid var(--n-line-strong);
}

/* 未印刷 = 青 / 印刷中 = 青(脈打つ) / 印刷済み = 緑 / エラー = 赤 / 取消 = 灰 */
.ui-network .joblist .job.pending { border-left-color: #3b82f6; }
.ui-network .joblist .job.printing { border-left-color: #3b82f6; }
.ui-network .joblist .job.printed { border-left-color: var(--n-ok); }
.ui-network .joblist .job.error { border-left-color: var(--n-err); }

.ui-network .joblist .job.canceled {
  border-left-color: #94a3b8;
  opacity: .78;
}

.ui-network .joblist .job.printing {
  animation: net-band 1.6s ease-in-out infinite;
}

@keyframes net-band {
  0%, 100% { border-left-color: #3b82f6; }
  50% { border-left-color: #93c5fd; }
}

.ui-network .jobdate { color: var(--n-ink); font-weight: 700; }
.ui-network .jobdate small { color: var(--n-ink-soft); }
.ui-network .jobmeta { color: var(--n-ink-mid); }
.ui-network .jobmeta b { color: var(--n-ink); font-weight: 700; }
.ui-network .jobmeta small { color: var(--n-ink-faint); }
.ui-network .stamp { color: var(--n-ink-soft); }
.ui-network .filelist li { color: var(--n-ink-mid); }
.ui-network .filelist small { color: var(--n-ink-faint); }

.ui-network .joblist .job.canceled,
.ui-network .joblist .job.canceled .jobdate,
.ui-network .joblist .job.canceled .jobmeta,
.ui-network .joblist .job.canceled .filelist { color: var(--n-ink-soft); }

/* ---------- 依頼のボタン(印刷済みにする/取消/再印刷予約) ----------
   .btn(46px・15px)と .btn.small(44px・13px)が混ざって高さも文字も
   ばらついていたので、**この 3 つだけは同じ寸法に揃える**(施主指示
   2026-08-20)。並べ方は classic の .jobactions と同じ(横並び・折り返し・
   gap 8px。画面が広いときは style.css の @media が縦 1 列 168px にする)。 */

/* 並べ方(横並び・折り返し・gap 8px・画面が広いときは縦 1 列 168px)は
   style.css の .jobactions をそのまま使う。ここで align-items などを
   上書きすると @media より強くなって classic と配置がずれる。 */

.ui-network .jobactions .btn,
.ui-network .jobactions .btn.small {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

/* ---------- 状態バッジ ---------- */

.ui-network .badge {
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #eef3fb;
  color: var(--n-ink-mid);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ui-network .badge.ok { background: var(--n-ok-tint); color: var(--n-ok-ink); }
.ui-network .badge.todo { background: var(--n-blue-tint); color: var(--n-blue-ink); }
.ui-network .badge.off { background: #e9edf3; color: var(--n-ink-soft); }
.ui-network .badge.err { background: var(--n-err-tint); color: var(--n-err-ink); }

.ui-network .badge.run {
  background: var(--n-blue-tint);
  color: var(--n-blue-ink);
}

/* 印刷中だけ、点が脈を打つ(進捗は出さない) */
.ui-network .badge.run::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-blue);
  animation: net-beat 1.2s ease-in-out infinite;
}

@keyframes net-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); }
}

/* LINE / メールの小さな印 */
.ui-network .linemark {
  padding: 1px 7px;
  border: 0;
  border-radius: 999px;
  background: #e0ecff;
  color: var(--n-blue-ink);
  font-weight: 700;
}

/* ---------- 受付完了 ---------- */

.ui-network .summary { border-top-color: var(--n-line); }
.ui-network .summary div { border-bottom-color: var(--n-line); }
.ui-network .summary dt { color: var(--n-ink-soft); }
.ui-network .summary dd { color: var(--n-ink); }
.ui-network .done-actions { border-top-color: var(--n-line); }

/* ---------- 表(ファイル一覧・受付停止) ---------- */

.ui-network .tablewrap {
  padding: 4px 6px;
  border-top: 1px solid rgba(255, 255, 255, .7);
}

.ui-network .filetable th {
  color: var(--n-ink-soft);
  font-weight: 700;
  border-bottom: 1px solid var(--n-line-strong);
}

.ui-network .filetable td {
  border-bottom: 1px solid var(--n-line);
  color: var(--n-ink-mid);
  font-variant-numeric: tabular-nums;
}

.ui-network .filetable tr.canceled td { color: var(--n-ink-soft); }
.ui-network .filetable .namecell { color: var(--n-ink); }
.ui-network .filetable .linkcell small { color: var(--n-ink-faint); }
.ui-network .filetable .delcell small { color: var(--n-ink-faint); }

/* ---------- ログイン ---------- */

.ui-network .login h1 { letter-spacing: .04em; }

.ui-network .login input[type="password"] {
  min-height: 54px;
  border-radius: var(--n-input-radius);
}

.ui-network .filelogin input[type="password"] { min-height: 48px; }

.ui-network .sublogin { border-top-color: var(--n-line); }

/* ---------- 画面が広いとき ---------- */
/* PC でも main は 720px のまま(2 カラムにはしない・施主指示) */

@media (min-width: 640px) {
  .ui-network .card { padding: 26px 24px; }
  .ui-network .joblist .job { padding: 18px 18px 16px; }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  .ui-network .netbg .n,
  .ui-network .badge.run::before,
  .ui-network .joblist .job.printing {
    animation: none;
  }
  .ui-network .btn { transition: none; }
  .ui-network .btn:active { transform: none; }
}