@charset "UTF-8";
/* public/scss/_tokens.scss */
:root {
  --spruce-color-primary: #16a34a;
  --spruce-radius: 12px;
  --space-xxs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --bg: #0b1a14;
  --panel: #0f241b;
  --border: #1f3a2f;
  --muted: #9fb4a9;
  --sidebar-w: 260px;
  --sidebar-bg: #06170f;
  --sidebar-fg: #d1fae5;
  --sidebar-fg-dim: #99f6e4;
  --sidebar-active: #10b981;
  --sidebar-active-fg: #052e22;
  --input-h: 44px;
  --btn-h: 44px;
  --radius-sm: 10px;
  /* 強めの罫線色（重複定義を1箇所へ集約） */
  --border-strong: #2b4a3d;
}

/* SCSS 変数（必要に応じて計算・mixin で使用） */
/* public/scss/_mixins.scss */
/* public/scss/_base.scss */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: #e7ffef;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-md);
  color: #eafff2;
}

h1 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
}

h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
}

h3 {
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
}

/* public/scss/layout/_layout.scss */
body.layout {
  min-height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  /* 常に1カラム */
}

.main {
  min-width: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
}

.topbar {
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
.topbar__title {
  font-weight: 800;
  font-size: 1.05rem;
}
.topbar__space {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.topbar__menu {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--sidebar-fg);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: -ms-inline-grid;
  display: inline-grid;
  place-items: center;
}
.topbar__hello {
  color: var(--sidebar-fg-dim);
}

.content {
  padding: var(--space-lg) var(--space-xl);
  min-width: 0;
  width: 100%;
}

/* Backdrop（右側メニュー用） */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 15;
  display: none;
}

body.sidebar-open .backdrop {
  display: block;
}

body.sidebar-open-r .backdrop {
  display: block;
}

@media (max-width: 860px) {
  body.layout {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
/* public/scss/layout/_sidebar.scss */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  /* 初期は隠す */
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  z-index: 20;
}

body.sidebar-open .sidebar {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

body.sidebar-open-r .sidebar {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.sidebar__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  /* ← 追加：トグルの絶対配置用 */
}
.sidebar__brand .brand__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  color: inherit;
  text-decoration: none;
}
.sidebar__brand .brand__logo {
  font-size: 1.3rem;
}
.sidebar__brand .brand__title {
  font-weight: 800;
  letter-spacing: 0.2px;
}
.sidebar__brand .brand__version {
  font-size: 0.75rem;
  color: var(--sidebar-fg-dim);
  padding: 0.1rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.5rem;
}

/* ← 追加：見やすい“×”トグル（既存HTMLの .sidebar__toggle 用） */
.sidebar__toggle {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2.25rem;
  /* 36px：タッチしやすい */
  height: 2.25rem;
  display: -ms-grid;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  /* × を大きく */
  font-weight: 800;
  line-height: 1;
  color: #fff;
  /* 暗背景で高コントラスト */
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0.75rem;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 2;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, -webkit-transform 0.08s ease;
  transition: background 0.12s ease, border-color 0.12s ease, -webkit-transform 0.08s ease;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease, -webkit-transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.sidebar__toggle:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.sidebar__toggle:active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.sidebar__toggle:focus-visible {
  outline: none;
  -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* 明色テーマでも視認性を確保（任意） */
@media (prefers-color-scheme: light) {
  .sidebar__toggle {
    color: #0b0b0b;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.18);
  }
  .sidebar__toggle:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.28);
  }
}
.sidebar__nav {
  padding: 0.6rem 0.4rem;
  overflow: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__item {
  margin: 0.15rem 0;
}
.menu__item.is-active .menu__link {
  background: var(--sidebar-active);
  color: var(--sidebar-active-fg);
}
.menu__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  color: var(--sidebar-fg);
  text-decoration: none;
}
.menu__link:hover {
  background: rgba(255, 255, 255, 0.06);
}
.menu__icon {
  width: 1.4rem;
  text-align: center;
}
.menu__text {
  font-weight: 700;
}

.sidebar__footer {
  padding: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: -ms-grid;
  display: grid;
  gap: 0.6rem;
}
.sidebar__footer .userchip {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2rem 0.6rem auto;
  grid-template-columns: 2rem auto;
  gap: 0.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sidebar__footer .userchip__avatar {
  width: 2rem;
  height: 2rem;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}
.sidebar__footer .userchip__name {
  font-weight: 800;
}
.sidebar__footer .userchip__role {
  font-size: 0.85rem;
  color: var(--sidebar-fg-dim);
}
.sidebar__footer .btn {
  background: rgba(255, 255, 255, 0.1);
  color: #eafff2;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.sidebar__footer .btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.sidebar__footer .btn.btn--primary {
  background: var(--sidebar-active);
  color: var(--sidebar-active-fg);
  border-color: transparent;
}

/* モバイル：右からスライドイン */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--sidebar-w);
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    z-index: 20;
  }
}
/* public/scss/components/_card.scss */
.card {
  border: 1px solid var(--border);
  border-radius: var(--spruce-radius);
  background: var(--panel);
}

