/**
 * @file public/css/stores.css
 * @description BA-143 (BA15-a) 店舗管理 UI 専用 + 旧緑枠UI隠し
 *
 * - 経営管理 → 店舗管理タブの追加スタイル (最小限)
 * - 旧 store-tab / store-add-btn 緑枠UI は CSS のみで非表示
 *   (BA15-d でヘッダープルダウンに完全置換予定、DOM 側は保持)
 */

/* ============ BA-143 旧緑枠UI 非表示 ============ */
/* 旧 jobs.js の store-tab / store-add-btn 群を非表示。
   DOM は残し、BA15-d でヘッダープルダウンが入ってから本削除を検討。 */
body.salon-page .store-tab,
body.salon-page #store-add-btn,
body.salon-page .store-selector {
  display: none !important;
}

/* ============ BA-143 店舗管理タブ ============ */
#pane-stores {
  background: #fff;
}

#pane-stores .btn-primary,
#pane-stores .btn-secondary {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
}

#pane-stores .btn-primary {
  background: var(--ba-primary, #e91e8c);
  color: #fff;
  padding: 8px 16px;
  border: none;
}

#pane-stores .btn-primary:hover { opacity: 0.9; }

#pane-stores .btn-secondary {
  background: #f5f5f5;
  color: #333;
  padding: 6px 12px;
  border-color: #ddd;
}

#pane-stores .btn-secondary:hover { background: #ebebeb; }

#pane-stores table {
  background: #fff;
}

#pane-stores table thead th {
  font-weight: 600;
  color: #555;
}

#pane-stores table tbody tr:hover {
  background: #fafafa;
}

/* レスポンシブ: モバイルでテーブル横スクロール */
@media (max-width: 767px) {
  #pane-stores table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  #pane-stores table th,
  #pane-stores table td {
    padding: 8px 6px;
    font-size: 12px;
  }
}

/* ============ BA-155 (BA15-d-2) / BA-168 / BA-169 ヘッダー店舗プルダウン (緑ボタン化) ============ */
/* BA-169: セレクタ強化 (select要素 + 親 .salon-header スコープ) で specificity 0,2,1 に引き上げ、
   他CSS (variables.css/.form-select 等) による上書きを確実に回避。
   salon-header-domain の位置・サイズを継承して置換 (jobs/04-ocr-shift-staff.css 参照) */
select.salon-header-store-select,
.salon-header .salon-header-store-select {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #4caf50;
  border: none;
  border-radius: 18px;
  padding: 7px 32px 7px 14px;
  cursor: pointer;
  min-width: 160px;     /* BA-169: テキスト切れ防止の最小幅 */
  max-width: 240px;
  min-height: 34px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* ▼ 矢印 (白 SVG、ボタン感を強調) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.15s;
}
select.salon-header-store-select:hover:not(:disabled):not(.is-disabled-by-tab),
.salon-header .salon-header-store-select:hover:not(:disabled):not(.is-disabled-by-tab) {
  background-color: #43a047;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
select.salon-header-store-select:active:not(:disabled):not(.is-disabled-by-tab),
.salon-header .salon-header-store-select:active:not(:disabled):not(.is-disabled-by-tab) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
select.salon-header-store-select:focus,
.salon-header .salon-header-store-select:focus {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}
select.salon-header-store-select:disabled,
select.salon-header-store-select.is-disabled-by-tab,
.salon-header .salon-header-store-select:disabled,
.salon-header .salon-header-store-select.is-disabled-by-tab {
  background-color: #9e9e9e;
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none;
}
/* ドロップダウン内オプションは白背景・通常色 */
.salon-header-store-select option {
  background-color: #fff;
  color: #333;
}

/* manager ロール用 (非操作テキスト表示、薄緑で統一) */
.salon-header-store-locked {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #81c784;
  padding: 7px 14px;
  border-radius: 18px;
  min-height: 34px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* 店舗未登録時 */
.salon-header-store-empty {
  font-size: 12px;
  color: var(--ba-text-muted, #888);
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px dashed #ccc;
  white-space: nowrap;
}

/* スマホ: サイズ縮小 (緑ボタン感は維持) - BA-169 同様セレクタ強化 */
@media (max-width: 640px) {
  select.salon-header-store-select,
  .salon-header .salon-header-store-select,
  .salon-header-store-locked {
    max-width: 150px;
    font-size: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 32px;
    min-width: 130px;
    border-radius: 16px;
  }
  select.salon-header-store-select,
  .salon-header .salon-header-store-select {
    padding: 6px 28px 6px 12px;
  }
  .salon-header-store-locked {
    padding: 6px 12px;
  }
  .salon-header-store-empty {
    max-width: 140px;
    font-size: 11px;
    padding-left: 6px;
  }
}