/* ============================================================
   Veqta UI — 共通スタイル
   素のHTML/CSS/JS 前提。1ファイル1画面。外部ライブラリなし。
   使い方: <link rel="stylesheet" href="veqta-ui.css">
           <body data-app="console">  お客様の管理画面（紺）
           <body data-app="admin">    運営コンソール（黒＋琥珀）
           <body data-app="public">   記者・公開画面（紺）
   部品（.vq-*）は3つの見た目で完全に共通。色だけがトークンで差し替わる。
   ============================================================ */

/* ---- 1. トークン ---------------------------------------- */
:root{
  /* 色：お客様の管理画面（既定） */
  --bg:#0d1420;
  --panel:#121c2b;
  --panel-2:#0f1828;
  --panel-3:#0a1019;
  --ink:#e8edf5;
  --ink-2:#b7c4d4;
  --ink-3:#8b9bb0;
  --line:rgba(232,237,245,.11);
  --line-soft:rgba(232,237,245,.07);
  --line-hard:rgba(232,237,245,.2);
  --accent:#2b62c4;
  --accent-fg:#ffffff;
  --accent-soft:#1c2f4d;
  --link:#9ec0f5;

  /* 状態色：全画面共通。意味を固定し、画面ごとに変えない */
  --ok:#3fae6d;      /* 有効・配信中・接続済み・承認された */
  --warn:#d98f2b;    /* リハ中・視聴中・承認待ち・注意 */
  --info:#4a83dd;    /* 招待済み・管理者 */
  --err:#d9564a;     /* 失効・停止・オフライン・不承認 */
  --idle:#6d7c90;    /* 未設定・準備中・終了 */
  --badge-fg:#0d1420;

  /* 密度：業務用。行高と余白はこの2つだけで調整する */
  --row-h:34px;
  --row-h-dense:28px;
  --pad:12px;
  --gap:14px;
  --radius:6px;

  /* 文字 */
  --font:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',YuGothic,system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,'Courier New',monospace;
  --fs-h1:17px;
  --fs-h2:12.5px;
  --fs-base:13px;
  --fs-sm:11.5px;
  --fs-xs:10.5px;

  /* 入力欄の幅：内容に入る文字数で決める（勝手な1frは禁止） */
  --w-pin:92px;      /* 4〜6桁の数字 */
  --w-num:80px;      /* 回線数・枠数など2桁 */
  --w-time:96px;     /* 17:30 */
  --w-date:124px;    /* 2026-09-22 */
  --w-datetime:176px;/* 2026-09-22 17:30 */
  --w-money:112px;   /* ¥660,000 */
  --w-name:120px;    /* 人名 */
  --w-org:180px;     /* 会社名・媒体名 */
  --w-mail:220px;    /* メールアドレス */
  --w-tel:148px;     /* 03-5555-0120 */
  --w-select:168px;  /* 区分・プラン */
}
body[data-app="admin"]{
  --bg:#12100b; --panel:#1a160f; --panel-2:#17130c; --panel-3:#0e0c07;
  --ink:#f2ece0; --ink-2:#c8bca6; --ink-3:#a4977f;
  --line:rgba(242,236,224,.12); --line-soft:rgba(242,236,224,.07); --line-hard:rgba(242,236,224,.2);
  --accent:#d9a23f; --accent-fg:#12100b; --accent-soft:#31260f;
  --badge-fg:#12100b;
}
body[data-app="public"]{
  --bg:#0a1626; --panel:#0d1c31; --panel-2:#0b1727; --panel-3:#081422;
  --ink:#e6edf8; --ink-2:#c3d3e8; --ink-3:#8ea3bd;
  --line:rgba(230,237,248,.12); --line-soft:rgba(230,237,248,.1); --line-hard:rgba(230,237,248,.22);
  --accent:#2b62c4; --accent-fg:#fff; --link:#8fb6f0;
}

/* ---- 2. 土台 --------------------------------------------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--ink)}
h1{font-size:var(--fs-h1); font-weight:700; margin:0}
h2{font-size:var(--fs-h2); font-weight:700; margin:0}
.vq-sub{font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px}
.vq-mono{font-family:var(--mono); font-size:12.5px}
.vq-num{font-variant-numeric:tabular-nums}  /* 数字が並ぶ列には必ず付ける */
.vq-nowrap{white-space:nowrap}
.vq-ellip{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}

