/* =====================================================================
   Okaberry オーダーPF — 内部管理ダッシュボード admin.css
   ---------------------------------------------------------------------
   ★これは Office N 運用者（うちら）が PF のサンプルデータを更新するための
     「内部管理コンソール」です。クライアント配布・外部公開は対象外。
   ★配色トークンは OP 本体 style.css と同一（ブランド統一）。
   ===================================================================== */
:root{
  --plum:#4b0346; --plum-2:#760b6a; --deep-plum:#35002f;
  --gold:#c7a66d; --gold-soft:#e6d3ae; --rose:#a96582; --green:#43885f;
  --ivory:#fbf6ef; --paper:#fffdf9; --ink:#20121d;
  --line:#e6d8c6; --sub:#8a7684; --danger:#c8323e; --info:#2f6fd0;
  --sans:"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --serif:"Bodoni 72","Didot","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --radius:10px;
  --shadow-card:0 4px 18px rgba(53,0,47,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--ivory);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:14px;
}
.hidden{display:none !important}
button{font-family:inherit}

/* ===== 内部管理バナー ===== */
.admin-banner{
  background:var(--deep-plum); color:var(--gold-soft);
  font-size:12px; text-align:center; padding:7px 12px; letter-spacing:.02em; line-height:1.5;
}
.admin-banner strong{color:#fff}

/* ===== ヘッダ ===== */
.admin-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:var(--plum); color:#fff; padding:12px 18px; box-shadow:var(--shadow-card);
  position:sticky; top:0; z-index:20;
}
.admin-header .brand{font-family:var(--serif); font-size:19px; letter-spacing:.05em; line-height:1.2}
.admin-header .brand small{display:block; font-family:var(--sans); font-size:9px; letter-spacing:.24em; color:var(--gold-soft); margin-top:3px}
.admin-header .role{font-size:11px; color:var(--gold-soft); text-align:right; line-height:1.4}

/* ===== タブ ===== */
.tabs{
  display:flex; gap:4px; flex-wrap:wrap; background:var(--paper);
  border-bottom:1px solid var(--line); padding:8px 12px 0; position:sticky; top:52px; z-index:15;
}
.tab{
  border:1px solid var(--line); border-bottom:none; background:#f4ecdf;
  color:var(--sub); padding:9px 15px; border-radius:8px 8px 0 0; cursor:pointer; font-size:13px; font-weight:600;
}
.tab.active{ background:var(--paper); color:var(--plum); box-shadow:0 -2px 0 var(--gold) inset; }
.tab .count{ font-size:11px; color:var(--sub); font-weight:400; margin-left:4px; }

