:root { color-scheme:light; font-family:"Yu Gothic UI","Meiryo",sans-serif; color:#24262b; background:#f3f4f6; --brand:#cc1824; --brand-dark:#9f101a; --ink:#17191e; --muted:#69707a; --line:#e0e2e6; --surface:#fff; --shadow:0 10px 30px rgba(20,22,27,.07); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#fafafa 0,#f0f1f3 100%); }
.login-page { background:radial-gradient(circle at 50% 0,rgba(204,24,36,.1),transparent 32%),linear-gradient(145deg,#fafafa 0,#eceef1 100%); }
header { min-height:72px; background:var(--ink); color:#fff; padding:0 28px; display:flex; align-items:center; gap:34px; border-bottom:3px solid var(--brand); box-shadow:0 6px 18px rgba(0,0,0,.18); position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:18px; color:#fff; text-decoration:none; flex:none; }
.brand img { width:152px; height:30px; object-fit:contain; }
.brand span { display:flex; flex-direction:column; justify-content:center; border-left:1px solid #555961; padding-left:18px; white-space:nowrap; line-height:1.05; }
.brand strong { font-size:14px; font-weight:900; letter-spacing:.13em; }
.brand small { margin-top:5px; color:#aeb3bb; font-size:9px; font-weight:600; letter-spacing:.12em; }
nav { display:flex; gap:4px; flex:1; min-width:0; height:72px; align-items:stretch; }
nav a, .nav-group summary { color:#d9dce1; text-decoration:none; display:flex; align-items:center; padding:0 14px; font-size:14px; font-weight:700; border-bottom:3px solid transparent; margin-bottom:-3px; transition:.18s ease; white-space:nowrap; cursor:pointer; list-style:none; }
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group { position:relative; display:flex; flex:none; }
.nav-group summary::after { content:"⌄"; margin-left:7px; color:#9499a2; font-size:12px; transition:transform .15s ease; }
.nav-group[open] summary::after { transform:rotate(180deg); }
nav > a:hover, .nav-group summary:hover, .nav-group[open] summary { color:#fff; background:#24272d; border-bottom-color:var(--brand); }
.nav-menu { position:absolute; top:69px; left:0; min-width:190px; padding:7px; background:#202329; border:1px solid #3b3f47; border-top:3px solid var(--brand); border-radius:0 0 8px 8px; box-shadow:0 14px 30px rgba(0,0,0,.28); z-index:40; }
.nav-menu a { min-height:42px; padding:9px 12px; margin:0; border:0; border-radius:5px; color:#e7e9ed; }
.nav-menu a:hover { color:#fff; background:#343840; }
.nav-group:last-child .nav-menu { left:auto; right:0; }
.logout { color:#fff; text-decoration:none; border:1px solid #555961; border-radius:6px; padding:8px 12px; font-size:13px; white-space:nowrap; }
.logout:hover { background:#2b2e34; border-color:#7b8089; }
main { max-width:1240px; margin:30px auto; padding:0 24px 70px; }
h1 { margin:0 0 22px; color:var(--ink); font-size:28px; letter-spacing:.02em; }
h1::after { content:""; display:block; width:42px; height:3px; margin-top:10px; background:var(--brand); border-radius:3px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px; margin-bottom:18px; box-shadow:var(--shadow); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.grid .card { border-top:3px solid var(--brand); }
.metric { margin-top:5px; font-size:34px; line-height:1; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.metric small { font-size:13px; margin-left:5px; color:var(--muted); }
.metric.money { font-size:27px; }
.summary-grid { margin-bottom:18px; }
.summary-grid .card { margin-bottom:0; }
.status-badge { display:inline-block; padding:3px 8px; background:#f3e7e8; color:#9f101a; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.email-status { background:#e8f1fb; color:#245b8f; }
.email-status.unsent { background:#eceef1; color:#69707a; }
.email-status.email-failed { background:#fff0f1; color:#94101a; }
label { display:block; font-weight:700; margin:12px 0 5px; font-size:13px; color:#41464e; }
input, select, textarea, button { font:inherit; padding:9px 11px; border:1px solid #b9bec6; border-radius:6px; }
input, select { min-width:220px; color:#24262b; background:#fff; }
textarea { display:block; width:100%; margin-top:5px; color:#24262b; background:#fff; resize:vertical; }
input:focus, select:focus { outline:3px solid rgba(204,24,36,.13); border-color:var(--brand); }
button, .button { display:inline-block; background:var(--brand); color:#fff; border:0; padding:10px 17px; text-decoration:none; border-radius:6px; cursor:pointer; font-weight:700; box-shadow:0 3px 8px rgba(204,24,36,.2); transition:.16s ease; }
button:hover, .button:hover { background:var(--brand-dark); transform:translateY(-1px); }
button.secondary, .button.secondary { background:#5d626b; box-shadow:none; }
.button.small { padding:6px 10px; white-space:nowrap; font-size:12px; }
table { width:100%; border-collapse:separate; border-spacing:0; background:#fff; font-size:13px; }
th, td { border-bottom:1px solid #e5e6e9; padding:10px 9px; text-align:left; vertical-align:middle; }
th { background:#292c32; color:#fff; white-space:nowrap; position:sticky; top:0; z-index:2; font-size:12px; letter-spacing:.025em; }
tbody tr:hover { background:#fff8f8; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.notice { padding:13px 15px; border-radius:7px; margin-bottom:17px; background:#edf8f0; border-left:4px solid #2e9b55; color:#23673b; }
.notice.error { background:#fff0f1; border:1px solid #efb0b4; border-left:4px solid var(--brand); color:#94101a; }
.warn { background:#fff8e3; border:1px solid #ead38b; border-left:4px solid #d39a12; padding:12px 14px; border-radius:7px; margin-bottom:16px; }
.muted { color:var(--muted); font-size:13px; }
.missing { color:#b42318; font-weight:700; }
.toolbar { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin:0; }
.status-checkboxes { display:flex; align-items:center; gap:12px; min-height:39px; }
.status-checkboxes > span { font-size:13px; font-weight:700; color:#41464e; }
.status-checkboxes label { display:flex; align-items:center; gap:5px; margin:0; }
.status-checkboxes input { min-width:0; width:auto; accent-color:var(--brand); }
.inline-form { display:flex; gap:8px; align-items:center; }
.inline-form input { min-width:145px; }
.product-settings { display:flex; gap:8px; align-items:end; flex-wrap:wrap; min-width:570px; }
.product-settings label { margin:0; font-size:12px; }
.product-settings input { display:block; min-width:120px; width:120px; margin-top:3px; }
.master-editor summary { cursor:pointer; font-size:17px; font-weight:800; color:var(--ink); }
.master-editor summary::marker { color:var(--brand); }
.attribute-color-input { width:100%; height:42px; padding:5px 8px; cursor:pointer; }
.attribute-color-preview { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.attribute-color-swatch { display:inline-block; width:28px; height:28px; border:1px solid #cbd5e1; border-radius:6px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 16px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.form-grid label { margin:0; }
.bank-account-editor { grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto; }
.bank-account-editor label { min-width:0; }
@media (max-width:700px) { .bank-account-editor { grid-template-columns:minmax(0,1fr); } }
.form-grid input, .form-grid select { display:block; width:100%; min-width:0; margin-top:5px; }
.form-actions { display:flex; align-items:end; gap:8px; }
.company-save-actions { margin-top:18px; text-align:right; }
.wide-input { display:block; width:100%; margin-top:5px; }
.template-tags { display:flex; flex-wrap:wrap; gap:8px; }
.template-tags code { padding:5px 8px; border-radius:5px; background:#f1f2f4; color:#8f1420; font-family:inherit; font-weight:700; }
.rate-master-wrap { max-height:70vh; }
.rate-master-wrap .rate-mode { min-width:150px; }
.rate-master-wrap .rate-value { min-width:100px; width:100px; text-align:right; }
.rate-example { min-width:190px; white-space:nowrap; }
.check-label { display:flex !important; align-items:center; gap:8px; padding-top:24px; }
.check-label input { width:auto !important; margin:0 !important; accent-color:var(--brand); }
.inactive-row { opacity:.55; background:#f1f2f3; }
.order-quantity { min-width:84px; width:84px; padding-left:6px; padding-right:6px; text-align:right; font-variant-numeric:tabular-nums; }
.order-rate { min-width:60px; width:60px; padding-left:5px; padding-right:5px; text-align:right; font-variant-numeric:tabular-nums; }
.save-bar { display:flex; align-items:center; gap:14px; position:sticky; bottom:12px; border-left:4px solid var(--brand); }
.current-customer { display:flex; align-items:center; gap:14px; background:#202329; color:#fff; border-left:5px solid var(--brand); border-radius:8px; padding:14px 18px; margin-bottom:18px; box-shadow:var(--shadow); }
.current-customer-label { color:#c7cbd1; font-size:12px; letter-spacing:.04em; }
.current-customer strong { font-size:19px; }
.current-customer > span:last-child { color:#d7dae0; font-size:13px; }
.current-customer.empty { background:#e8e9ec; color:#555b64; border-left-color:#8c929b; }
.current-customer.empty .current-customer-label, .current-customer.empty > span:last-child { color:#737983; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
input:disabled { background:#eceef1; color:#8a9099; cursor:not-allowed; }
.table-wrap { overflow:auto; max-height:65vh; padding:0; border-radius:10px; }
.bulk-delivery-check { min-width:0; width:16px; height:16px; accent-color:var(--brand); }
.table-wrap table th:first-child { border-radius:9px 0 0 0; }
.table-wrap table th:last-child { border-radius:0 9px 0 0; }
.invoice-totals { margin-left:auto; max-width:360px; text-align:right; }
.invoice-page-actions { margin-bottom:18px; }
.email-detail-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.email-detail-grid span:not(.status-badge) { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.email-addresses { display:grid; grid-template-columns:70px 1fr; gap:0; margin:18px 0 24px; }
.email-addresses dt,.email-addresses dd { margin:0; padding:10px 8px; border-bottom:1px solid var(--line); }
.email-addresses dt { color:var(--muted); font-size:12px; font-weight:800; }
.email-addresses dd { overflow-wrap:anywhere; }
.email-body { margin:0; padding:18px; border:1px solid var(--line); border-radius:8px; background:#f7f8fa; color:#24262b; font:14px/1.8 "Yu Gothic UI","Meiryo",sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.toolbar:has(+ .card .eyebrow) { margin-bottom:18px; }
.invoice-totals p { display:flex; justify-content:space-between; gap:32px; margin:8px 0; }
.invoice-totals p:last-child { padding-top:10px; border-top:2px solid var(--line); font-size:18px; }
.order-matrix-wrap { max-height:72vh; }
.order-matrix { width:max-content; min-width:100%; }
.order-matrix thead th { position:sticky; top:0; z-index:4; }
.order-matrix .matrix-date { position:sticky; left:0; z-index:3; min-width:105px; background:#f5f6f8; }
.order-matrix tbody .matrix-date { color:#252a31; }
.order-matrix thead .matrix-date { z-index:7; background:#343940; }
.order-matrix .matrix-code { position:sticky; left:105px; z-index:2; min-width:105px; background:#fff; }
.order-matrix thead .matrix-code { z-index:6; background:#343940; }
.order-matrix .matrix-product { position:sticky; left:210px; z-index:2; width:220px; min-width:220px; max-width:220px; background:#fff; white-space:normal; overflow-wrap:anywhere; }
.order-matrix thead .matrix-product { z-index:6; background:#343940; }
.order-matrix .matrix-unit { position:sticky; left:430px; z-index:2; min-width:85px; background:#fff; }
.order-matrix thead .matrix-unit { z-index:6; background:#343940; }
.order-matrix .matrix-customer { min-width:92px; max-width:120px; white-space:normal; text-align:center; vertical-align:bottom; }
.order-matrix .matrix-jurisdiction { height:40px; box-sizing:border-box; text-align:left; background:#24282e; border-left:2px solid #707680; white-space:normal; }
.order-matrix .matrix-jurisdiction span { position:sticky; left:676px; display:inline-block; padding-left:4px; }
.order-matrix thead .matrix-customer-row th { top:40px; height:64px; box-sizing:border-box; background:#464c54; }
.order-matrix thead .matrix-customer-row th:first-child { border-radius:0; }
.order-matrix thead .matrix-customer-row th:last-child { border-radius:0; }
.order-matrix .matrix-qty { min-width:72px; text-align:center; }
.order-matrix .matrix-qty.has-order { background:#fff2d8; color:#7a4600; font-weight:800; }
.matrix-edit-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:12px 0; }
.order-matrix .matrix-quantity-input { width:84px; min-width:84px; padding:7px 6px; text-align:right; font-variant-numeric:tabular-nums; }
.order-matrix .billed-matrix-cell { background:#e5e7eb; color:#6b7280; }
.order-matrix .billed-matrix-cell input:disabled { background:#d8dbe0; color:#6b7280; cursor:not-allowed; }
.matrix-lock { display:block; margin-top:3px; font-size:10px; white-space:nowrap; }
.order-matrix .matrix-allocation { position:sticky; left:515px; z-index:3; min-width:76px; background:#f4f0e6; font-weight:700; }
.order-matrix thead .matrix-allocation { z-index:6; background:#343940; color:#fff; }
.order-matrix .matrix-total { position:sticky; left:515px; z-index:3; min-width:76px; background:#eef2f6; font-weight:800; }
.order-matrix thead .matrix-total { z-index:6; background:#343940; color:#fff; }
.allocation-matrix { width:max-content; min-width:100%; }
.bulk-allocation-matrix { width:max-content; min-width:100%; }
.bulk-allocation-matrix td,.bulk-allocation-matrix th { min-width:100px; }
.bulk-allocation-matrix td:first-child,.bulk-allocation-matrix th:first-child { min-width:55px; }
.bulk-allocation-matrix .bulk-allocation-product { min-width:240px; max-width:300px; white-space:normal; position:sticky; left:0; z-index:2; background:#fff; }
.bulk-allocation-matrix .allocation-input { min-width:84px; width:84px; padding:7px 6px; text-align:right; }
.bulk-allocation-matrix .bulk-ordered { font-size:12px; margin-bottom:5px; }
.bulk-allocation-matrix .bulk-remaining,
.bulk-allocation-matrix .bulk-remaining-header { position:sticky; left:295px; z-index:3; box-shadow:2px 0 0 #cbd5e1; }
.bulk-allocation-matrix .bulk-remaining { background:#fff8e3; font-weight:700; }
.bulk-allocation-matrix .bulk-remaining-header { z-index:5; }
.bulk-allocation-matrix td:first-child,.bulk-allocation-matrix th:first-child { position:sticky; left:0; width:55px; min-width:55px; max-width:55px; background:#fff; z-index:3; }
.bulk-allocation-matrix .bulk-allocation-product,.bulk-allocation-matrix th:nth-child(2) { position:sticky; left:55px; width:240px; min-width:240px; max-width:240px; }
.bulk-allocation-matrix th:first-child,.bulk-allocation-matrix th:nth-child(2) { background:#292c32; color:#fff; z-index:5; }
.allocation-matrix th, .allocation-matrix td { min-width:160px; }
.allocation-matrix tr > :first-child { position:sticky; left:0; min-width:100px; z-index:2; background:#343940; color:#fff; }
.allocation-matrix input { width:84px; min-width:84px; padding-left:6px; padding-right:6px; text-align:right; font-variant-numeric:tabular-nums; }
.form-grid input[name="unit_conversion"], .form-grid input[name="capacity"] { width:84px; min-width:84px; padding-left:6px; padding-right:6px; text-align:right; font-variant-numeric:tabular-nums; }
.form-grid input[name="default_rate"], .form-grid input[name="rate_value"] { width:60px; min-width:60px; padding-left:5px; padding-right:5px; text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap .allocation-matrix tbody th:first-child,
.table-wrap .allocation-matrix tbody th:last-child { border-radius:0; }
.allocation-page { min-width:0; }
.allocation-filter label { display:flex; flex-direction:column; gap:5px; margin:0; }
.allocation-filter input { min-width:0; width:220px; max-width:100%; }
.allocation-start-form { grid-template-columns:minmax(0,2fr) minmax(150px,1fr) auto; }
.allocation-start-form label { min-width:0; }
.allocation-start-form select { text-overflow:ellipsis; }
.allocation-actions { margin-top:16px; }
.allocation-page .allocation-matrix td { max-width:240px; overflow-wrap:anywhere; }
.allocation-page .allocation-matrix thead th { max-width:240px; white-space:normal; }
.allocation-page pre { white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:700px) {
  .allocation-start-form { grid-template-columns:minmax(0,1fr); }
  .allocation-filter { align-items:stretch; }
  .allocation-filter label { flex:1 1 180px; }
  .allocation-filter input { width:100%; }
  .allocation-actions button { max-width:100%; white-space:normal; }
}
.order-matrix .date-group + .date-group tr:first-child > * { border-top:3px solid #9ca3ad; }
.billed-order-row { background:#f3f4f6; color:#6b7280; }
.billed-order-row input:disabled { background:#e5e7eb; color:#6b7280; cursor:not-allowed; }
.order-matrix tfoot th { position:sticky; bottom:0; z-index:5; background:#343940; color:#fff; }
.eyebrow { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.16em; }
.login-shell { max-width:460px; margin:clamp(42px,9vh,92px) auto; padding:0 20px; }
.login-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:22px; }
.login-brand img { width:68px; height:68px; object-fit:contain; }
.login-brand span { display:block; font-size:28px; font-weight:900; font-style:italic; letter-spacing:.06em; color:var(--ink); }
.login-brand small { display:block; color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.3em; }
.login { margin:0; border-top:4px solid var(--brand); padding:34px; box-shadow:0 22px 60px rgba(20,22,27,.13); }
.login h1 { font-size:27px; margin-top:7px; margin-bottom:10px; letter-spacing:.01em; }
.login-intro { color:var(--muted); margin:0 0 20px; font-size:13px; }
.login input { width:100%; }
@media (max-width:900px) {
  header { padding:0 12px; gap:10px; flex-wrap:nowrap; min-height:68px; }
  .brand img { width:105px; }
  .brand span { display:none; }
  nav { order:initial; width:auto; height:68px; gap:0; }
  nav > a, .nav-group summary { padding:0 10px; }
  .nav-menu { top:65px; }
  .logout { padding:7px 9px; }
  main { margin-top:22px; padding:0 14px 50px; }
}
@media (max-width:560px) {
  .brand img { width:72px; }
  .logout { font-size:0; }
  .logout::after { content:"ログアウト"; font-size:12px; }
  nav > a, .nav-group summary { padding:0 7px; font-size:12px; }
  .nav-group summary::after { margin-left:4px; }
}
/* Attribute colors include sticky product cells, but not the shared release-date header. */
tr[style*="--attribute-bg"] > td {
  background: var(--attribute-bg) !important;
  color: var(--attribute-fg) !important;
}
tr[style*="--attribute-bg"] > td .matrix-lock { color: inherit; }
@media print {
  header,.no-print { display:none !important; }
  body,main { background:#fff; margin:0; padding:0; }
  main { max-width:none; }
  .delivery-document .card { box-shadow:none; border-color:#777; break-inside:avoid; }
  .delivery-document .table-wrap { max-height:none; overflow:visible; }
  .delivery-document th { position:static; background:#fff; color:#111; border-top:1px solid #777; }
}
.allocation-group-products { min-width: 240px; max-width: 560px; white-space: normal; overflow-wrap: anywhere; }
.allocation-group-products > div + div { margin-top: 6px; }