/* ui.css — compass / keypad / stroke の見た目
   現場（明るい屋外）での使用を想定：高コントラスト・太めの線・大きめのタップ領域。
   ダークモード対応は不要（明るい場所前提）。
   クラス名は各部品ごとに接頭辞を分け、他のCSSと衝突しないようにしている：
     .cmp-compass  : コンパスローズ
     .cmp-keypad   : テンキー
   （stroke.js はDOM要素を自前で作らないため専用クラスは持たない。呼び出し側のcanvasに
    touch-action:none を自動で付与する） */

.cmp-compass,
.cmp-keypad {
  box-sizing: border-box;
  font-family: 'Hiragino Sans', 'Yu Gothic', 'Segoe UI', sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.cmp-compass *,
.cmp-keypad * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   コンパスローズ
   ------------------------------------------------------------ */

.cmp-compass {
  position: relative;
  margin: 0 auto;
}

.cmp-compass__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a3c5e;
  border-radius: 10px;
  background: #eaf2fb;
  color: #0b2c4d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.05s ease, transform 0.05s ease;
}

.cmp-compass__btn--outer {
  border-radius: 50%;
}

.cmp-compass__btn--center {
  border-radius: 8px;
  background: #eef7ea;
  border-color: #2e6b1f;
  color: #1d4a12;
}

/* 押した瞬間の視覚フィードバック（現場での手袋・ペン操作を想定） */
.cmp-compass__btn.is-pressing {
  background: #9cc4ee;
  transform: scale(0.94);
}

.cmp-compass__btn--center.is-pressing {
  background: #b9e0a6;
}

.cmp-compass__btn.is-active {
  background: #2f6fce;
  border-color: #123b6b;
  color: #ffffff;
}

.cmp-compass__btn--center.is-active {
  background: #3f8f24;
  border-color: #1d4a12;
  color: #ffffff;
}

.cmp-compass__btn.is-disabled,
.cmp-compass__btn:disabled {
  background: #e2e2e2;
  border-color: #a8a8a8;
  color: #9a9a9a;
  cursor: not-allowed;
}

/* ------------------------------------------------------------
   テンキー
   ------------------------------------------------------------ */

.cmp-keypad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
  padding: 12px;
  background: #ffffff;
  border: 2px solid #1a3c5e;
  border-radius: 12px;
  outline: none;
}

.cmp-keypad:focus-visible {
  border-color: #2f6fce;
  box-shadow: 0 0 0 3px rgba(47, 111, 206, 0.35);
}

.cmp-keypad__title {
  font-size: 14px;
  font-weight: 700;
  color: #333333;
}

.cmp-keypad__display {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  min-height: 48px;
  padding: 6px 12px;
  background: #0b2c4d;
  border-radius: 8px;
}