/* ---- 3. 骨格：左メニュー＋ヘッダー＋本体 ----------------- */
.vq-shell{display:flex; min-width:1180px; min-height:100vh}
.vq-nav{
  width:232px; flex:0 0 232px; background:var(--panel-3);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
}
.vq-brand{
  height:52px; display:flex; align-items:center; gap:9px;
  padding:0 16px; border-bottom:1px solid var(--line);
  font-size:15px; font-weight:700; letter-spacing:.14em;
}
.vq-nav-group{padding:14px 0 6px; border-top:1px solid var(--line-soft)}
.vq-nav-group:first-of-type{border-top:none}
.vq-nav-label{font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.08em; padding:0 16px 6px}
.vq-nav-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 16px; cursor:pointer; color:var(--ink-3);
  border-left:2px solid transparent; text-decoration:none;
}
.vq-nav-item:hover{color:var(--ink)}
.vq-nav-item[aria-current="page"]{
  color:var(--ink); background:var(--accent-soft); border-left-color:var(--accent);
}
.vq-nav-foot{margin-top:auto; padding:12px 16px; border-top:1px solid var(--line)}
.vq-main{flex:1; min-width:0; display:flex; flex-direction:column}
.vq-head{
  height:52px; display:flex; align-items:center; justify-content:flex-end; gap:16px;
  padding:0 20px; border-bottom:1px solid var(--line); background:var(--panel-3);
  font-size:12px; color:var(--ink-3);
}
.vq-body{padding:18px 20px 40px; display:flex; flex-direction:column; gap:var(--gap)}
/* 代理表示の帯：お客様の画面と取り違えないための最上部の帯 */
.vq-band{
  display:flex; align-items:center; gap:14px; padding:9px 20px;
  background:#c9902f; color:#12100b;
}
.vq-band > :last-child{margin-left:auto}

/* ---- 4. パネル ------------------------------------------- */
.vq-panel{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden}
.vq-panel-hd{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:34px; padding:0 var(--pad);
  border-bottom:1px solid var(--line); background:var(--panel-2);
  font-size:var(--fs-h2); font-weight:700;
}
.vq-panel-bd{padding:10px var(--pad)}
.vq-note{font-size:var(--fs-sm); color:var(--ink-3)}

/* ---- 5. 表（grid + subgrid） -----------------------------
   親に --cols を書き、行は grid-column:1/-1 + subgrid で列を継ぐ。
   これで「グループ見出しをまたいでも列が揃う」= エクセル的な整列。
   列幅は内容に合わせた固定値＋伸びる列は1つだけ minmax(0,1fr)。
--------------------------------------------------------- */
.vq-table{display:grid; grid-template-columns:var(--cols)}
.vq-table-scroll{overflow-x:auto}           /* 列が多い表はこれで包む */
.vq-th{
  font-size:var(--fs-xs); color:var(--ink-3); letter-spacing:.04em;
  padding:6px var(--pad); background:var(--panel-2);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.vq-th--group{                                /* 2段ヘッダーの上段（見積／請求／入金） */
  font-weight:700; color:var(--ink-2); background:var(--panel-3);
  padding:5px var(--pad); border-bottom:1px solid var(--line);
}
.vq-row{
  grid-column:1/-1; display:grid; grid-template-columns:subgrid;
  align-items:center; min-height:var(--row-h);
  border-bottom:1px solid var(--line-soft);
}
.vq-row > *{padding:0 var(--pad); min-width:0}
.vq-row--dense{min-height:var(--row-h-dense)}
.vq-row--muted{color:var(--ink-3)}            /* 終了案件など沈める行 */
.vq-group{                                    /* グループ見出し行（配信中／取引先名など） */
  grid-column:1/-1; display:flex; align-items:center; gap:10px;
  height:28px; padding:0 var(--pad); background:var(--panel-2);
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-sm);
}
.vq-total{                                    /* 合計行 */
  grid-column:1/-1; display:grid; grid-template-columns:subgrid;
  align-items:center; min-height:var(--row-h);
  background:var(--panel-3); border-top:1px solid var(--line-hard); font-weight:700;
}
.vq-total > *{padding:0 var(--pad)}
.vq-r{text-align:right}                       /* 金額・数量は右揃え＋.vq-num */
.vq-sep{border-right:1px solid var(--line-soft)} /* 見積|請求|入金 の境目 */

/* ---- 6. バッジ（意味と色を固定） ------------------------- */
.vq-badge{
  display:inline-block; font-size:var(--fs-xs); font-weight:700;
  border-radius:3px; padding:2px 6px; white-space:nowrap;
  color:var(--badge-fg); background:var(--idle);
}
.vq-badge--ok{background:var(--ok)}
.vq-badge--warn{background:var(--warn)}
.vq-badge--info{background:var(--info)}
.vq-badge--err{background:var(--err)}
.vq-badge--idle{background:var(--line); color:var(--ink-2)}
.vq-badge--blink{animation:vq-blink 1.6s ease-in-out infinite} /* 視聴中・承認待ちのみ */
@keyframes vq-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .vq-badge--blink{animation:none} }