.card__body {
  padding: var(--space-lg);
}

.section {
  margin-bottom: var(--space-xl);
}

/* public/scss/components/_table.scss */
.table,
.table.table--full {
  display: table;
  table-layout: auto;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--spruce-radius);
  overflow: hidden;
  margin-top: var(--space-md);
}

.table th,
.table td {
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0.8rem;
  text-align: left;
  color: #eafff2;
}
.table tr:last-child td {
  border-bottom: none;
}
.table th {
  font-weight: 800;
}
.table th.actions,
.table td.actions {
  width: auto;
  min-width: 140px;
}

.actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.actions .btn {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .actions {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 0.4rem;
  }
}

/* table-block utilities (div構成) */
.thead {
  display: table-header-group;
}

.tbody {
  display: table-row-group;
}

.trow {
  display: table-row;
}

.tcell {
  display: table-cell;
  padding: 0.7rem 0.8rem;
}

.tcell--bold {
  font-weight: 800;
}

.tcell--right {
  text-align: right;
}

.tcell--w-52 {
  width: 52px;
}

.tcell--w-180 {
  width: 180px;
}

.tcell--w-220 {
  width: 220px;
}

/* 共通ホバー */
.tbody .trow:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ドラッグハンドル */
.row-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}

.row-draggable.dragging {
  opacity: 0.6;
}

.dragcell {
  width: 48px;
  text-align: center;
  color: #93b4a6;
  font-weight: 700;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
}

.trow:hover .dragcell {
  color: #c5ffe6;
}

