/* ============================================================
   KARTE+ 画面スタイル
   旧システム（Bootstrap 5 + SB Admin 2 / $primary:#198754）の
   テンプレート実物に合わせて再現したもの。
   ============================================================ */
:root{
  --primary:#198754; --primary-d:#146c43; --lighten:#d4e9dd; --lighten-2:#eaf5ef;
  --delete:#ff7549; --delete-bg:#ffe3d6;
  --ink:#212529; --gray-800:#5a5c69; --gray-700:#6e707e; --gray-600:#858796; --gray-400:#b7b9cc;
  --line:#e3e6f0; --line-2:#eaecf4; --bd:#dddfeb;
  --bg:#f8f9fc; --panel:#fff; --sidebar-w:225px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,"Noto Sans JP","Yu Gothic",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--primary);text-decoration:none}
.hidden{display:none!important}
.text-heading{font-size:1.75rem;font-weight:400;color:var(--gray-800);margin:0}
.text-gray-600{color:var(--gray-600)} .text-gray-800{color:var(--gray-800)}
.muted{color:var(--gray-600)} .faint{color:var(--gray-400)} .small{font-size:.8rem}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sp{flex:1}
.mb4{margin-bottom:1.5rem} .mb2{margin-bottom:.5rem}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:var(--panel);padding:.375rem .75rem;border-radius:.35rem;cursor:pointer;font-size:1rem;line-height:1.5;white-space:nowrap;color:var(--ink)}
.btn.pill{border-radius:10rem;padding:.375rem 1.1rem}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn.outline{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn.outline:hover{background:var(--primary);color:#fff}
.btn.lighten{background:var(--lighten);color:var(--primary)}
.btn.lighten:hover{filter:brightness(.96)}
.btn.lighten-del{background:var(--delete-bg);color:var(--delete)}
.btn.lighten-del:hover{filter:brightness(.96)}
.btn.sm{padding:.25rem .6rem;font-size:.85rem}
.btn:disabled{opacity:.55;cursor:default}
.icon-btn{border:0;background:transparent;cursor:pointer;padding:2px 4px;font-size:18px;line-height:1;color:var(--ink)}
.icon-btn.del{color:#dc3545}
.icn{width:1em;height:1em;vertical-align:-.125em;fill:currentColor}

/* ---------- 入力 ---------- */
.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;line-height:1.5;color:var(--ink);background:#fff;border:1px solid #d1d3e2;border-radius:.35rem;min-width:0}
select.form-control{padding-right:.4rem}
textarea.form-control{min-height:64px;resize:vertical}
.form-label{font-size:1rem;color:var(--ink);white-space:nowrap}
.field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.field>label{font-size:.9rem;color:var(--gray-700)}
.grid{display:grid;gap:.9rem}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:768px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.g2,.g3,.g4{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:.35rem;padding:.6rem .9rem .9rem;margin:0}
legend{font-size:.85rem;color:var(--gray-600);padding:0 .4rem}
.form-check{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.form-check input{width:1em;height:1em;margin:0;accent-color:var(--primary)}
.form-check-label{font-size:1rem}

/* ---------- ログイン ---------- */
#login{min-height:100vh;display:flex;flex-direction:column;background:#fff}
#login .lg-head{padding:.5rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)}
#login .lg-head img{width:120px;display:block}
#login .lg-main{flex:1;padding:2rem 1.5rem}
#login form{max-width:1320px;margin:0 auto}
#login label{display:block;font-size:1rem;margin:0 0 .5rem}
#login input{width:100%;padding:.375rem .75rem;border:1px solid #d1d3e2;border-radius:.35rem;font-size:1rem;margin-bottom:1.5rem}
#login .btn-login{background:#278EBA;color:#fff;border:0;border-radius:.35rem;padding:.5rem 1rem;font-size:1rem;cursor:pointer}
#login .btn-login:hover{filter:brightness(.94)}
#login #loginMsg{color:#dc3545;min-height:1.4rem;margin:-1rem 0 .6rem}
#login .footer{background:#e9ecef}

/* ---------- 全体（サイドバー＋トップバー） ---------- */
#app{min-height:100vh;display:flex}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:#fff;padding:0 0 1rem;position:sticky;top:0;height:100vh;overflow:auto;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.1)}
.sidebar .brand{display:flex;align-items:center;justify-content:center;height:4.375rem;color:var(--primary);font-weight:800;font-size:1rem;letter-spacing:.05rem;text-transform:uppercase;cursor:pointer}
.sidebar .heading{font-size:.65rem;font-weight:800;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05rem;padding:0 1rem .5rem}
.sidebar nav button{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;text-align:left;padding:1rem;font-size:.85rem;font-weight:700;cursor:pointer;color:var(--gray-600)}
.sidebar nav button .icn{width:18px;height:18px;color:var(--gray-400)}
.sidebar nav button:hover,.sidebar nav button.on{color:var(--primary)}
.sidebar nav button:hover .icn,.sidebar nav button.on .icn{color:var(--primary)}
.content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{background:#fff;height:4.375rem;display:flex;align-items:center;justify-content:flex-end;padding:.5rem 1.5rem;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15);position:sticky;top:0;z-index:20;margin-bottom:1.5rem}
.topbar .menu-toggle{display:none;border:0;background:transparent;cursor:pointer;font-size:24px;color:var(--gray-600);margin-right:auto}
.topbar .brand-sm{display:none;color:var(--primary);font-weight:700;margin-right:auto}
.user{position:relative}
.user>button{border:0;background:transparent;cursor:pointer;color:var(--gray-600);padding:0;display:flex;align-items:center}
.user>button .icn{width:24px;height:24px}
.user .dd,.menu .dd{position:absolute;right:0;top:110%;background:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.35rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.175);min-width:12rem;display:none;z-index:30;padding:.5rem 0}
.user.open .dd,.menu.open .dd{display:block}
.user .dd .who{padding:.25rem 1rem;font-size:.8rem;color:var(--gray-600);display:block}
.user .dd hr{border:0;border-top:1px solid var(--line-2);margin:.5rem 0}
.dd button,.dd a{display:block;width:100%;text-align:left;border:0;background:transparent;padding:.25rem 1rem;cursor:pointer;font-size:1rem;color:var(--ink);white-space:nowrap}
.dd button:hover,.dd a:hover{background:#f8f9fa}
.dd button.d{color:#dc3545}
main{flex:1;padding:0 1.5rem 2rem}
.footer{background:#fff;padding:2rem 0;text-align:center;color:var(--gray-600);font-size:.8rem}
@media (max-width:768px){
  .sidebar{display:none} .sidebar.show{display:block;position:fixed;z-index:40;height:100vh}
  .topbar .menu-toggle,.topbar .brand-sm{display:block}
  main{padding:0 1rem 2rem}
}

/* ---------- カード・表 ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:.35rem;box-shadow:0 .15rem 1.75rem 0 rgba(58,59,69,.15)}
.card-body{padding:1.25rem}
.table-responsive{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;color:var(--ink)}
table.table th,table.table td{padding:.75rem;border-bottom:1px solid var(--bd);vertical-align:middle;font-size:1rem;text-align:left}
table.table thead th{border-bottom:2px solid var(--bd);font-weight:700;color:var(--gray-700);white-space:nowrap}
table.table tbody tr:hover{background:#fcfcfd}
td .cname{font-weight:700;color:var(--primary)}
.rubbish-icon{border:0;background:transparent;cursor:pointer;padding:.25rem .25rem .5rem;font-size:18px;color:var(--primary);display:none}
.rubbish-icon.show{display:inline-block}
.empty{padding:2rem;text-align:center;color:var(--gray-600)}
.pager{display:flex;justify-content:center;gap:.25rem;padding:1rem 0 0;flex-wrap:wrap}
.pager button{border:1px solid var(--bd);background:#fff;color:var(--primary);padding:.375rem .75rem;border-radius:.25rem;cursor:pointer}
.pager button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pager button:disabled{color:var(--gray-400);cursor:default}
.nav-pills{display:flex;gap:.25rem;flex-wrap:wrap}
.nav-pills button{border:0;background:transparent;padding:.5rem 1rem;border-radius:.35rem;cursor:pointer;color:var(--primary);font-size:1rem}
.nav-pills button.active{background:var(--primary);color:#fff}
.search-container{display:flex;gap:.75rem;flex-wrap:wrap}
.search-container .form-control{width:auto;flex:1 1 180px;min-width:150px;max-width:260px}
.mark{margin-left:.2rem}

/* 顧客詳細 */
.client-name{font-size:1.5rem;font-weight:700}
.client-kana{font-size:1rem;color:var(--gray-600);margin-left:.75rem}
.info-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem 1.5rem}
.info-list p{margin:0;font-size:1rem;word-break:break-word}
.client-info{border-bottom:1px solid var(--line-2)}
@media (max-width:1100px){.info-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.info-list{grid-template-columns:1fr}}

/* ---------- カルテ（4列の枠付き表） ---------- */
.tab-content{background:#fff;padding:1.5rem;border:1px solid var(--line)}
.karte{border:1px solid var(--bd);margin-bottom:1.5rem;background:#fff;overflow:hidden}
.karte.dirty{outline:2px solid #f6c343;outline-offset:-2px}
.karte .kh,.karte .kb{display:grid}
.karte.t-scissor .kh,.karte.t-scissor .kb{grid-template-columns:2fr 2fr 3fr 5fr}
.karte.t-nipper .kh,.karte.t-nipper .kb,.karte.t-sale .kh,.karte.t-sale .kb{grid-template-columns:2fr 2fr 4fr 4fr}
.karte .kh>div{padding:.75rem;text-align:center;font-weight:700;color:var(--gray-800);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.karte .kh>div:last-child{border-right:0}
.karte .kc{border-right:1px solid var(--bd);display:flex;flex-direction:column;min-width:0}
.karte .kc:last-child{border-right:0}
.karte .kr{padding:.75rem;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:.5rem;flex:1}
.karte .kr:last-child{border-bottom:0}
.karte .inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.karte .inline .form-control{flex:1;min-width:60px}
.karte .kenma{display:flex;flex-wrap:wrap;gap:.35rem 1rem}
.karte .kenma.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem 1rem}
.karte .radios{display:flex;gap:.35rem 1rem;flex-wrap:wrap}
.karte .item-group{display:flex;gap:1rem;flex-wrap:wrap}
.karte .item-group>div{flex:1 1 130px;display:flex;flex-direction:column;gap:.5rem}
.karte .group-item{display:flex;align-items:center;gap:.4rem}
.karte .group-item label{white-space:nowrap;font-size:1rem}
.karte .product-wrap{display:flex;align-items:flex-start;gap:.25rem}
.karte .product-wrap .form-control{flex:1}
.karte .kimgs{padding:.75rem;border-top:1px solid var(--bd)}
.karte .kfoot{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--bd);background:#fbfbfc;flex-wrap:wrap}
.karte .kfoot .meta{font-size:.75rem;color:var(--gray-400)}
.menu{position:relative}
.menu>button{border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1;color:var(--ink);padding:.25rem}
.badge{display:inline-block;padding:.25em .6em;border-radius:10rem;font-size:.75rem;background:#eaecf4;color:var(--gray-700);white-space:nowrap}
.badge.ok{background:#d1e7dd;color:#0f5132} .badge.no{background:#f8d7da;color:#842029}
.badge.info{background:#cfe2ff;color:#084298} .badge.warn{background:#fff3cd;color:#664d03}
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.thumbs img{width:120px;height:120px;object-fit:cover;border:1px solid var(--bd);cursor:pointer;background:#f8f9fc}
.thumbs .add{width:120px;height:120px;border:1px dashed #d1d3e2;display:flex;align-items:center;justify-content:center;color:var(--gray-400);cursor:pointer;font-size:24px}
@media (max-width:900px){
  .karte .kh{display:none}
  .karte.t-scissor .kb,.karte.t-nipper .kb,.karte.t-sale .kb{grid-template-columns:1fr 1fr}
  .karte .kc{border-bottom:1px solid var(--bd)}
  .karte .kc::before{content:attr(data-h);font-weight:700;padding:.5rem .75rem;background:#f8f9fc;border-bottom:1px solid var(--bd)}
}
@media (max-width:560px){ .karte.t-scissor .kb,.karte.t-nipper .kb,.karte.t-sale .kb{grid-template-columns:1fr} }

/* ---------- モーダル ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow:auto}
.modal{background:#fff;border-radius:.3rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);width:100%;max-width:900px}
.modal.sm{max-width:480px}
.modal .hd{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid var(--line-2);font-size:1.25rem}
.modal .bd{padding:1rem;display:flex;flex-direction:column;gap:1rem}
.modal .ft{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--line-2);justify-content:flex-end;flex-wrap:wrap}
.x{border:0;background:transparent;font-size:1.5rem;cursor:pointer;color:var(--gray-400);line-height:1;padding:0 .25rem}
#toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:#212529;color:#fff;padding:.75rem 1.25rem;border-radius:.35rem;z-index:99;font-size:.9rem;max-width:90vw;box-shadow:0 .5rem 1rem rgba(0,0,0,.2)}
#viewer{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:60;display:flex;align-items:center;justify-content:center}
#viewer img{max-width:94vw;max-height:90vh}

/* ---------- 印刷 ---------- */
#printArea{display:none}
@media print{
  body>*:not(#printArea){display:none!important}
  #printArea{display:block;padding:6mm}
  #printArea .phead{display:grid;grid-template-columns:1fr 1fr;gap:2mm 6mm;margin-bottom:4mm;font-size:10pt}
  #printArea .karte{margin-bottom:4mm;page-break-inside:avoid;border:1px solid #000}
  #printArea .karte .kh>div,#printArea .karte .kc,#printArea .karte .kr{border-color:#000!important}
  #printArea .menu,#printArea .kfoot{display:none!important}
  #printArea .form-control{border:0!important;padding:0!important;min-height:0!important}
  #printArea .thumbs,#printArea .preview-image-wrapper{display:none!important}
}
/* ---------- 読み取り専用の表示（旧: span.form-control） ---------- */
.form-control.ro{background:#fff;min-height:calc(1.5em + .75rem + 2px);white-space:pre-wrap;word-break:break-word}
.form-control.ro.ta{min-height:calc(4.5em + .75rem + 2px)}
.ro-check input{pointer-events:none}
.plain{border:0;padding:.375rem 0}

/* ---------- パンくず ---------- */
.breadcrumb{font-size:1rem;margin-bottom:.75rem;color:var(--gray-600)}
.breadcrumb a{color:var(--primary);text-decoration:underline}
.breadcrumb span{margin:0 .5rem;color:var(--gray-400)}

/* ---------- 縦1列のフォームページ（旧: 顧客情報登録/変更） ---------- */
.form-page h2{font-size:1.25rem;font-weight:700;color:var(--gray-800);margin:0 0 1.5rem}
.form-page h2.plain-h{color:var(--ink)}
.form-page .mb3{margin-bottom:1rem}
.form-page .mb3>label{display:block;margin-bottom:.5rem;font-size:1rem}

/* ---------- 写真プレビュー ---------- */
.preview-image-wrapper{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.preview-image-wrapper img{width:180px;height:auto;max-height:220px;object-fit:cover;cursor:pointer;border:1px solid var(--bd)}
.file-row{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}

/* ---------- 印刷画面 ---------- */
.select-wrapper{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.select-wrapper select{max-width:280px}