/* ════════════════════════════════════════════════════════════════
   ui-system.css — Amenita 共通デザイン言語
   ────────────────────────────────────────────────────────────────
   admin / customer 両方がロードする共通デザインレイヤー。

   設計原則:
   - brandcolor は「構造の存在」として扱う — 表面ではなく裏側に置く
   - rgba / blur / box-shadow による色表現は行わない
   - Offset = wrapper div の ::after に brandcolor を置き translate でズラす

   ════════════════════════════════
   【重要】.ui-offset の使い方
   ════════════════════════════════
   .ui-offset は必ず「ラッパー div」として使うこと。
   背景色を持つカード要素に直接つけてはいけない。

   ✅ 正しい使い方:
     <div class="ui-offset ui-offset-lg">   ← background なし（これが .ui-offset）
       <div class="db-card">               ← background: white（白い面）
         content
       </div>
     </div>

   ❌ 間違った使い方:
     <div class="db-card ui-offset ui-offset-lg">  ← background:white のカードに直接つける
       ...
     </div>

   理由: isolation:isolate の stacking context 内で z-index:-1 の ::after は
   要素自身の background より後（前面）に描画される CSS 仕様のため。
   wrapper に background がないことで、白い子カードが ::after の上に来る。

   ロード順: style.css → ui-system.css → admin.css（admin ページのみ）
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────
   Design Tokens
──────────────────────────────────────────────── */
:root {
  --offset-sm: 1px;
  --offset-md: 2px;
  --offset-lg: 3px;
  --struct-line-w: 3px;
  --struct-line-gap: 10px;
}


/* ════════════════════════════════════════════════
   L0: Offset Core
   ─ wrapper div として使う。background は持たせない。
   ─ 子要素（白い面）が ::after brandcolor の上に描画される。
════════════════════════════════════════════════ */
.ui-offset {
  position: relative;
  isolation: isolate;
  /* background は設定しない — 透明のまま */
}

.ui-offset::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-color); /* 完全な色。rgba 不使用 */
  border-radius: inherit;
  z-index: -1;
  transform: translate(
    var(--_ox, var(--offset-md)),
    var(--_oy, var(--offset-md))
  );
}

/* サイズバリアント */
.ui-offset-sm { --_ox: var(--offset-sm); --_oy: var(--offset-sm); }
.ui-offset-md { --_ox: var(--offset-md); --_oy: var(--offset-md); }
.ui-offset-lg { --_ox: var(--offset-lg); --_oy: var(--offset-lg); }

/* ボタン wrapper 用: 裏層を dark に */
.ui-offset-dark::after {
  background: var(--brand-color-dark);
}


/* ════════════════════════════════════════════════
   L0 Interactive: hover で構造が締まる
   ─ 内側のカード（.card, .db-card）の既存 hover を打ち消す
   ─ wrapper の ::after のみ動く
════════════════════════════════════════════════ */
.ui-offset-interactive::after {
  transition: transform 0.10s ease;
}

/* 内側カードの hover 演出を無効化（wrapper の ::after で代替） */
.ui-offset-interactive > .card:hover,
.ui-offset-interactive > .db-card:hover,
.ui-offset-interactive > .cover-card:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}

/* hover: ::after が締まる（構造が近づく） */
.ui-offset-interactive:hover::after {
  transform: translate(
    calc(var(--_ox, var(--offset-md)) - 1px),
    calc(var(--_oy, var(--offset-md)) - 1px)
  );
}

/* active: 構造が密着 */
.ui-offset-interactive:active::after {
  transform: translate(0px, 0px);
}


/* ════════════════════════════════════════════════
   Wrapper 内カードのサイズ調整
   ─ wrapper が grid/flex cell になるとき内側カードが
     wrapper の高さいっぱいに伸びるよう調整
════════════════════════════════════════════════ */
.ui-offset > .card,
.ui-offset > .db-card,
.ui-offset > .cover-card {
  height: 100%;
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════
   L1: Structure Line
   ─ 見出し・区切りに brandcolor 縦帯を配置
   ─ position:sticky の要素には直接使わないこと（relative が sticky を上書きするため）
════════════════════════════════════════════════ */
.ui-struct-line {
  position: relative;
  padding-left: calc(var(--struct-line-w) + var(--struct-line-gap));
}

.ui-struct-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--struct-line-w);
  background: var(--brand-color);
  border-radius: 2px;
}


/* ════════════════════════════════════════════════
   L2 Primary CTA Button
   ─ 主 CTA のみに使う utility class
   ─ 直接セレクタ適用は一旦廃止（wrapper 設計の整理後に再導入）
════════════════════════════════════════════════ */
.ui-btn-primary {
  position: relative;
  isolation: isolate;
}

.ui-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-color-dark);
  border-radius: inherit;
  z-index: -1;
  transform: translate(var(--offset-sm), var(--offset-sm));
  transition: transform 0.08s ease;
}

.ui-btn-primary:active::after {
  transform: translate(0px, 0px);
}


/* ════════════════════════════════════════════════
   Neutral Button
   ─ ナビ・戻る・二次アクション用（brandcolor 不使用）
════════════════════════════════════════════════ */
.ui-btn-neutral {
  background: transparent !important;
  color: #666 !important;
  border: 1.5px solid #ccc !important;
}

.ui-btn-neutral:hover {
  border-color: #999 !important;
  color: #333 !important;
  background: transparent !important;
}


/* ════════════════════════════════════════════════
   Selected State (.ui-selected)
   ─ overflow:hidden を持つカードは overflow:visible に切り替えること
════════════════════════════════════════════════ */
.ui-selected {
  position: relative;
  isolation: isolate;
}

.ui-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-color);
  border-radius: inherit;
  z-index: -1;
  transform: translate(var(--offset-md), var(--offset-md));
}


/* ════════════════════════════════════════════════
   DIRECT ELEMENT OVERRIDES
   ─ 既存 HTML を大量変更せずに直接セレクタで制御
════════════════════════════════════════════════ */

/* ── #back-button: ニュートラル化 ────────────── */
#back-button {
  background: transparent !important;
  color: #666 !important;
  border: 1.5px solid #ccc !important;
}

#back-button:hover {
  border-color: #999 !important;
  color: #333 !important;
  background: transparent !important;
}

/* ── .month-header: border-left → ::before 構造線
   position:sticky を維持したまま構造化
────────────────────────────────────────────── */
.month-header {
  border-left: none !important;
  padding-left: calc(var(--struct-line-w) + var(--struct-line-gap)) !important;
}

.month-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--struct-line-w);
  background: var(--brand-color);
  border-radius: 2px;
}

/* ── .wine-info-display-for-form: border-left を構造化 */
.wine-info-display-for-form {
  border-left: none !important;
  padding-left: calc(5px + 12px) !important;
  position: relative;
}

.wine-info-display-for-form::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--brand-color);
  border-radius: 2px;
}

/* ── .sw-card.selected: rgba tint → outline 構造線
   overflow:hidden 制約により Phase2 で真の Offset 化予定
────────────────────────────────────────────── */
.sw-card.selected {
  box-shadow: none !important;
  outline: 3px solid var(--brand-color);
  outline-offset: -1px;
}