/* public/scss/components/_form.scss */
.form {
  display: -ms-grid;
  display: grid;
  gap: var(--space-md);
  color: #eafff2;
}
.form .form__label {
  display: -ms-grid;
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}
.form .form__control {
  height: var(--input-h);
  width: 100%;
  padding: 0 0.8rem;
  line-height: calc(var(--input-h) - 2px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #072016;
  color: #eafff2;
}
.form .form__control::-webkit-input-placeholder {
  color: #99b5a9;
}
.form .form__control::-moz-placeholder {
  color: #99b5a9;
}
.form .form__control:-ms-input-placeholder {
  color: #99b5a9;
}
.form .form__control::-ms-input-placeholder {
  color: #99b5a9;
}
.form .form__control::placeholder {
  color: #99b5a9;
}
.form .form__control:focus {
  outline: none;
  border-color: var(--spruce-color-primary);
  -webkit-box-shadow: 0 0 0 3px color-mix(in oklab, var(--spruce-color-primary), #0b1a14 80%);
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--spruce-color-primary), #0b1a14 80%);
}
.form select.form__control {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-image: none;
}
.form textarea.form__control {
  height: auto;
  min-height: 110px;
  line-height: 1.5;
  padding: 0.7rem 0.8rem;
}

.form--inline {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 220px 1rem 1fr 1rem 160px;
  grid-template-columns: 220px 1fr 160px;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media (max-width: 900px) {
  .form--inline {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* 2カラム（パレットツール＋右側操作） */
.form--inline-2col {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 220px;
  grid-template-columns: 1fr 220px;
  gap: 1rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media (max-width: 960px) {
  .form--inline-2col {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* 3列（L/W/H） */
.form--inline-3col {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(180px, 1fr) 1rem minmax(180px, 1fr) 1rem minmax(180px, 1fr);
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media (max-width: 900px) {
  .form--inline-3col {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.form__row-compact {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media (max-width: 640px) {
  .form__row-compact {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.form__row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

.form__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

/* 追加フォーム（倉庫マスタ踏襲） */
.form--wh-add {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(260px, 360px) 1rem minmax(260px, 1fr) 1rem auto;
  grid-template-columns: minmax(260px, 360px) minmax(260px, 1fr) auto;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
.form--wh-add .form__control {
  width: 100%;
}
@media (max-width: 900px) {
  .form--wh-add {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* 追加フォーム（マスタ共通） */
.form--master-add {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 260px 1rem 220px 1rem 140px;
  grid-template-columns: 260px 220px 140px;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
@media (max-width: 900px) {
  .form--master-add {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* public/scss/components/_button.scss */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.4rem;
  min-height: var(--btn-h);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: #183328;
  color: #eafff2;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}
.btn:hover {
  background: #1d3a2e;
}
.btn--primary {
  background: var(--spruce-color-primary);
  color: #041b11;
  border-color: transparent;
}
.btn--primary:hover {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.btn--ghost {
  background: transparent;
  color: var(--sidebar-fg);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn--danger {
  background: #b91c1c;
  border-color: transparent;
}
.btn--danger:hover {
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}
.btn--seg {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  border-radius: 10px;
}
.btn--tight {
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.btn--compact {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  line-height: 1.1;
  border-radius: 10px;
}

.btnseg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem;
}

.btnseg__radio {
  display: none;
}

.btnseg__radio:checked + .btn--seg {
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid rgba(59, 130, 246, 0.55);
}

/* public/scss/components/_toolbar.scss */
.toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0.25rem 0 0.75rem;
}

.toolbtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.toolbtn input {
  display: none;
}
.toolbtn:has(input:checked) {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.55);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.toolbtn__icon {
  font-size: 1.05rem;
}

.ops-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
}
.ops-buttons .btn {
  width: 100%;
}

.penset[disabled],
.penset:has(select:disabled) {
  opacity: 0.6;
}

.penset:has(select:disabled) .chip {
  pointer-events: none;
}

.penset > legend {
  color: #eafff2;
  font-weight: 800;
}

.is-tool-erase .paint-cell {
  cursor: not-allowed;
  outline: 1px dashed rgba(244, 63, 94, 0.4);
}

/* public/scss/components/_legend.scss */
.legend--palette {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.legend__title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.legend__items {
  display: -ms-grid;
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.legend__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}

.legend__swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--swatch, rgba(255, 255, 255, 0.15));
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* public/scss/features/_reorder.scss */
/* 並び替え・行インライン編集・ワークフロー共通 */
.row-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}
.row-draggable.dragging {
  opacity: 0.7;
  outline: 2px dashed rgba(255, 255, 255, 0.25);
}
.row-draggable:hover {
  background: rgba(255, 255, 255, 0.03);
}
.row-draggable.is-editing {
  background: rgba(16, 185, 129, 0.08);
  -webkit-box-shadow: inset 0 -2px color-mix(in oklab, var(--sidebar-active) 55%, #000 45%);
          box-shadow: inset 0 -2px color-mix(in oklab, var(--sidebar-active) 55%, #000 45%);
}
.row-draggable.is-editing .row-actions .btn-edit {
  display: none;
}
.row-draggable.is-editing .row-actions .btn-save,
.row-draggable.is-editing .row-actions .btn-delete,
.row-draggable.is-editing .row-actions .btn-cancel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.row-draggable.is-editing .edit-input {
  display: inline-block;
  width: 100%;
  height: 38px;
}
.row-draggable.is-editing .view-text {
  display: none !important;
}

.row-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* 枠消し */
}
.row-actions form {
  margin: 0;
}
.row-actions form.inline-delete-form {
  display: contents;
}
.row-actions .btn-edit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.row-actions .btn-save,
.row-actions .btn-delete,
.row-actions .btn-cancel {
  display: none;
}

/* セクション一覧は常時「削除」表示（インライン編集UIを使わないため） */
#sectionsTable .row-actions .btn-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

#sectionsTable .row-draggable.is-editing .row-actions .btn-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* Warehouses専用（行のアンダーライン強化） */
#whTbody > .row-draggable {
  position: relative;
  -webkit-box-shadow: inset 0 -1px var(--border-strong);
          box-shadow: inset 0 -1px var(--border-strong);
}

/* 行内エディット（data-row 版） */
[data-row] .edit-input {
  display: none;
  width: 100%;
  height: 38px;
}
[data-row].is-editing .edit-input {
  display: inline-block;
}
[data-row].is-editing [data-view] {
  display: none;
}
[data-row].is-editing .btn-edit {
  display: none;
}
[data-row].is-editing .btn-save,
[data-row].is-editing .btn-delete,
[data-row].is-editing .btn-cancel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* public/scss/features/_pallet-assign.scss */
/* =========================================
   パレット登録（グリッド／セル／サイズ切替）
   ========================================= */
/* ---- スケール & 余白 ---- */
:root {
  --pa-cell-scale: 1;
  /* 1=大, 0.8=中, 0.6=小 */
  --pa-cell-gap: 8px;
  /* 既存 gap を維持 */
  --content-pad-inline: 1rem;
  /* .content の左右余白と合わせたい場合のフォールバック */
  --ops-mini-offset: 56px;
  /* トップバー高さに合わせて微調整 */
  --content-pad-inline: 1rem;
  /* layout と同じ余白 */
}

/* ---- セルサイズ切替スイッチ（右上固定） ---- */
.main .content {
  position: relative;
}

.cellsize {
  position: absolute;
  top: 10px;
  /* ご指定どおり */
  right: var(--content-pad-inline);
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  /* 選択中の見た目（わかりやすく） */
}
.cellsize .btnseg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.cellsize .btn.btn--seg.is-active {
  font-weight: 600;
  border-color: var(--spruce-color-primary, #0d6efd);
  -webkit-box-shadow: 0 0 0 2px color-mix(in srgb, var(--spruce-color-primary, #0d6efd) 22%, transparent);
          box-shadow: 0 0 0 2px color-mix(in srgb, var(--spruce-color-primary, #0d6efd) 22%, transparent);
}

/* 狭幅時は見出しの下に右寄せで回す */
@media (max-width: 560px) {
  .cellsize {
    position: static;
    margin: 0.35rem 0 0.5rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
/* ---- グリッド ---- */
.paint-grid {
  --cell: calc(76px * var(--pa-cell-scale));
  /* 大=76px / 中=60.8px / 小=45.6px */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: ;
  grid-template-columns: repeat(var(--cols), var(--cell));
  gap: var(--pa-cell-gap);
  padding: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: auto;
}

/* ---- セル ---- */
.paint-cell {
  position: relative;
  height: var(--cell);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.06)), to(rgba(255, 255, 255, 0.02)));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  cursor: pointer;
}
.paint-cell.is-dirty {
  border-color: color-mix(in oklab, var(--spruce-color-primary) 70%, #000 30%);
  -webkit-box-shadow: 0 0 0 2px color-mix(in oklab, var(--spruce-color-primary) 25%, transparent);
          box-shadow: 0 0 0 2px color-mix(in oklab, var(--spruce-color-primary) 25%, transparent);
}

/* ---- 充填レイヤ ---- */
.paint-fill {
  position: absolute;
  inset: 0;
  background: var(--fill, transparent);
  border-radius: 10px;
  pointer-events: none;
}
.paint-fill.plan {
  top: auto;
  bottom: 0;
  height: calc(100% * var(--pct, 0));
  /* 下から割合で塗る */
  -webkit-transition: height 0.12s ease;
  transition: height 0.12s ease;
}

/* ---- セル内ラベル & 補助表示（スケール連動） ---- */
.paint-label {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  color: #fff;
  font-size: calc(0.9rem * var(--pa-cell-scale));
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: pre-line;
  /* 改行保持して複数行OK */
  overflow: visible;
  background: transparent;
}

.paint-xy,
.paint-h {
  position: absolute;
  font-size: calc(0.72rem * var(--pa-cell-scale));
  opacity: 0.5;
  z-index: 2;
}

.paint-xy {
  left: 8px;
  top: 6px;
}

.paint-h {
  right: 8px;
  top: 6px;
}

/* ---- 段セグメント（必要に応じて使用） ---- */
.paint-seg {
  position: absolute;
  left: 2px;
  right: 2px;
  height: calc(100% / var(--mz));
  bottom: calc((var(--z) - 1) * 100% / var(--mz));
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  z-index: 1;
}
.paint-seg.is-filled {
  background: var(--fill);
  border-color: color-mix(in oklab, var(--fill), #000 30%);
}
.paint-seg.is-planned {
  outline: 2px solid rgba(59, 130, 246, 0.55);
  outline-offset: -1px;
}

.paint-seg-label {
  position: absolute;
  inset: 2px 6px;
  z-index: 3;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: pre-line;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.7);
}

/* ---- 等級パターン（B:ストライプ, C:ドット） ---- */
.paint-cell.grade-B::after,
.paint-cell.grade-C::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.paint-cell.grade-B::after {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0.14) 6px, transparent 6px, transparent 12px);
}

.paint-cell.grade-C::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 18%, transparent 19%), radial-gradient(rgba(255, 255, 255, 0.18) 18%, transparent 19%);
  background-size: 10px 10px, 10px 10px;
  background-position: 0 0, 5px 5px;
}

/* 画面上部にかぶせる簡易バー（必要な時だけ表示） */
.ops-actions-float {
  position: sticky;
  top: 0;
  /* トップバーの直下に載せたいなら値を調整 */
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  background: rgba(20, 20, 20, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== アクション・ミニバー（IntersectionObserverで表示制御） ===== */
/* フォールバック値（JSが実値を上書き） */
:root {
  --ops-mini-offset: 56px;
  --content-pad-inline: 1rem;
}

.ops-mini {
  position: fixed;
  top: 56px;
  right: calc(var(--content-pad-inline) + env(safe-area-inset-right, 0px));
  z-index: 1100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.5rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 2rem);
  white-space: nowrap;
  background: color-mix(in oklab, #111 65%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.ops-mini[hidden] {
  display: none !important;
}
.ops-mini.is-live {
  -webkit-animation: opsMiniFade 0.14s ease-out both;
          animation: opsMiniFade 0.14s ease-out both;
}

@-webkit-keyframes opsMiniFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes opsMiniFade {
  from {
    opacity: 0;
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@media (max-width: 560px) {
  .ops-mini {
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: none;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
/* ゲート印（控えめ） */
.paint-cell.is-gate {
  /* 左端に細いタブ */
}
.paint-cell.is-gate::before {
  content: "";
  position: absolute;
  left: -3px; /* ほんの少し外へ */
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 12px;
  border: 1px solid #a2ff00;
  /* amber系 */
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* public/scss/_utilities.scss */
.w-100 {
  width: 100%;
}

.actions-vertical {
  display: -ms-grid;
  display: grid;
  gap: 0.5rem;
  -ms-grid-row-align: end;
      align-self: end;
}

.inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--space-sm);
}

.stack > * + * {
  margin-top: var(--space-sm);
}

.help {
  color: var(--muted);
  font-size: 0.9rem;
}

.notice {
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  margin: 0.5rem 0;
}
.notice--danger {
  background: #3a1416;
  border: 1px solid #7f1d1d;
  color: #ffd7d7;
}
.notice--info {
  background: #112c22;
  border: 1px solid #2d6a4f;
  color: #c9ffe1;
}

/* === totals (planned capacity) === */
.totals-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}

.total-item,
#planTotalsSum {
  -ms-grid-columns: 28px 0.8rem 1fr 0.8rem auto;
  grid-template-columns: 28px 1fr auto;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem 0.8rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid color-mix(in oklab, var(--border), #000 10%);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

#planTotalsSum {
  margin-top: 0.55rem;
  font-size: 1.02rem;
  font-weight: 800;
  border-style: dashed;
}

.total-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--swatch, rgba(255, 255, 255, 0.15));
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px color-mix(in oklab, var(--swatch), #000 65%);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px color-mix(in oklab, var(--swatch), #000 65%);
}

.total-swatch.sum {
  background: linear-gradient(135deg, #a7f3d0, #34d399);
}

.total-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.25rem;
}
.total-label .total-variety {
  font-weight: 800;
}
.total-label .total-spec {
  opacity: 0.95;
}

.total-qty {
  white-space: nowrap;
  font-weight: 800;
}
.total-qty .total-tiers {
  opacity: 0.85;
  font-weight: 600;
  margin-left: 0.25rem;
}

.totals-empty {
  opacity: 0.7;
  padding: 0.3rem 0.2rem;
}

/* scss/modules/_patterns.scss */
/* パターンは“明度・塗り色”の上に重ねる前提（background-image を重ねる） */
.paint-fill.plan {
  background-color: var(--fill);
  background-blend-mode: normal;
  /* 薄めのハイライトが見えるように */
}

/* public/scss/modules/_warehouses_layout.scss */
/* Warehouses Layout（画面用） */
.warehouses-layout {
  /* 区画コンテナ：左詰・折返し */
  /* 区画カード（画面） */
  /* レイアウト用のグリッド微調整（背景/枠を消してカードの中に馴染ませる） */
  /* 等級パターン（画面） */
  /* 集計（規格ごと1行） */
  /* 画面表示用：集計の規格テキストは省略せず全表示 */
}
.warehouses-layout .sections-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.warehouses-layout .section-card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 260px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel);
}
.warehouses-layout .section-card__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 0.4rem;
}
.warehouses-layout .section-card__title {
  font-weight: 800;
}
.warehouses-layout .paint-grid {
  background: none;
  border: none;
  padding: 2px;
  border-radius: 3px;
}
.warehouses-layout .paint-grid.layout--compact {
  --cell: 46px;
  /* 76px の約60% */
  gap: 6px;
}
.warehouses-layout .paint-cell,
.warehouses-layout .paint-fill {
  border-radius: 3px;
}
.warehouses-layout .paint-cell {
  position: relative;
}
.warehouses-layout .paint-label {
  position: absolute;
  /* ← 2px の余白 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* 完全中央寄せ */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 垂直センター */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 水平センター */
  z-index: 4;
  /* ゲート枠より前、他装飾より上 */
  text-align: center;
  white-space: pre-line;
  /* 2行表記OK */
  line-height: 1.2;
  /* 既存値は維持 */
  overflow: visible;
  text-overflow: clip;
  font-size: 0.8rem;
}
.warehouses-layout .paint-cell.grade-b .paint-fill.plan {
  background-image: radial-gradient(circle at 4px 4px, rgba(255, 255, 255, 0.25) 2px, transparent 2px);
  background-size: 10px 10px;
}
.warehouses-layout .paint-cell.grade-c .paint-fill.plan {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 10px);
}
.warehouses-layout .totals-card {
  margin-top: 1rem;
}
.warehouses-layout .totals-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: -ms-grid;
  display: grid;
  gap: 0.4rem;
}
.warehouses-layout .totals-item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 22px 0.6rem 1fr 0.6rem auto;
  grid-template-columns: 22px 1fr auto;
  gap: 0.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.warehouses-layout .totals-item.totals-sum {
  font-weight: 800;
}
.warehouses-layout .totals-item .swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--swatch, rgba(255, 255, 255, 0.15));
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.warehouses-layout .totals-item .totals-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.warehouses-layout .totals-item .totals-value {
  font-weight: 800;
}
.warehouses-layout .warehouses-layout .totals-list .totals-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.warehouses-layout .paint-cell.is-gate::before {
  border-radius: inherit;
}

/* ゲート印（レイアウト画面） */
.warehouses-layout .paint-cell.is-gate::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border-radius: 6px;
  /* レイアウトの小さめ角丸に寄せる */
  border: 1px solid #a2ff00;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

/* _layout-print.css */
@media print {
  /* ===== A4横・余白控えめ ===== */
  @page {
    size: A4 landscape;
    margin: 8mm;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 8px;
    line-height: 1.3;
  }
  h3 {
    color: #000;
  }
  /* 画面UIは非表示 */
  .sidebar,
  .topbar,
  .backdrop,
  .toolbar,
  .btn,
  .help {
    display: none !important;
  }
  .content {
    padding: 0 !important;
  }
  /* ページタイトル（h2）は印刷しない */
  .content > h2 {
    display: none !important;
  }
  /* ===== 倉庫ごとに1ページ開始 ===== */
  .card.section {
    background: #fff !important;
    border: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    page-break-before: auto;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
  .card.section:first-of-type {
    page-break-before: auto;
  }
  /* 倉庫カード中は 2カラム（左=区画, 右=集計） */
  .card.section > .card__body {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: 1fr 6mm 158mm;
    grid-template-columns: 1fr 158mm;
    /* 右サイドの幅を確保 */
    -webkit-column-gap: 6mm;
       -moz-column-gap: 6mm;
            column-gap: 6mm;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    padding: 4mm 0 0 !important;
  }
  /* 右カラム＝内側の “集計カード(.card.section)” をそこへ配置 */
  .card.section > .card__body > .card.section {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/span 2;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  .card.section > .card__body > .card.section > .card__body {
    padding: 0 !important;
  }
  /* 左カラム＝区画の並び（余白を詰める） */
  .card.section > .card__body > .sections-flex {
    -ms-grid-column: 1;
    grid-column: 1;
    gap: 0mm !important;
    /* 区画間ギャップを小さく */
    -ms-flex-line-pack: start;
        align-content: start;
  }
  /* ===== 区画カードの見た目（白＆枠なし） ===== */
  .section-card {
    background: #fff !important;
    border: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  }
  /* ===== グリッド：セルは1行に収め、余白2px ===== */
  .paint-grid {
    --gap: 2px;
    --radius-scale: .6;
    width: 100%;
    gap: var(--gap) !important;
    --cell: calc((100% - (var(--cols, 1) - 1) * var(--gap)) / var(--cols, 1));
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px !important;
  }
  .paint-cell {
    position: relative;
    height: var(--cell);
    background: #fff !important;
    border: 1px solid #000 !important;
    border-radius: calc(var(--radius-sm, 10px) * var(--radius-scale, 0.6)) !important;
  }
  .paint-fill,
  .paint-fill.plan {
    background: transparent !important;
    border-radius: inherit !important;
    z-index: 1;
  }
  /* ラベル：中央揃え＆少し大きめ・最前面 */
  /* ラベル：中央寄せ＋下にゲージ用の余白を確保（insetは使わない） */
  .paint-label {
    /* ← inset なし */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* 上=文字 / 下=ゲージ */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* “文字＋ゲージ”全体を中央に */
    gap: 0.6mm;
    /* ★ ゲージ分の床を確保（被り防止） */
    z-index: 4 !important;
    color: #000 !important;
    text-shadow: none !important;
    font-weight: 700;
    font-size: 11px !important;
    line-height: 1 !important;
    /* ★ ご指定 */
    text-align: center;
    white-space: pre-line !important;
    overflow: visible !important;
    text-overflow: clip !important;
    top: -7px !important;
    bottom: unset !important;
  }
  /* 印刷時は XY/H を非表示 */
  .paint-xy,
  .paint-h {
    display: none !important;
  }
  /* ===== 等級パターン（A=無地／B=ストライプ／C=ドット） ===== */
  .paint-cell.grade-b::after,
  .paint-cell.grade-c::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: normal;
    opacity: 0.25;
    /* 濃くなり過ぎない */
    z-index: 2;
    background-repeat: repeat;
    background-color: transparent;
  }
  .paint-cell.grade-b::after {
    background-image: url("/assets/print/patterns/stripe-diag.svg");
    background-size: 12px 12px;
  }
  .paint-cell.grade-c::after {
    background-image: url("/assets/print/patterns/dots.svg");
    background-size: 10px 10px;
  }
  /* ===== 集計：右サイドに細字・小さめで “上段=規格 左揃え / 下段=数量 右揃え” の2段表示 ===== */
  /* 倉庫ごとの見出しは印刷非表示（全倉庫 合計はそのまま表示） */
  .warehouse-card .legend__title {
    display: none !important;
  }
  .legend--palette {
    display: none !important;
  }
  /* 画面用凡例は印刷で非表示 */
  .totals-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    /* サイドバーなので1列 */
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    font-size: 8pt;
    /* 右サイドに収めるため小さく */
  }
  .totals-item {
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    /* ← 1列にして縦積み */
    grid-auto-rows: auto;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    row-gap: 0.8mm;
    /* 規格と数量の間隔 */
    padding: 0;
    margin: 0 0 2mm;
    border: none !important;
    background: transparent !important;
  }
  .totals-item .swatch {
    display: none !important;
  }
  /* 上段：規格（左揃え・改行禁止） */
  .totals-item .totals-label {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000 !important;
    font-weight: 400;
    -ms-grid-column-align: start;
        justify-self: start;
  }
  /* 下段：数量（右揃え・改行禁止） */
  .totals-item .totals-value {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000 !important;
    font-weight: 400;
    /* ノーマルウェイト */
    -ms-grid-column-align: end;
        justify-self: end;
    /* 右端に揃える */
  }
  /* 合計も同じ書式（必要なら太字に） */
  .totals-item.totals-sum .totals-value {
    font-weight: 400;
  }
  /* ====== 倉庫ごとのサイド集計だけを調整（印刷時） ====== */
  /* 「集計（倉庫名）」見出しは隠すが、全倉庫の見出しは残す */
  .warehouse-card .legend__title {
    display: none !important;
  }
  /* 右サイドのリスト（倉庫ごと）：詰まり防止＆小さめ文字 */
  .warehouse-card .totals-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    /* 右サイドなので1列のまま */
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    font-size: 8pt;
    /* 指定どおり小さめ */
  }
  /* 2段レイアウト：
  - 1段目：規格（左）
  - 2段目：収納量（右） */
  .warehouse-card .totals-item {
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 1.2mm auto;
    grid-template-rows: auto auto;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    row-gap: 1.2mm;
    padding: 0;
    margin: 0 0 2.2mm;
    border: none !important;
    background: transparent !important;
  }
  .warehouse-card .totals-item > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .warehouse-card .totals-item > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .warehouse-card .totals-item .swatch {
    display: none !important;
  }
  .warehouse-card .totals-item .totals-label {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column-align: start;
        justify-self: start;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000 !important;
    font-weight: 400;
    /* ノーマルウェイト */
  }
  .warehouse-card .totals-item .totals-value {
    -ms-grid-row: 2;
    grid-row: 2;
    -ms-grid-column-align: end;
        justify-self: end;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #000 !important;
    font-weight: 400;
    /* ノーマルウェイト */
  }
  /* （参考）全倉庫 合計セクションは既存のまま＝1行横並びのまま */
  /* 右カラムの横幅を少しだけ広げて詰まりにくく */
  .card.section > .card__body {
    -ms-grid-columns: 1fr 64mm;
    grid-template-columns: 1fr 64mm;
    /* ← 58 → 64mm に拡張 */
  }
  /* 倉庫ごとの見出しは非表示、全倉庫は表示のまま */
  .warehouse-card .legend__title {
    display: none !important;
  }
  /* 右カラムのリスト：2段ブロックを前提に */
  .warehouse-card .totals-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    font-size: 8pt;
    /* 小さめ */
    -webkit-column-count: 1;
       -moz-column-count: 1;
            column-count: 1;
    /* 1列固定 */
  }
  .warehouse-card .totals-item {
    display: block !important;
    /* ブロック化で確実に段落け */
    margin: 0 0 2mm;
    -webkit-column-break-inside: avoid;
       -moz-column-break-inside: avoid;
            break-inside: avoid;
  }
  /* 1段目：規格（左） */
  .warehouse-card .totals-line1 {
    display: block;
    margin: 0 0 0.8mm;
  }
  .warehouse-card .totals-label {
    white-space: nowrap !important;
    /* 途中改行させない */
    overflow: visible !important;
    font-weight: 400;
  }
  /* 2段目：数量（右） */
  .warehouse-card .totals-line2 {
    display: block;
    text-align: right;
    /* 右揃え */
  }
  .warehouse-card .totals-value {
    white-space: nowrap !important;
    font-weight: 400;
  }
  /* 画面表示用：集計の規格テキストは省略せず全表示 */
  .warehouses-layout .totals-list .totals-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* _layout-print.css 追記（@media print { ... } の中） */
  /* 1) 左カラム：区画の並び（ご指定の gap:0 を確実に） */
  .card.section > .card__body > .sections-flex {
    gap: 0 !important;
  }
  /* 2) 右カラム：幅を少しだけ拡張（表が重ならないよう余裕を+） */
  .card.section > .card__body {
    -ms-grid-columns: 1fr 64mm;
    grid-template-columns: 1fr 64mm;
    /* 58mm -> 64mm */
  }
  /* 3) 倉庫ごとの集計：上下2段の“縦積み”を強制＆はみ出し防止 */
  .warehouse-card .totals-item {
    display: -ms-grid !important;
    display: grid !important;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    /* 1列だけ */
    -ms-grid-rows: auto 1mm auto;
    grid-template-rows: auto auto;
    /* 1段目=規格／2段目=数量 */
    row-gap: 1mm;
  }
  .warehouse-card .totals-item > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .warehouse-card .totals-item > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .warehouse-card .totals-item .totals-label,
  .warehouse-card .totals-item .totals-value {
    display: block !important;
    /* ブロック化で衝突回避 */
    white-space: nowrap !important;
    /* 折り返さない */
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .warehouse-card .totals-item .totals-label {
    -ms-grid-column-align: start;
        justify-self: start;
  }
  .warehouse-card .totals-item .totals-value {
    -ms-grid-column-align: end;
        justify-self: end;
  }
  /* === Gate mark (print) =============================================== */
  .paint-cell.is-gate::before {
    content: "";
    position: absolute;
    left: 0px;
    /* 用紙内に収める */
    top: 0px;
    width: calc(100% + 0px);
    height: calc(100% + 0px);
    border-radius: inherit;
    /* カラー印刷では黄緑、モノクロでも見えるよう 1px 黒の外側影を追加 */
    border: 2px dotted #000 !important;
    pointer-events: none;
    z-index: 3;
    /* 塗り(1)より上、ラベル(4)より下 */
  }
  /* ゲート強調がラベルに隠れないよう保険（既に z-index 指定済みだが念のため） */
  .paint-label {
    z-index: 4 !important;
  }
  /* 印刷時だけゲージを出す（画面では .tier-gauge は display:none のまま） */
  .tier-gauge {
    display: -ms-inline-grid;
    display: inline-grid;
    grid-auto-flow: column;
    gap: 0.6mm;
    /* セグメント間の隙間（お好みで） */
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -14px;
    height: 10px;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    z-index: 3;
    /* 等級模様より上、ラベル文字より下にしたいなら 3 のまま */
  }
  /* 1マス */
  .tier-gauge .tier-box {
    display: block;
    width: calc((100% - var(--seg-gap, 0mm) * (var(--seg-count, 0))) / var(--seg-count, 1));
    /* 幅は CSS 変数が無くても inline-grid が均等にしてくれるので実質不要 */
    border: 1px solid #000;
    border-radius: 2px;
    background: #fff;
    /* 空き */
  }
  /* 充填マス */
  .tier-gauge .tier-box.is-on {
    background: #000;
  }
}
/* pages/_invites.scss */
/* 招待ページは「配置」だけ。見た目は .form__control / .btn に委譲 */
.invites .invites-form {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 16px minmax(12rem, 18rem) 16px minmax(6rem, 9rem) 16px auto;
  grid-template-columns: 1fr minmax(12rem, 18rem) minmax(6rem, 9rem) auto;
  gap: 12px 16px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
.invites .field {
  display: -ms-grid;
  display: grid;
  gap: 0.45rem;
}
.invites .field .form__control {
  width: 100%;
}
.invites .field--submit {
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
}
.invites .field--submit .btn {
  min-height: var(--btn-h);
  font-weight: 800;
  padding-inline: 1.25rem;
}
.invites .invites-list {
  display: -ms-grid;
  display: grid;
  gap: 0.75rem;
}
.invites .invite-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 0.5rem 0.75rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
.invites .invite-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.invites .invite-meta .chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
}
.invites .invite-meta .chip.chip--email {
  font-weight: 700;
}
.invites .invite-meta .chip.chip--expired {
  background: color-mix(in oklab, #f00 18%, transparent);
  border-color: color-mix(in oklab, #f00 40%, #000 60%);
  color: #fff;
  font-weight: 800;
}
.invites .invite-link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.5rem auto;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.invites .invite-link .btn-copy {
  height: 2.2rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  .invites .invites-form {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
/*# sourceMappingURL=app.css.map */