/* ---- 7. ボタン：安全／中／重大 の3段階 ------------------- */
.vq-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 12px; border:1px solid var(--line-hard);
  border-radius:4px; background:transparent; color:var(--ink);
  font-family:var(--font); font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.vq-btn:hover{border-color:var(--ink-3)}
.vq-btn--sm{height:26px; padding:0 9px; font-size:11px; color:var(--ink-2)}
.vq-btn--primary{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:700}
.vq-btn--mid{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.vq-btn--danger{color:var(--err); border-color:color-mix(in srgb,var(--err) 55%,transparent); font-weight:700}
.vq-btn--go{background:var(--ok); color:#06210f; border-color:transparent; font-weight:700}
.vq-btn--block{width:100%; height:44px; font-size:15px} /* 受信拠点・記者画面の主操作 */
/* 押せないボタンは、押せないように見せる。
   配信スタートのように押し損ねが事故になる操作で、色が変わらないと
   「押したのに動かない」と何度も押されてしまう。 */
.vq-btn:disabled,.vq-btn[disabled]{
  opacity:.38; cursor:not-allowed; filter:grayscale(.55);
}
.vq-btn:disabled:hover,.vq-btn[disabled]:hover{border-color:var(--line)}
.vq-btn-row{display:flex; align-items:center; gap:8px; flex:0 0 auto}

/* ---- 8. 入力（幅は内容で決める） ------------------------- */
.vq-input,.vq-select,.vq-textarea{
  height:28px; padding:0 8px; border:1px solid var(--line-hard); border-radius:4px;
  background:var(--panel-3); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-base); outline:none; min-width:0;
}
.vq-input:focus,.vq-select:focus,.vq-textarea:focus{border-color:var(--accent)}
.vq-textarea{height:auto; padding:5px 8px; line-height:1.5; resize:vertical}
.vq-input--mono{font-family:var(--mono)}
.vq-input--pin{width:var(--w-pin); font-family:var(--mono); font-size:17px; letter-spacing:.18em; text-align:center; height:32px}
.vq-w-num{width:var(--w-num)}
.vq-w-time{width:var(--w-time)}
.vq-w-date{width:var(--w-date)}
.vq-w-datetime{width:var(--w-datetime)}
.vq-w-money{width:var(--w-money)}
.vq-w-name{width:var(--w-name)}
.vq-w-org{width:var(--w-org)}
.vq-w-mail{width:var(--w-mail)}
.vq-w-tel{width:var(--w-tel)}
.vq-w-select{width:var(--w-select)}
.vq-w-fill{width:100%}

/* ---- 9. 2列フォーム -------------------------------------
   ラベル左・値右を2組横に並べる。長い項目は span2 / span4 で行を占める。
   1行に詰める部品は3つまで。入りきらないものは行を増やす（幅を潰さない）。
--------------------------------------------------------- */
.vq-form{display:grid; grid-template-columns:104px minmax(0,1fr) 104px minmax(0,1fr); gap:8px 10px; align-items:center}
.vq-form--1col{grid-template-columns:104px minmax(0,1fr)}
.vq-form > label{font-size:var(--fs-sm); color:var(--ink-3); white-space:nowrap}
.vq-span2{grid-column:span 2}
.vq-span3{grid-column:span 3}
.vq-span4{grid-column:span 4}
.vq-field-row{display:flex; align-items:center; gap:8px; min-width:0} /* 1セルに複数部品 */
.vq-sub-field > label{padding-left:12px; border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.vq-readonly{color:var(--ink-3)}  /* 「未設定」表示 */

/* ---- 10. 読み取り専用の2列表（概要・契約など） ----------- */
.vq-kv{display:grid; grid-template-columns:96px minmax(0,1fr) 96px minmax(0,1fr)}
.vq-kv > dt{
  font-size:var(--fs-sm); color:var(--ink-3); padding:6px 10px;
  background:var(--panel-2); border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  margin:0;
}
.vq-kv > dd{
  padding:6px 10px; margin:0; min-width:0; overflow-wrap:anywhere;
  border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
}

/* ---- 11. 統計タイル ------------------------------------- */
.vq-stats{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.vq-stat{background:var(--panel); padding:9px var(--pad)}
.vq-stat b{display:block; font-size:18px; font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums}
.vq-stat span{font-size:var(--fs-xs); color:var(--ink-3)}

/* ---- 12. 現場に打ち込む値（コピー前提） ------------------ */
.vq-value{
  display:inline-block; max-width:100%; font-family:var(--mono); font-size:13px;
  background:var(--panel-3); border:1px solid var(--line); border-radius:4px;
  padding:3px 8px; white-space:normal; overflow-wrap:anywhere; line-height:1.45;
}
.vq-value--pin{font-size:16px; font-weight:700; letter-spacing:.22em; padding:2px 10px}
.vq-copy-row{display:grid; grid-template-columns:126px minmax(0,1fr) auto; gap:10px; align-items:start; padding:7px var(--pad); border-bottom:1px solid var(--line-soft)}

/* ---- 13. モーダル --------------------------------------- */
.vq-modal{position:fixed; inset:0; z-index:50; background:rgba(5,8,13,.72); display:flex; align-items:flex-start; justify-content:center; padding:32px 20px; overflow:auto}
.vq-modal-card{width:100%; max-width:1000px; background:var(--panel); border:1px solid var(--line-hard); border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.vq-modal-hd,.vq-modal-ft{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; height:46px; background:var(--panel-2)}
.vq-modal-hd{border-bottom:1px solid var(--line)}
.vq-modal-ft{border-top:1px solid var(--line); height:auto; padding:10px 16px}
.vq-modal-bd{padding:14px 16px; display:flex; flex-direction:column; gap:12px}
.vq-fieldset{border:1px solid var(--line); border-radius:var(--radius)}
.vq-fieldset > legend{float:left; width:100%; display:flex; align-items:center; gap:8px; height:30px; padding:0 var(--pad); background:var(--panel-2); border-bottom:1px solid var(--line); font-size:var(--fs-sm); font-weight:700}
.vq-fieldset > .vq-form{clear:both; padding:10px var(--pad)}

/* ---- 14. 警告ブロック（メール設定・承認など） ------------ */
.vq-alert{display:flex; align-items:flex-start; gap:10px; padding:10px var(--pad); border-radius:var(--radius); border:1px solid var(--line-hard)}
.vq-alert--err{border-color:color-mix(in srgb,var(--err) 45%,transparent); background:color-mix(in srgb,var(--err) 13%,transparent)}
.vq-alert--warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent); background:color-mix(in srgb,var(--warn) 12%,transparent)}
.vq-alert--ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 10%,transparent)}
.vq-alert > .vq-badge{flex:0 0 auto}

