:root{
  /* theme variables are set by html[data-theme] */
  --bg:#0b1220;
  --text:#e8eefc;
  --muted:#a7b4d6;
  --line:rgba(255,255,255,.12);
  --good:#60d394;
  --bad:#ff6b6b;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --r:18px;

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  --surface-bg: rgba(15,26,46,.92);
  --field-bg: rgba(8,14,28,.55);
  --field-line: rgba(255,255,255,.14);
  --field-focus: rgba(122,168,255,.55);
  --hover: rgba(255,255,255,.04);
  --select-arrow: rgba(255,255,255,.78);
}

html{color-scheme: dark;}

/* Dark (default) */
html[data-theme="dark"]{
  color-scheme: dark;
}

/* Light */
html[data-theme="light"]{
  --bg:#f5f7ff;
  --text:#0c1424;
  --muted:#4a5875;
  --line:rgba(12,20,36,.14);
  --shadow: 0 10px 26px rgba(8,12,20,.12);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  --surface-bg: rgba(255,255,255,.94);
  --field-bg: rgba(255,255,255,.92);
  --field-line: rgba(12,20,36,.18);
  --field-focus: rgba(49,108,255,.45);
  --hover: rgba(12,20,36,.045);
  --select-arrow: rgba(12,20,36,.65);

  color-scheme: light;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(122,168,255,.18), transparent 62%),
    radial-gradient(900px 520px at 80% 20%, rgba(96,211,148,.12), transparent 62%),
    var(--bg);
  color:var(--text);
}

.wrap{max-width:1100px; margin:0 auto; padding:20px;}

header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
h1{margin:0; font-size:20px; letter-spacing:.02em}
.sub{margin:4px 0 0; color:var(--muted); font-size:12px}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

button{
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  touch-action: manipulation;
}
button:hover{border-color: rgba(122,168,255,.45)}
button.primary{border-color: rgba(122,168,255,.55); background: linear-gradient(180deg, rgba(122,168,255,.22), rgba(122,168,255,.08));}
button.danger{border-color: rgba(255,107,107,.55); background: linear-gradient(180deg, rgba(255,107,107,.16), rgba(255,107,107,.06));}

.grid{display:grid; grid-template-columns: 1.35fr .65fr; gap:14px; align-items:start}
@media (max-width: 980px){ .grid{grid-template-columns:1fr} }

.card{
  background: var(--card-bg);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card h2{margin:0; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.card .hd{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 10px; border-bottom:1px solid var(--line)}
.card .bd{padding:14px}

.row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 640px){ .row{grid-template-columns:1fr} }

.field{display:flex; flex-direction:column; gap:6px}
label{font-size:12px; color:var(--muted)}
input, select, textarea{
  width:100%;
  background: var(--field-bg);
  border:1px solid var(--field-line);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  font-size:16px; /* スマホでのズーム抑制 */
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow) 50%),
    linear-gradient(135deg, var(--select-arrow) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:28px;
  cursor:pointer;
}

/* Windows/Chrome の option 背景が白寄りでも読めるように明示 */
option{color: var(--text); background: var(--field-bg);}
html[data-theme="light"] option{background: #ffffff; color: #0c1424;}

input:focus, select:focus, textarea:focus{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(122,168,255,.15)
}

.pill{font-size:11px; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.hint{font-size:12px; color:var(--muted)}

textarea{
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

table{width:100%; border-collapse:separate; border-spacing:0;}
th, td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; color:var(--muted); font-weight:600; text-align:left}
tr:hover td{background: var(--hover)}
.num{text-align:right}
.actions{white-space:nowrap}

.mini{padding:7px 10px; border-radius:10px; font-size:12px; box-shadow:none}

.sum{display:flex; flex-direction:column; gap:10px;}
.sumline{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  background: rgba(0,0,0,.10);
  border:1px solid var(--line);
  border-radius:14px;
}
html[data-theme="light"] .sumline{background: rgba(12,20,36,.03);}
.sumline strong{font-size:14px}
.sumline.total{border-color: rgba(96,211,148,.35)}
.sumline.total strong{font-size:18px}
.sumline.total .v{color: var(--good)}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  min-width:280px; max-width:min(560px, calc(100% - 24px));
  padding:12px 14px;
  background: var(--surface-bg);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display:none;
  color:var(--text);
  z-index:50;
}
.toast.show{display:block}

/* モーダル（発行者情報：スマホ改善版） */
.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:60;
}
.modal-backdrop.show{display:flex}

