/* ========================================
   管理画面のグローバル上書きスタイル
   root.tsx の <link href="/styles/global.css"> から読み込まれる。
   ※ app/styles/global.css は読み込まれていない旧ファイル（未使用）
   ======================================== */

/* 最新のShopify管理画面に合わせたピル型（完全角丸）ボタン */
.Polaris-Button {
  border-radius: 9999px !important;
}

/* セグメント切替グループは連結を維持し、両端だけ丸める */
.Polaris-ButtonGroup--variantSegmented .Polaris-Button {
  border-radius: 0 !important;
}

.Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item:first-child .Polaris-Button {
  border-radius: 9999px 0 0 9999px !important;
}

.Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item:last-child .Polaris-Button {
  border-radius: 0 9999px 9999px 0 !important;
}

/* モーダルの角丸を現行Shopify管理画面に合わせる */
.Polaris-Modal-Dialog__Modal {
  border-radius: 16px !important;
}

/* 保存トーストのスライドインアニメーション（ShopifyCalendar.tsxのDOMトーストが使用） */
@keyframes saveBarSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -12px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ========================================
   編集モードのセグメントボタン: 4等分の均等幅
   最長ラベルの言語（例: ポルトガル語 "Horário de funcionamento"）でも
   折り返さず収まるよう、必要時はグループ全体が広がる
   ======================================== */
.mode-picker .Polaris-ButtonGroup--variantSegmented {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  min-width: max-content;
}

.mode-picker .Polaris-ButtonGroup--variantSegmented .Polaris-ButtonGroup__Item {
  min-width: 0;
}

.mode-picker .Polaris-ButtonGroup--variantSegmented .Polaris-Button {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* 元に戻すボタン: 薄いグレー背景 */
.undo-button .Polaris-Button,
.undo-button button.Polaris-Button {
  background: #f1f2f3 !important;
  background-color: #f1f2f3 !important;
}

.undo-button .Polaris-Button:hover,
.undo-button button.Polaris-Button:hover {
  background: #e4e5e7 !important;
  background-color: #e4e5e7 !important;
}

/* 公開サイト含む全ページ: bodyのデフォルト余白で背景の縁が見えるのを防ぐ */
body {
  margin: 0;
}