/* ---- 15. カレンダー（空き枠） --------------------------- */
.vq-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line)}
.vq-cal-day{background:var(--panel); min-height:124px; padding:7px 8px 8px; display:flex; flex-direction:column; gap:5px}
.vq-cal-day--full{outline:1.5px solid var(--err); outline-offset:-1px}
.vq-bar{height:4px; border-radius:2px; background:var(--line)}
.vq-bar > i{display:block; height:4px; border-radius:2px; background:var(--ok)}
.vq-bar--busy > i{background:var(--warn)}
.vq-bar--full > i{background:var(--err)}
.vq-event{border-left:2px solid var(--accent); padding:1px 0 1px 6px; font-size:11px}
.vq-event--adj{opacity:.45}  /* 前日・翌日 */

/* ---- 16. 公開画面のカード（記者・承認・拠点） ------------ */
.vq-card{max-width:420px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:28px 22px}
.vq-card--wide{max-width:480px}
.vq-steps{font-size:var(--fs-sm); color:var(--ink-3); letter-spacing:.08em}
.vq-code{display:flex; gap:7px}
.vq-code input{width:42px; height:54px; text-align:center; font-family:var(--mono); font-size:24px; color:var(--ink); background:var(--panel-3); border:1px solid var(--line-hard); border-radius:6px; outline:none}
/* 透かし：不透明度だけに頼らず、位置と影で「消せない／見やすい」を両立 */
.vq-stage{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--panel-3)}
.vq-wm{position:absolute; color:rgba(255,255,255,.62); text-shadow:0 1px 3px rgba(0,0,0,.6); font-size:11px; font-weight:700; pointer-events:none}
.vq-wm--tl{top:10px; left:12px}
.vq-wm--center{inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.085); text-shadow:none; font-size:34px; letter-spacing:.14em; transform:rotate(-24deg)}
.vq-wm--roam{right:14px; bottom:52px; font-weight:400; font-family:var(--mono); color:rgba(255,255,255,.5)}
.vq-wm--bar{left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 12px; font-weight:400; color:rgba(255,255,255,.82); background:linear-gradient(to top,rgba(4,9,16,.78),rgba(4,9,16,0))}

/* ---- 17. トースト --------------------------------------- */
.vq-toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:6px; background:var(--panel); border:1px solid var(--line-hard); box-shadow:0 12px 30px rgba(0,0,0,.45); font-size:12.5px}

/* ---- 18. 印刷帳票は別ファイル ---------------------------
   見積書・請求書はA4横・白地・ベタ塗りなし。
   見積＝琥珀(#a3762a)、請求＝紺(#2456b0) のアクセント罫のみで区別する。
   明細は8.5pt／注記7.5pt、行の padding は 1.5mm、罫線 .7px。
--------------------------------------------------------- */