.modal{
  width:min(720px, 100%);
  background: var(--surface-bg); /* ★テーマ追従 */
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);

  display:flex;
  flex-direction:column;
  max-height: min(760px, calc(100dvh - 32px));
  overflow:hidden;
}

.modal .mhd{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.modal .mhd h3{
  margin:0;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--text);
}

/* 中身だけスクロール */
.modal .mbd{
  padding:14px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

/* フッター固定 */
.modal .mft{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  background: var(--surface-bg);
  position: sticky;
  bottom: 0;
}

.modal .mft button{min-width:120px}

/* スマホ最適化 */
@media (max-width: 640px){
  .modal-backdrop{padding:12px; align-items:flex-end;}
  .modal{max-height: calc(100dvh - 24px);}
  .modal .mft{
    justify-content:space-between;
  }
  .modal .mft button{
    flex:1;
    min-width:0;
    padding:12px 10px;
  }
}

/* スマホ: 操作しやすい固定ボタンバー */
.mobilebar{display:none}
@media (max-width: 640px){
  .wrap{padding:14px; padding-bottom:88px;} /* 下バー分 */
  .toolbar{display:none}
  .mobilebar{
    display:flex;
    position:fixed;
    left:12px; right:12px; bottom:12px;
    gap:10px;
    background: var(--surface-bg);
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    padding:10px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45);
    z-index:40;
  }
  .mobilebar button{flex:1; padding:12px 10px}
}

/* 履歴セレクト（ヘッダ） */
.histwrap{display:flex; gap:8px; align-items:center}
.histwrap select{min-width:200px; max-width:280px}
@media (max-width: 980px){
  .histwrap select{min-width:180px}
}

/* 印刷（アプリ画面ではなく“見積書”を出す） */
.print-only{display:none}

@media print{
  @page{ size:A4; margin:14mm; }
  body{background:#fff; color:#000}
  header .toolbar, .no-print, .mobilebar, .wrap{display:none !important}
  .print-only{display:block !important}

  .sheet{font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;}
  .doc-title{margin:0; font-size:24px; letter-spacing:.12em}
  .sheet-hd{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; border-bottom:2px solid #111; padding-bottom:10px; margin-bottom:14px}
  .doc-meta{margin-top:8px; font-size:12px; line-height:1.7}
  .doc-meta .k{display:inline-block; width:70px; color:#333}
  .doc-meta .v{font-weight:600}

  .issuer{text-align:right; font-size:12px; line-height:1.7}
  .issuer-name{font-weight:700; font-size:13px}

  .to{margin:12px 0 10px}
  .to-name{font-size:14px; font-weight:700; margin-bottom:6px}
  .to-title{font-size:13px; margin-bottom:4px}
  .to-note{font-size:12px; color:#333}

  .grand{display:flex; justify-content:space-between; align-items:stretch; gap:12px; margin:10px 0 14px}
  .grand-box{border:2px solid #111; padding:10px 12px; min-width:230px}
  .grand-box .k{font-size:11px; color:#333}
  .grand-box .v{font-size:20px; font-weight:800; margin-top:4px}
  .grand-sub{flex:1; border:1px solid #777; padding:10px 12px; display:grid; gap:6px; font-size:12px}
  .grand-sub .k{color:#333}
  .grand-sub div{display:flex; justify-content:space-between; gap:10px}
  .grand-sub .v{font-weight:700}

  .doc-table{width:100%; border-collapse:collapse; font-size:12px}
  .doc-table th, .doc-table td{border:1px solid #444; padding:8px 8px; vertical-align:top}
  .doc-table th{background:#f2f2f2; text-align:left}
  .c-unit, .c-qty, .c-amt{width:90px; text-align:right}
  .c-task{width:auto}

  .footer{display:flex; gap:12px; margin-top:14px}
  .notes{flex:1; border:1px solid #777; padding:10px 12px; font-size:11px}
  .notes .h{font-weight:700; margin-bottom:6px}
  .notes ul{margin:0; padding-left:16px}
  .notes li{margin:4px 0}

  .stamp{width:90px; border:1px solid #777; padding:10px 10px; font-size:11px; text-align:center}
  .stamp .h{font-weight:700; margin-bottom:6px}
  .stamp .box{height:70px; border:1px solid #777}

  .sheet{page-break-inside:avoid}
}