.cmp-keypad__display-value {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cmp-keypad__display.is-empty .cmp-keypad__display-value::after {
  content: '0';
  opacity: 0.35;
}

.cmp-keypad__display-unit {
  color: #b9d2ef;
  font-size: 16px;
  font-weight: 700;
}

.cmp-keypad__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cmp-keypad__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.cmp-keypad__btn {
  min-height: 48px;
  border: 2px solid #1a3c5e;
  border-radius: 8px;
  background: #eaf2fb;
  color: #0b2c4d;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.05s ease, transform 0.05s ease;
}

.cmp-keypad__btn.is-pressing {
  background: #9cc4ee;
  transform: scale(0.96);
}

.cmp-keypad__btn--clear {
  background: #fbeaea;
  border-color: #8e2323;
  color: #6b1919;
}

.cmp-keypad__btn--backspace {
  background: #fbeaea;
  border-color: #8e2323;
  color: #6b1919;
}

.cmp-keypad__btn--cancel {
  background: #efefef;
  border-color: #6b6b6b;
  color: #333333;
  font-size: 15px;
}

.cmp-keypad__btn--ok {
  background: #2f8f3d;
  border-color: #164e1e;
  color: #ffffff;
}

.cmp-keypad__btn:disabled {
  background: #e2e2e2;
  border-color: #a8a8a8;
  color: #9a9a9a;
  cursor: not-allowed;
}

.cmp-keypad__btn--ok:disabled {
  background: #cfe6d2;
  border-color: #a8c9ac;
  color: #f0f0f0;
}

/* ------------------------------------------------------------
   ストローク入力面（stroke.js が対象要素に自動付与するクラス）
   touch-action:none は誤操作防止のためstroke.js側でも直接styleに設定している。
   ここでは見た目（カーソル・テキスト選択防止）だけを補う。
   ------------------------------------------------------------ */

.cmp-stroke-surface {
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------
   区間編集メニュー（segment-menu.js）
   仕様書6.4：図面上の区間・頂点をタップして出す編集メニュー。
   キーパッドと同じ「画面下側・指で押せる大きさ」の方針に合わせる。
   ------------------------------------------------------------ */

.cmp-segment-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
  max-width: 100%;
  padding: 12px;
  background: #ffffff;
  border: 2px solid #1a3c5e;
  border-radius: 12px;
}

.cmp-segment-menu__title {
  font-size: 14px;
  font-weight: 700;
  color: #0b2c4d;
  padding: 0 2px;
}

.cmp-segment-menu__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cmp-segment-menu__item {
  min-height: 46px;
  padding: 8px 14px;
  border: 2px solid #1a3c5e;
  border-radius: 8px;
  background: #eaf2fb;
  color: #0b2c4d;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.05s ease, transform 0.05s ease;
}

.cmp-segment-menu__item.is-pressing {
  background: #9cc4ee;
  transform: scale(0.98);
}

.cmp-segment-menu__item--danger {
  background: #fbeaea;
  border-color: #8e2323;
  color: #6b1919;
}

.cmp-segment-menu__item--danger.is-pressing {
  background: #f0b8b8;
}

.cmp-segment-menu__warning {
  font-size: 13px;
  font-weight: 700;
  color: #8e2323;
  padding: 4px 2px 8px;
}

.cmp-segment-menu__close {
  min-height: 40px;
  padding: 6px 12px;
  border: 2px solid #6b6b6b;
  border-radius: 8px;
  background: #efefef;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.cmp-segment-menu__close.is-pressing {
  background: #d5d5d5;
}

/* ------------------------------------------------------------
   部品ライブラリ選択モーダル（parts-modal.js）
   仕様書6.9・14.4：全画面オーバーレイ＋カードグリッド。
   ------------------------------------------------------------ */

.cmp-parts-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(15, 27, 40, 0.55);
}

.cmp-parts-modal__sheet {
  margin-top: auto;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  border: 2px solid #1a3c5e;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cmp-parts-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 2px solid #e2e8f0;
  background: #0b2c4d;
  color: #fff;
}

.cmp-parts-modal__title {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.cmp-parts-modal__close {
  min-height: 40px;
  min-width: 40px;
  padding: 6px 12px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

.cmp-parts-modal__close.is-pressing {
  background: rgba(255,255,255,0.2);
}

.cmp-parts-modal__body {
  padding: 16px;
  overflow-y: auto;
}

.cmp-parts-modal__section-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin: 14px 0 8px;
}

.cmp-parts-modal__section-title:first-child {
  margin-top: 0;
}

.cmp-parts-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.cmp-parts-modal__grid--primary .cmp-parts-modal__card {
  min-height: 72px;
  font-size: 16px;
}

.cmp-parts-modal__card {
  min-height: 56px;
  padding: 10px;
  border: 2px solid #1a3c5e;
  border-radius: 10px;
  background: #eaf2fb;
  color: #0b2c4d;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.05s ease, transform 0.05s ease;
}

.cmp-parts-modal__card.is-pressing {
  background: #9cc4ee;
  transform: scale(0.97);
}

.cmp-parts-modal__card--other {
  background: #f1f1f1;
  border-color: #888;
  color: #333;
}

.cmp-parts-modal__notice {
  padding: 24px 12px;
  text-align: center;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Service Worker 更新通知バナー（src/ui/app.js、開発ルール17.1）
   新しいバージョンを検出しても自動更新はしない。ここでユーザーの意思を確認する。
   どの画面・モーダルの上にも必ず見えるよう、最前面・画面上端に固定する。
   ------------------------------------------------------------ */

.sw-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #123b6b;
  color: #fff;
  border-bottom: 2px solid #2f6fce;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sw-update-banner__text {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}