/* 熊本菓房 通販受注管理システム */
:root{
  --bg:#f6f4f1; --panel:#fff; --line:#cfc7bd; --line2:#e0d9d0;
  /* ink3（補足の文字）は白地で 5.9：1。小さい文字でも読める濃さ（目安 4.5 以上）にしてある */
  --ink:#241f1c; --ink2:#463f39; --ink3:#6b635b;
  --brand:#7c2d3a; --brand-d:#5e1f2a; --brand-l:#f3e7e9;
  --gold:#b0842b; --ok:#15803d; --warn:#b45309; --err:#b91c1c;
  --blue:#2563eb;
  --r:7px; --sh:0 1px 2px rgba(36,31,28,.06), 0 1px 8px rgba(36,31,28,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  /* Windows は「游ゴシック UI」だと線が細く薄く見えるので、BIZ UDPゴシック・メイリオを先に使う。
     Mac で文字を細く見せる -webkit-font-smoothing:antialiased は付けない。 */
  font:13px/1.65 "Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Meiryo","Yu Gothic UI",system-ui,sans-serif;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:.01em}

/* ---------- レイアウト ---------- */
.wrap{display:flex; min-height:100vh}
.side{
  width:186px; flex:0 0 186px; background:#2c2522; color:#e6ded6;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side .brand{padding:15px 16px 13px; border-bottom:1px solid #3d3430}
/* ロゴは暗い地に置くので、白抜き＋背景透過にしたものを使う（static/img/logo.png）。
   元データは images/ にある製品ロゴ。 */
.side .brand .logo{display:block; width:100%; max-width:126px; height:auto; margin-bottom:5px}
.side .brand b{display:block; font-size:14px; color:#fff; letter-spacing:.04em}
.side .brand span{display:block; font-size:11.5px; color:#c9bdb1; letter-spacing:.06em}
.side nav{padding:8px 0; overflow-y:auto; flex:1}
.side nav a{
  display:flex; align-items:center; gap:9px; padding:8px 16px;
  color:#e6ddd4; font-size:13px; border-left:3px solid transparent;
}
.side nav a:hover{background:#3a312d; color:#fff; text-decoration:none}
.side nav a.on{background:#3a312d; color:#fff; border-left-color:var(--gold); font-weight:600}
.side nav .grp{padding:12px 16px 5px; font-size:11.5px; color:#b3a699; letter-spacing:.12em; font-weight:600}
.side .foot{padding:10px 16px; border-top:1px solid #3d3430; font-size:11.5px; color:#c2b6aa}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.top{
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:11px 20px; display:flex; align-items:center; gap:14px;
  position:sticky; top:0; z-index:20;
}
/* 見出しと件数は縮めない。狭い画面で1文字ずつ改行される潰れ方を防ぐ */
.top h1{font-size:15.5px; flex:none; white-space:nowrap}
.top .sub{flex:none; white-space:nowrap}
.top{overflow-x:auto}
.top .sub{color:var(--ink2); font-size:12.5px; flex:none; white-space:nowrap}
.top .sp{flex:1}
.content{padding:18px 20px 48px; flex:1}

/* ---------- パーツ ---------- */
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh)}
.card+.card{margin-top:14px}
.card>h2{
  font-size:12.5px; padding:9px 14px; border-bottom:1px solid var(--line2);
  display:flex; align-items:center; gap:8px; color:var(--ink2); letter-spacing:.03em;
}
.card>h2 .sp{flex:1}
.card .body{padding:14px}
.card .body.tight{padding:0}

.grid{display:grid; gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g23{grid-template-columns:2fr 1fr}
@media(max-width:1100px){.g2,.g3,.g23{grid-template-columns:1fr}}

.btn{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  padding:6px 13px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:5px; font-size:12.5px; cursor:pointer; font-family:inherit; line-height:1.5;
  white-space:nowrap;
}
.btn:hover{background:#faf8f6; text-decoration:none; border-color:#cfc7bd}
.btn.pri{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600}
.btn.pri:hover{background:var(--brand-d); border-color:var(--brand-d)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600}
.btn.gold:hover{filter:brightness(.93)}
.btn.sm{padding:3px 9px; font-size:11.5px}
.btn.danger{color:var(--err); border-color:#e8c9c9}
.btn.danger:hover{background:#fdf2f2}
.btn:disabled{opacity:.45; cursor:not-allowed}

input,select,textarea{
  font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line);
  border-radius:5px; background:#fff; color:var(--ink); width:100%; font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand);
  background:#fffdf8;
}
/* 明細行は、いま入力している行そのものを目立たせる */
.items tr:focus-within{background:#fdf6ef; box-shadow:inset 3px 0 0 var(--brand)}
.items tr:focus-within input,.items tr:focus-within select{border-color:var(--line)}
.ship-box:focus-within>.hd{background:var(--brand-l)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* キーの案内 */
.keyhelp{
  position:sticky; bottom:0; z-index:15; margin-top:14px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:7px 12px; font-size:11.5px; color:var(--ink2);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; box-shadow:0 -2px 10px rgba(36,31,28,.05);
}
.keyhelp b{color:var(--ink); font-weight:600}
input[type=checkbox],input[type=radio]{width:auto}
textarea{resize:vertical; line-height:1.6}
label{font-size:12px; color:var(--ink2); font-weight:500}
.field{display:flex; flex-direction:column; gap:3px}
.field .req{color:var(--err)}
.row{display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap}
/* 幅を指定していない欄は、狭くなったら潰れずに次の行へ折り返す。
   min-width:0 だと、幅固定の欄に押されて1文字ずつ改行される潰れ方をする。 */
.row>.field{flex:1 1 180px; min-width:180px}
/* 幅を指定した欄は、その幅どおりにする */
.w60,.w80,.w100,.w120,.w130,.w140,.w150,.w160,.w180,.w200{min-width:0!important}
/* ボタンなども押し潰されないようにする */
.row>.btn{flex:0 0 auto}
.w60{flex:0 0 60px!important} .w80{flex:0 0 80px!important} .w100{flex:0 0 100px!important}
.w120{flex:0 0 120px!important} .w150{flex:0 0 150px!important} .w200{flex:0 0 200px!important}

table{width:100%; border-collapse:collapse; font-size:12.5px}
th,td{padding:6px 9px; border-bottom:1px solid var(--line2); text-align:left; vertical-align:middle}
th{background:#f4f1ec; color:var(--ink); font-weight:600; font-size:12px; white-space:nowrap;
   position:sticky; top:0; z-index:2}
tbody tr:hover{background:#fcfaf8}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}
.scroll{overflow-x:auto}
.tbl-wrap{max-height:none}

.tag{display:inline-block; padding:1px 7px; border-radius:99px; font-size:11.5px; font-weight:600;
     border:1px solid transparent; white-space:nowrap}
.muted{color:var(--ink3)}
.small{font-size:12px}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.b{font-weight:700}

.kpi{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
@media(max-width:1000px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi .k{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
        padding:11px 13px; box-shadow:var(--sh)}
.kpi .k .lab{font-size:12px; color:var(--ink2); font-weight:500}
.kpi .k .val{font-size:22px; font-weight:700; letter-spacing:-.02em; margin-top:1px}
.kpi .k .val small{font-size:12px; font-weight:500; color:var(--ink3)}
.kpi .k.hot .val{color:var(--err)}

.status-bar{display:flex; gap:8px; flex-wrap:wrap}
.status-bar a{
  flex:1; min-width:96px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 11px; box-shadow:var(--sh); border-top:3px solid;
}
.status-bar a:hover{text-decoration:none; background:#fcfaf8}
.status-bar .n{font-size:19px; font-weight:700; color:var(--ink)}
.status-bar .l{font-size:11.5px; color:var(--ink3)}

.flash{padding:9px 13px; border-radius:var(--r); margin-bottom:13px; font-size:12.5px;
       border:1px solid; display:flex; gap:8px; align-items:center}
.flash.ok{background:#f0fdf4; border-color:#bbf7d0; color:#166534}
.flash.error{background:#fef2f2; border-color:#fecaca; color:#991b1b}

.note{background:#fffbeb; border:1px solid #fde68a; border-radius:var(--r); padding:10px 12px;
      font-size:12px; color:#78350f}
.note.blue{background:#eff6ff; border-color:#bfdbfe; color:#1e3a5f}

/* 付箋メモ */
.memos{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:9px}
.memo{border-radius:5px; padding:9px 10px; font-size:12px; position:relative; min-height:74px;
      border:1px solid rgba(0,0,0,.07); white-space:pre-wrap; word-break:break-word}
.memo.yellow{background:#fef9c3} .memo.pink{background:#fce7f3}
.memo.blue{background:#dbeafe} .memo.green{background:#dcfce7}
.memo .act{position:absolute; right:5px; top:4px; display:flex; gap:3px; opacity:0; transition:.15s}
.memo:hover .act{opacity:1}
.memo .act button{border:none; background:rgba(255,255,255,.75); border-radius:4px; cursor:pointer;
                  font-size:11.5px; padding:1px 5px; color:var(--ink2)}
.memo .pin{position:absolute; left:-4px; top:-4px; font-size:12px}

/* TODO */
.todo{display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-bottom:1px solid var(--line2)}
.todo:last-child{border-bottom:none}
.todo .ttl{flex:1; font-size:12.5px}
.todo.p1{border-left:3px solid var(--err); padding-left:7px}
.todo.p3{opacity:.72}
.todo .due{font-size:11.5px; color:var(--ink3)}
.todo .due.over{color:var(--err); font-weight:600}
.todo.done .ttl{text-decoration:line-through; color:var(--ink3)}

/* 明細行 */
.items th{font-size:11.5px; padding:4px 6px}
.items td{padding:2px 4px; border-bottom:1px solid var(--line2)}
.items input,.items select{padding:3px 6px; font-size:12.5px; border-color:transparent; background:transparent}
.items input:hover,.items select:hover{border-color:var(--line)}
.items input:focus,.items select:focus{background:#fff}
.items tr:hover{background:#fcfaf8}

.ship-box{border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; background:#fff}
.ship-box>.hd{background:#faf8f5; padding:7px 12px; display:flex; align-items:center; gap:10px;
              border-bottom:1px solid var(--line2); border-radius:var(--r) var(--r) 0 0}
.ship-box>.hd .no{background:var(--brand); color:#fff; border-radius:4px; padding:2px 9px;
                  font-size:11.5px; font-weight:700; white-space:nowrap; flex:none}
.ship-box>.hd input,.ship-box>.hd select{min-width:0}
.ship-box>.hd .btn{flex:none}
.ship-box>.bd{padding:12px}

.sug{position:absolute; z-index:60; background:#fff; border:1px solid var(--line);
     border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.13); max-height:270px; overflow:auto;
     min-width:290px}
.sug div{padding:6px 10px; cursor:pointer; font-size:12px; border-bottom:1px solid var(--line2)}
.sug div:last-child{border-bottom:none}
.sug div:hover,.sug div.hi{background:var(--brand-l)}
.sug .m{color:var(--ink3); font-size:11.5px; line-height:1.55}
.sug .sg-1{display:flex; align-items:baseline; gap:6px}
.sug .sg-1 .sp{flex:1}
.sug .sg-tag{font-size:11.5px; font-weight:700; padding:0 5px; border-radius:3px;
             background:var(--brand-l); color:var(--brand); white-space:nowrap}
.sug .sg-tag.hist{background:#eaf1f8; color:#1e4e8c}
.sug div{padding:7px 10px}

.bar{height:7px; background:var(--line2); border-radius:99px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--brand); border-radius:99px}

.tabs{display:flex; gap:3px; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap}
.tabs a{padding:7px 14px; font-size:12.5px; color:var(--ink2); border:1px solid transparent;
        border-bottom:none; border-radius:6px 6px 0 0; margin-bottom:-1px}
.tabs a:hover{background:#faf8f5; text-decoration:none}
.tabs a.on{background:#fff; border-color:var(--line); color:var(--brand); font-weight:600}

.pager{display:flex; gap:6px; align-items:center; justify-content:center; padding:12px; font-size:12px}
.empty{padding:40px 20px; text-align:center; color:var(--ink3); font-size:12.5px}

kbd{background:#f2efeb; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px;
    padding:0 5px; font-size:11.5px; font-family:inherit; color:var(--ink2)}

/* 印刷 */
@media print{
  .side,.top,.noprint{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .card{border:none; box-shadow:none}
  .sheet{page-break-after:always; padding:14mm}
  .sheet:last-child{page-break-after:auto}
}
.sheet{background:#fff; width:210mm; min-height:280mm; margin:0 auto 14px; padding:14mm;
       box-shadow:var(--sh); border:1px solid var(--line)}
.sheet h2{font-size:19px; text-align:center; letter-spacing:.35em; margin-bottom:14px}
.sheet .meta{display:flex; justify-content:space-between; gap:20px; margin-bottom:12px; font-size:12px}
.sheet table{font-size:12px}
.sheet th,.sheet td{border:1px solid #999; padding:4px 7px}
.sheet th{background:#f0ece7}

/* のし・包装のまとまり */
.gift{border:1px solid var(--line); border-radius:var(--r); padding:10px 12px 12px; margin-top:11px;
      background:#fdfbf8}
.gift-h{font-size:11.5px; font-weight:700; color:var(--brand); margin-bottom:8px;
        display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.gift-state{font-weight:400; color:var(--ink2); font-size:11.5px}
.gift textarea{resize:vertical; min-height:30px}
.gift-warn{margin-top:7px; font-size:11.5px; color:var(--warn);
           background:#fffbeb; border:1px solid #fde68a; border-radius:5px; padding:5px 9px}
.w180{flex:0 0 180px!important}

.w130{flex:0 0 130px!important} .w140{flex:0 0 140px!important} .w160{flex:0 0 160px!important}

/* ---------- 送料表（設定 → 送料表） ----------
   47都道府県×2区分の入力欄が並ぶので、見出しを固定して縦に追えるようにする。 */
.ship-cols{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:12px 0 10px}
.ship-cols label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--ink2)}
.ship-cols input{font:inherit; font-size:13px; padding:4px 7px;
                 border:1px solid var(--line); border-radius:4px; width:170px}

.ship-wrap{max-height:640px; overflow:auto; border:1px solid var(--line); border-radius:6px}
.ship-table{width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px}
.ship-table thead th{position:sticky; top:0; z-index:2; background:#faf8f6;
                     border-bottom:1px solid var(--line); padding:7px 9px; text-align:left;
                     font-size:11.5px; color:var(--ink2); white-space:nowrap}
.ship-table td{border-bottom:1px solid var(--line2); padding:3px 9px; vertical-align:middle}
.ship-table tr:last-child td{border-bottom:0}
.ship-table td.z{width:230px; background:#fbf9f7; border-right:1px solid var(--line);
                 vertical-align:top; padding:9px}
.ship-table td.z b{display:block; margin-bottom:6px}
.ship-table td.p{width:110px; white-space:nowrap}
.ship-table td.f, .ship-table th.f{width:130px}
.ship-table td.f input{width:82px; text-align:right; font:inherit; font-size:12.5px;
                       padding:3px 6px; border:1px solid var(--line); border-radius:4px}
.ship-table td.f .yen{margin-left:4px; color:var(--ink3); font-size:11.5px}
.ship-table .zfill{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
.ship-table .zfill input{width:60px; text-align:right; font:inherit; font-size:11.5px;
                         padding:2px 5px; border:1px dashed var(--line); border-radius:4px}

/* 置き配の注意書き（受注入力）。会員登録が要る／クール便は不可、などを出す */
.drop-note{margin:4px 0 0; color:var(--ink3)}
.drop-note:empty{display:none}

/* ---------- 受注一覧のメモ行・送り状番号 ---------- */
.memo-row td{border-top:0; padding-top:0 !important; padding-bottom:7px !important}
.memo-tag{display:inline-block; font-size:11.5px; padding:1px 6px; border-radius:9px;
          margin-right:5px; vertical-align:1px}
.memo-tag.tsushin{background:#fdf0e3; color:#8a5a1e; border:1px solid #f0d9b8}
.memo-tag.shanai{background:#eaf1fb; color:#31537f; border:1px solid #cfdef3}
.memo-txt{font-size:11.5px; color:var(--ink2); margin-right:14px}
td.nowrap{white-space:nowrap}
a.track{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:11.5px; color:var(--brand); text-decoration:none;
        border-bottom:1px dotted var(--brand); margin-right:6px}
a.track:hover{background:#fbf3f4}

/* 受注一覧の送り状番号の手入力。入力欄は列の外に浮かせて出す。
   行の中に出すと「送状」列が広がり、表全体の列が詰まって受注番号や日付が折り返すため。
   表の入れ物（.scroll）の中で浮かせているので、下端の行でもスクロールで届く。 */
.trk{display:flex; align-items:center; gap:4px; line-height:1.9}
.trk-edit{position:relative}
.trk-edit summary{list-style:none; cursor:pointer; color:var(--ink3); font-size:11.5px;
                  padding:0 4px; border-radius:3px}
.trk-edit summary::-webkit-details-marker{display:none}
.trk-edit summary:hover, .trk-edit[open] summary{background:#f3eeea; color:var(--brand)}
.trk-pop{position:absolute; right:0; top:calc(100% + 3px); z-index:20;
         display:flex; gap:5px; padding:6px; white-space:nowrap; background:#fff;
         border:1px solid var(--line); border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.12)}
.trk-pop input{width:150px; font-size:12px; padding:3px 6px;
               border:1px solid var(--line); border-radius:4px}

/* 送料表の画面の「支払手数料」。支払方法ごとに箱を並べる */
.payfee-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; margin-top:10px}
.payfee-box{border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:#fcfbfa}
.payfee-box.on{border-color:#d8c3a5; background:#fffaf2}
.payfee-h{display:flex; gap:6px; align-items:center; font-size:12.5px; margin-bottom:6px}
.payfee-t{width:100%; font-size:12px}
.payfee-t th{font-size:11.5px; color:var(--ink3); font-weight:400; text-align:left; padding:2px 3px}
.payfee-t td{padding:2px 3px; white-space:nowrap}
.payfee-t input{width:88px; text-align:right; font:inherit; font-size:12px; padding:2px 5px;
                border:1px solid var(--line); border-radius:4px}

/* 入力欄の薄い案内文字（プレースホルダー）。入力済みの文字と見分けがつき、かつ読める濃さ */
::placeholder{color:#857d75; opacity:1}