/* ===== レイアウト ===== */
.wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); }
.panel + .panel{ margin-top:16px; }
.panel-h{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.panel-h h2{ font-size:16px; margin:0; color:var(--plum); letter-spacing:.02em; }
.panel-h .desc{ font-size:11.5px; color:var(--sub); margin-top:3px; }

/* ===== ボタン ===== */
.btn{
  border:none; background:var(--plum); color:#fff; padding:9px 16px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; letter-spacing:.02em;
}
.btn:hover{ background:var(--plum-2); }
.btn.ghost{ background:transparent; color:var(--plum); border:1px solid var(--plum); }
.btn.ghost:hover{ background:#f4ecdf; }
.btn.gold{ background:var(--gold); color:#3a2410; }
.btn.gold:hover{ background:#d8b877; }
.btn.danger{ background:transparent; color:var(--danger); border:1px solid var(--danger); }
.btn.danger:hover{ background:#fbe9ea; }
.btn.sm{ padding:5px 10px; font-size:12px; }

/* ===== テーブル ===== */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
/* スマホ幅では表が画面より広い(min-width:640px)ため横スクロールで読む設計。
   スクロール可能なことに気づきやすいよう右端をフェードし、ヒント文言を添える（T-92: id6353 軽微④） */
@media (max-width:640px){
  .table-scroll{
    background: linear-gradient(to right, transparent, transparent),
                linear-gradient(to left, var(--ivory), rgba(255,255,255,0));
    background-position: 100% 0; background-repeat: no-repeat; background-size: 24px 100%;
  }
  .table-scroll::before{
    content:"→ 横にスクロールできます"; display:block; font-size:10.5px; color:var(--sub);
    padding:0 0 4px; text-align:right;
  }
}
table.tbl{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.tbl th, table.tbl td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.tbl th{ background:#f7efe3; color:var(--sub); font-weight:600; font-size:11.5px; letter-spacing:.02em; white-space:nowrap; }
table.tbl td.num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.tbl tr:hover td{ background:#fffaf1; }
.row-actions{ white-space:nowrap; }
.empty{ color:var(--sub); font-size:13px; padding:18px 4px; text-align:center; }

/* ===== バッジ ===== */
.badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.02em; }
.badge.frozen{ background:#e4f0fb; color:#1c62b0; }
.badge.chilled{ background:#e6f6ee; color:#2c7d54; }
.badge.dry{ background:#f4ecdf; color:#8a6a2f; }
.badge.pro{ background:#f3e6f0; color:#8a2f74; }
.badge.important{ background:#fbe4e6; color:#b32833; }
.badge.info{ background:#e4eefb; color:#245fb0; }
.badge.event{ background:#f3e6f0; color:#8a2f74; }
.flag-out{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:#fbe4e6; color:#b32833; }
.flag-in{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; background:#e6f6ee; color:#2c7d54; }

/* ===== モーダル（追加/編集フォーム） ===== */
.modal-mask{ position:fixed; inset:0; background:rgba(53,0,47,.42); display:flex; align-items:flex-start; justify-content:center; padding:20px 12px; z-index:50; overflow-y:auto; }
.modal{ background:var(--paper); border-radius:var(--radius); box-shadow:0 20px 60px rgba(53,0,47,.3); width:100%; max-width:520px; margin:auto; }
.modal-h{ background:var(--plum); color:#fff; padding:13px 18px; border-radius:var(--radius) var(--radius) 0 0; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.modal-h .x{ background:none; border:none; color:var(--gold-soft); font-size:20px; cursor:pointer; line-height:1; }
.modal-body{ padding:18px; }
.modal-foot{ padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }

/* ===== フォーム ===== */
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12px; color:var(--sub); font-weight:600; margin-bottom:4px; }
.field label .req{ color:var(--danger); }
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold); border-color:var(--gold); }
.field textarea{ min-height:80px; resize:vertical; line-height:1.55; }
.field .hint{ font-size:11px; color:var(--sub); margin-top:4px; line-height:1.5; }
.field-row{ display:flex; gap:12px; }
.field-row > .field{ flex:1; }
.err-line{ color:var(--danger); font-size:12px; margin-bottom:10px; min-height:0; }
.chk{ display:flex; align-items:center; gap:8px; }
.chk input{ width:auto; }

/* ===== エクスポート ===== */
.export-out{ width:100%; min-height:280px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fbfaf7; color:#2b1f28; white-space:pre; overflow:auto; }
.note-box{ background:#f7efe3; border:1px solid var(--gold-soft); border-radius:8px; padding:12px 14px; font-size:12.5px; color:#5a4327; line-height:1.7; }
.note-box b{ color:var(--plum); }
.note-box code{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:11.5px; }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* ===== トースト ===== */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--deep-plum); color:#fff; padding:11px 20px; border-radius:22px; font-size:13px; box-shadow:0 8px 24px rgba(53,0,47,.35); z-index:80; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* ===== フッタ ===== */
.admin-foot{ max-width:1100px; margin:20px auto 40px; padding:0 16px; color:var(--sub); font-size:11.5px; line-height:1.7; }
.admin-foot b{ color:var(--plum); }

/* 履歴の item リスト */
.hist-items{ margin:0; padding-left:18px; font-size:12px; color:#42303c; }
.hist-items li{ margin:1px 0; }

@media (max-width:560px){
  .field-row{ flex-direction:column; gap:0; }
  .admin-header .brand{ font-size:17px; }
  .tab{ padding:8px 11px; font-size:12px; }
}

/* ===== Phase1 追加: ログイン / モーダル / フォーム / pill ===== */
.login-overlay{position:fixed;inset:0;background:var(--deep-plum);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.login-box{background:var(--paper);border-radius:14px;padding:28px 24px;width:100%;max-width:360px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.login-box h1{font-family:var(--serif);font-size:22px;margin:0 0 2px;color:var(--plum)}
.login-box .sub{font-size:12px;color:var(--sub);margin-bottom:16px}
.login-box label{display:block;font-size:12px;color:var(--sub);margin:10px 0 4px;font-weight:600}
.login-box input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.login-box .btn{width:100%;margin-top:16px}
.login-hint{color:var(--danger);font-size:12.5px;min-height:16px;margin-top:8px;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--plum);color:#fff;border:none;border-radius:8px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--plum-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--plum);border:1px solid var(--line)}
.btn.ghost:hover{background:#f6efe4}
.btn.ghost.danger{background:transparent;color:var(--danger);border-color:#eccccf}
.btn.ghost.danger:hover{background:#fbe6e8}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn.danger{background:var(--danger);color:#fff}
.admin-header .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.admin-header .btn.ghost:hover{background:rgba(255,255,255,.12)}

.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600}
.pill.ok{background:#e4f2ea;color:var(--green)}
.pill.danger{background:#fbe6e8;color:var(--danger)}
.pill.info{background:#e6edfb;color:var(--info)}
.pill.neutral{background:#eee9e4;color:var(--sub)}
.status-cell{display:flex;align-items:center;gap:6px;white-space:nowrap}
.status-cell .status-btn{width:auto;padding:2px 7px;font-size:12px;line-height:1.4;border-radius:6px}
td.ops{white-space:nowrap}
td.muted,.muted{color:var(--sub);text-align:center;padding:18px}

.form-col{display:flex;flex-direction:column;max-width:560px}
.form-col label{font-size:12px;color:var(--sub);font-weight:600;margin:12px 0 4px}
.form-col input,.form-col select,.form-col textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
.form-col .btn{margin-top:18px;align-self:flex-start}
.form-col .hint{font-size:11px;color:var(--sub);margin-top:5px;line-height:1.6;text-align:left}

.modal{position:fixed;inset:0;background:rgba(30,10,25,.5);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding:24px;overflow:auto}
.modal-box{background:var(--paper);border-radius:12px;width:100%;max-width:440px;padding:20px;box-shadow:0 16px 50px rgba(0,0,0,.4)}
.modal-h{font-family:var(--serif);font-size:18px;color:var(--plum);margin-bottom:8px}
#modal-body label{display:block;font-size:12px;color:var(--sub);font-weight:600;margin:10px 0 4px}
#modal-body input,#modal-body select,#modal-body textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
#modal-body input[readonly]{background:#f1ece3;color:var(--sub)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* 商品画像UI（2026-07-23 ボスid2840） */
.imgbox{display:flex; gap:12px; align-items:flex-start; margin:4px 0 10px}
.imgbox img{width:96px; height:96px; object-fit:cover; border-radius:8px; border:1px solid #ddd5c8; background:#f4f1ec}
.imgbox #f-img-empty{width:96px; height:96px; display:flex; align-items:center; justify-content:center; border:1px dashed #ccc; border-radius:8px; font-size:11px}
.imgops{display:flex; flex-direction:column; gap:6px}
.imgops .muted{font-size:11px}

/* メール文面テンプレート編集（id2970） */
.mailtpl-head{margin:18px 0 6px; padding-top:14px; border-top:1px solid #e6ded2}
.mailtpl-head .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.mailtpl-head .tags span{background:#f3ede4; border:1px solid #e0d6c8; border-radius:6px; padding:2px 8px; font-size:12px; font-family:ui-monospace,monospace}
#set-body-admin, #set-body-user{width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.7}

/* 差込タグのボタン化（id2983） */
.tags .tagbtn{background:#f3ede4; border:1px solid #d8cbb8; border-radius:6px; padding:4px 10px; font-size:12px; font-family:ui-monospace,monospace; cursor:pointer; color:#5a4632; transition:background .12s}
.tags .tagbtn:hover{background:#e9dfd0}
.tags .tagbtn:active{background:#dccfba}
.tags .tagbtn.sig{background:#eef4ec; border-color:#c7d9c2; color:#3d5a37}
#set-sig-admin, #set-sig-user{width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.7}

/* 商品一覧の補足表示（id3008 税抜併記 / id3011 在庫残数） */
.tbl .sub-note{display:block; font-size:10.5px; font-weight:400; color:var(--sub); margin-top:2px}
/* 編集モーダル内の説明文 */
#modal-body .hint{font-size:11px; color:var(--sub); margin:4px 0 2px; line-height:1.6}

/* id6247: 公開と非公開の見分け。非公開は常時赤字＋行を薄くして一目で分かるようにする */
.state-off{color:var(--danger);font-weight:700}
tr.row-off{background:#f6f6f7;color:#9aa0a6}
tr.row-off td{opacity:.72}
tr.row-off .ops{opacity:1}

/* id6262: 行のドラッグ並べ替え。左端の持ち手だけが掴める＝編集/削除の誤爆を防ぐ */
.grip{width:34px;text-align:center;color:#b6a894;cursor:grab;user-select:none;font-size:15px;touch-action:none}
.grip:active{cursor:grabbing}
.grip-h{width:34px}
tr.dragging{background:#fff6e8;box-shadow:0 2px 10px rgba(0,0,0,.12)}
tr.dragging .grip{cursor:grabbing}