/* ===================================================================
   Material 3 Expressive — 共通デザイントークン & コンポーネント
   dashboard と kakeibo の両方から読み込む共通レイヤー。

   使い方：既存の style.css より «前» に読み込む。
     <link rel="stylesheet" href="/assets/css/m3e.css">
     <link rel="stylesheet" href="style.css">

   既存の変数（--primary / --card / --bg など）もこの中で
   M3E のカラーロールに再マッピングしているため、
   既存のマークアップを書き換えなくても配色が新しくなる。
   =================================================================== */

:root{
  /* ── M3E カラーロール（ライト） ───────────────────────────
     Primary は既存アプリの緑を M3 トーナルパレット化したもの      */
  --m3-primary:              #29675a;
  --m3-on-primary:           #ffffff;
  --m3-primary-container:    #b0f1de;
  --m3-on-primary-container: #00201a;

  --m3-secondary:              #4b635c;
  --m3-on-secondary:           #ffffff;
  --m3-secondary-container:    #cde8de;
  --m3-on-secondary-container: #072019;

  /* Tertiary＝アクセント（金額の強調・目標など） */
  --m3-tertiary:              #8a5320;
  --m3-on-tertiary:           #ffffff;
  --m3-tertiary-container:    #ffdcbe;
  --m3-on-tertiary-container: #2e1500;

  --m3-error:              #ba1a1a;
  --m3-on-error:           #ffffff;
  --m3-error-container:    #ffdad6;
  --m3-on-error-container: #410002;

  --m3-success:           #3a6a3a;
  --m3-success-container: #c8ecc4;

  /* サーフェス階調（M3E の肝。影ではなく色の重なりで階層を出す） */
  --m3-surface:                    #f5fbf7;
  --m3-surface-dim:                #d5dbd6;
  --m3-surface-bright:             #f5fbf7;
  --m3-surface-container-lowest:   #ffffff;
  --m3-surface-container-low:      #eff5f1;
  --m3-surface-container:          #e9efeb;
  --m3-surface-container-high:     #e3eae6;
  --m3-surface-container-highest:  #dee4e0;
  --m3-on-surface:                 #171d1b;
  --m3-on-surface-variant:         #3f4945;
  --m3-outline:                    #6f7975;
  --m3-outline-variant:            #bfc9c4;
  --m3-inverse-surface:            #2b322f;
  --m3-inverse-on-surface:         #ecf2ee;
  --m3-scrim:                      rgba(0,0,0,.32);

  /* ── シェイプスケール（M3E は角丸が大きい） ───────────── */
  --m3-shape-xs:   4px;
  --m3-shape-sm:   8px;
  --m3-shape-md:  12px;
  --m3-shape-lg:  16px;
  --m3-shape-xl:  28px;
  --m3-shape-full:999px;

  /* ── エレベーション ─────────────────────────────────── */
  --m3-elev-0: none;
  --m3-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
  --m3-elev-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
  --m3-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30);

  /* ── モーション（Expressive のばね感） ──────────────── */
  --m3-motion-standard: cubic-bezier(.2,0,0,1);
  --m3-motion-spring:   cubic-bezier(.34,1.56,.64,1);
  --m3-dur-short:  150ms;
  --m3-dur-medium: 260ms;

  /* ── 既存変数の再マッピング（マークアップ側は無変更でOK） ── */
  --bg:            var(--m3-surface);
  --card:          var(--m3-surface-container-lowest);
  --surface:       var(--m3-surface-container-low);
  --ink:           var(--m3-on-surface);
  --text:          var(--m3-on-surface);
  --muted:         var(--m3-on-surface-variant);
  --border:        var(--m3-outline-variant);
  --primary:       var(--m3-primary);
  --primary-d:     var(--m3-on-primary-container);
  --primary-dark:  var(--m3-on-primary-container);
  --primary-light: var(--m3-primary-container);
  --accent:        var(--m3-tertiary);
  --accent-light:  var(--m3-tertiary-container);
  --danger:        var(--m3-error);
  --danger-light:  var(--m3-error-container);
  --success:       var(--m3-success);
  --warning:       var(--m3-tertiary);
  --blue:          var(--m3-secondary);
  --blue-light:    var(--m3-secondary-container);
  --radius:        var(--m3-shape-lg);
  --shadow:        var(--m3-elev-1);
  --shadow-md:     var(--m3-elev-2);
  --shadow-lg:     var(--m3-elev-3);
}

/* ── ダークテーマ ──────────────────────────────────────── */
[data-theme="dark"]{
  --m3-primary:              #94d5c2;
  --m3-on-primary:           #00382e;
  --m3-primary-container:    #005143;
  --m3-on-primary-container: #b0f1de;

  --m3-secondary:              #b2ccc2;
  --m3-on-secondary:           #1d352e;
  --m3-secondary-container:    #344c44;
  --m3-on-secondary-container: #cde8de;

  --m3-tertiary:              #ffb877;
  --m3-on-tertiary:           #4a2800;
  --m3-tertiary-container:    #6a3c00;
  --m3-on-tertiary-container: #ffdcbe;

  --m3-error:              #ffb4ab;
  --m3-on-error:           #690005;
  --m3-error-container:    #93000a;
  --m3-on-error-container: #ffdad6;

  --m3-success:           #9fd49b;
  --m3-success-container: #23511f;

  --m3-surface:                    #0e1513;
  --m3-surface-dim:                #0e1513;
  --m3-surface-bright:             #343b38;
  --m3-surface-container-lowest:   #090f0e;
  --m3-surface-container-low:      #171d1b;
  --m3-surface-container:          #1b211f;
  --m3-surface-container-high:     #252b29;
  --m3-surface-container-highest:  #303634;
  --m3-on-surface:                 #dee4e0;
  --m3-on-surface-variant:         #bfc9c4;
  --m3-outline:                    #89938f;
  --m3-outline-variant:            #3f4945;
  --m3-inverse-surface:            #dee4e0;
  --m3-inverse-on-surface:         #2b322f;
  --m3-scrim:                      rgba(0,0,0,.6);

  --m3-elev-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
  --m3-elev-2: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.3);
  --m3-elev-3: 0 4px 8px 3px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.5);
}

/* ===================================================================
   M3 スイッチ
   <label class="m3-switch">
     <input type="checkbox" id="...">
     <span class="m3-switch__track"></span>
     <span class="m3-switch__label">ラベル</span>
   </label>
   =================================================================== */
.m3-switch{
  display:inline-flex;align-items:center;gap:12px;
  cursor:pointer;user-select:none;
  font-size:.9rem;font-weight:500;color:var(--m3-on-surface);
  padding:4px 0;
}
/* 実体のcheckboxは視覚的に隠すが、キーボード操作は生かす */
.m3-switch > input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;margin:0;
  pointer-events:none;
}
.m3-switch__track{
  position:relative;flex-shrink:0;
  width:52px;height:32px;border-radius:var(--m3-shape-full);
  background:var(--m3-surface-container-highest);
  border:2px solid var(--m3-outline);
  transition:background var(--m3-dur-short) var(--m3-motion-standard),
             border-color var(--m3-dur-short) var(--m3-motion-standard);
}
/* つまみ。OFF時は小さく、ON時は大きくなる（M3の挙動） */
.m3-switch__track::after{
  content:'';position:absolute;
  top:50%;left:6px;transform:translateY(-50%);
  width:16px;height:16px;border-radius:var(--m3-shape-full);
  background:var(--m3-outline);
  transition:left    var(--m3-dur-medium) var(--m3-motion-spring),
             width   var(--m3-dur-short)  var(--m3-motion-standard),
             height  var(--m3-dur-short)  var(--m3-motion-standard),
             background var(--m3-dur-short) var(--m3-motion-standard);
}
.m3-switch > input:checked + .m3-switch__track{
  background:var(--m3-primary);
  border-color:var(--m3-primary);
}
.m3-switch > input:checked + .m3-switch__track::after{
  left:26px;width:24px;height:24px;
  background:var(--m3-on-primary);
}
/* フォーカスリング（キーボード操作時） */
.m3-switch > input:focus-visible + .m3-switch__track{
  outline:3px solid var(--m3-secondary);outline-offset:2px;
}
.m3-switch:hover .m3-switch__track::after{ box-shadow:0 0 0 8px rgba(41,103,90,.10); }
.m3-switch > input:disabled + .m3-switch__track{ opacity:.38;cursor:not-allowed; }
.m3-switch__label{ line-height:1.4; }
.m3-switch__label small{
  display:block;font-size:.74rem;font-weight:400;
  color:var(--m3-on-surface-variant);margin-top:1px;
}

/* ===================================================================
   M3 チェックボックス
   <label class="m3-check">
     <input type="checkbox"><span class="m3-check__box"></span>
     <span class="m3-check__label">ラベル</span>
   </label>
   =================================================================== */
.m3-check{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;
  font-size:.9rem;font-weight:500;color:var(--m3-on-surface);
  padding:4px 0;
}
.m3-check > input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;
}
.m3-check__box{
  position:relative;flex-shrink:0;
  width:20px;height:20px;border-radius:var(--m3-shape-xs);
  border:2px solid var(--m3-on-surface-variant);
  background:transparent;
  transition:background var(--m3-dur-short) var(--m3-motion-standard),
             border-color var(--m3-dur-short) var(--m3-motion-standard);
}
/* チェックマーク */
.m3-check__box::after{
  content:'';position:absolute;
  left:5px;top:1px;width:5px;height:10px;
  border:solid var(--m3-on-primary);
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);
  transform-origin:center;
  transition:transform var(--m3-dur-short) var(--m3-motion-spring);
}
.m3-check > input:checked + .m3-check__box{
  background:var(--m3-primary);border-color:var(--m3-primary);
}
.m3-check > input:checked + .m3-check__box::after{ transform:rotate(45deg) scale(1); }
.m3-check > input:focus-visible + .m3-check__box{
  outline:3px solid var(--m3-secondary);outline-offset:3px;
}
.m3-check:hover .m3-check__box{ box-shadow:0 0 0 8px rgba(41,103,90,.08); }
.m3-check > input:disabled + .m3-check__box{ opacity:.38;cursor:not-allowed; }

/* ===================================================================
   M3 フィルターチップ（.pill-toggle の置き換え）
   =================================================================== */
.m3-chipset{ display:flex;flex-wrap:wrap;gap:8px; }
.m3-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 16px;
  border-radius:var(--m3-shape-sm);
  border:1px solid var(--m3-outline);
  background:transparent;
  color:var(--m3-on-surface-variant);
  font-size:.8rem;font-weight:600;white-space:nowrap;
  cursor:pointer;
  transition:background var(--m3-dur-short) var(--m3-motion-standard),
             color      var(--m3-dur-short) var(--m3-motion-standard),
             border-radius var(--m3-dur-medium) var(--m3-motion-spring);
}
.m3-chip:hover{ background:var(--m3-surface-container-high); }
.m3-chip.active,.m3-chip[aria-selected="true"]{
  background:var(--m3-secondary-container);
  color:var(--m3-on-secondary-container);
  border-color:transparent;
  border-radius:var(--m3-shape-full);   /* 選択時に丸くなる＝Expressive */
}
.m3-chip.active::before{
  content:'✓';font-size:.85em;font-weight:800;
}

/* ===================================================================
   既存コンポーネントの M3E 化（マークアップ変更なしで効く）
   =================================================================== */

/* --- ボタン --- */
.btn{
  border-radius:var(--m3-shape-full) !important;
  font-weight:600;
  letter-spacing:.01em;
  transition:box-shadow var(--m3-dur-short) var(--m3-motion-standard),
             filter     var(--m3-dur-short) var(--m3-motion-standard),
             transform  var(--m3-dur-short) var(--m3-motion-spring);
}
.btn-primary{ background:var(--m3-primary);color:var(--m3-on-primary);box-shadow:var(--m3-elev-0); }
.btn-primary:hover{ box-shadow:var(--m3-elev-1);filter:none;background:var(--m3-primary); }
.btn-secondary{
  background:var(--m3-secondary-container);color:var(--m3-on-secondary-container);
  border-color:transparent;
}
.btn-secondary:hover{ box-shadow:var(--m3-elev-1); }
.btn-danger{ background:var(--m3-error-container);color:var(--m3-on-error-container);border-color:transparent; }
.btn-ghost{ background:transparent;color:var(--m3-primary);border:1px solid var(--m3-outline); }
.btn:active{ transform:scale(.97); }

/* --- カード：影ではなくトーナルサーフェスで階層を出す --- */
.card{
  border-radius:var(--m3-shape-lg);
  background:var(--m3-surface-container-lowest);
  border:1px solid var(--m3-outline-variant);
  box-shadow:var(--m3-elev-0);
}

/* --- 入力欄 --- */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea{
  border-radius:var(--m3-shape-sm);
  background:var(--m3-surface-container-low);
  border:1px solid var(--m3-outline);
  transition:border-color var(--m3-dur-short) var(--m3-motion-standard),
             box-shadow   var(--m3-dur-short) var(--m3-motion-standard);
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--m3-primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m3-primary) 22%,transparent);
}
.field label{ color:var(--m3-on-surface-variant);font-weight:600; }

/* --- バッジ／チップ表現 --- */
.badge{
  border-radius:var(--m3-shape-full);
  font-weight:600;letter-spacing:.01em;
}

/* --- サマリーストリップ：トーナルカード化 --- */
.summary-strip .item{
  background:var(--m3-surface-container-low);
  border:1px solid var(--m3-outline-variant);
  border-radius:var(--m3-shape-md);
}

/* --- プログレス --- */
.progress{
  border-radius:var(--m3-shape-full);
  background:var(--m3-surface-container-highest);
  overflow:hidden;
}
.progress > div{
  background:var(--m3-primary);
  border-radius:var(--m3-shape-full);
  transition:width var(--m3-dur-medium) var(--m3-motion-standard);
}
.progress.over > div{ background:var(--m3-error); }

/* --- モーダル：M3 ダイアログ --- */
.modal{
  border-radius:var(--m3-shape-xl);
  background:var(--m3-surface-container-high);
  box-shadow:var(--m3-elev-3);
}
.modal-overlay{ background:var(--m3-scrim); }

/* --- テーブル --- */
th{ color:var(--m3-on-surface-variant); }
tbody tr:hover{ background:var(--m3-surface-container-low); }

/* --- callout --- */
.callout{ border-radius:var(--m3-shape-md);background:var(--m3-primary-container);border-left-color:var(--m3-primary);color:var(--m3-on-primary-container); }
.callout.accent{ background:var(--m3-tertiary-container);border-left-color:var(--m3-tertiary);color:var(--m3-on-tertiary-container); }
.callout.warn{ background:var(--m3-error-container);border-left-color:var(--m3-error);color:var(--m3-on-error-container); }

/* ===================================================================
   my-dashboard 固有コンポーネントの M3E 化
   （style.css より前に読むため、!important で意図的に上書きする）
   =================================================================== */

/* ウィジェット＝M3 のトーナルカード。影を落とさず色で階層を出す */
.widget{
  border-radius:var(--m3-shape-lg) !important;
  background:var(--m3-surface-container-low) !important;
  border:1px solid var(--m3-outline-variant) !important;
  box-shadow:var(--m3-elev-0) !important;
  transition:background var(--m3-dur-short) var(--m3-motion-standard),
             box-shadow var(--m3-dur-short) var(--m3-motion-standard);
}
.widget:hover{ background:var(--m3-surface-container) !important; }
.widget-header{ border-bottom-color:var(--m3-outline-variant) !important; }
.widget-title{ color:var(--m3-on-surface) !important;letter-spacing:.01em; }
.widget-footer{ border-top-color:var(--m3-outline-variant) !important; }

/* ウィジェット操作ボタン＝M3 アイコンボタン（丸） */
.wc-btn{
  border-radius:var(--m3-shape-full) !important;
  color:var(--m3-on-surface-variant) !important;
  transition:background var(--m3-dur-short) var(--m3-motion-standard);
}
.wc-btn:hover{ background:var(--m3-surface-container-highest) !important; }

/* トップバー */
.top-bar{
  background:var(--m3-surface-container) !important;
  border-bottom:1px solid var(--m3-outline-variant) !important;
  box-shadow:var(--m3-elev-0) !important;
}

/* モーダル＝M3 ダイアログ */
.modal-content{
  border-radius:var(--m3-shape-xl) !important;
  background:var(--m3-surface-container-high) !important;
  box-shadow:var(--m3-elev-3) !important;
}
.modal-overlay{ background:var(--m3-scrim) !important; }

/* 認証カード */
.auth-card{
  border-radius:var(--m3-shape-xl) !important;
  background:var(--m3-surface-container-low) !important;
  box-shadow:var(--m3-elev-2) !important;
}
/* ログイン背景：M3E らしいトーナルグラデーション */
.auth-page{
  background:linear-gradient(160deg,
    var(--m3-primary-container) 0%,
    var(--m3-surface) 55%,
    var(--m3-tertiary-container) 100%) !important;
}

/* 非表示ウィジェットの復元バー */
.restore-btn{
  border-radius:var(--m3-shape-full) !important;
  background:var(--m3-secondary-container) !important;
  color:var(--m3-on-secondary-container) !important;
  border:none !important;
}
.hidden-widget-bar{ background:var(--m3-surface-container) !important; }

/* メニューカード等の小カード */
.menu-card{
  border-radius:var(--m3-shape-md) !important;
  background:var(--m3-surface-container) !important;
}

/* 時計サイズ切替＝小さなチップ */
.clock-size-btn{
  border-radius:var(--m3-shape-full) !important;
  border-color:var(--m3-outline) !important;
  color:var(--m3-on-surface-variant) !important;
}
.clock-size-btn:hover{ background:var(--m3-surface-container-high) !important; }

/* フォーム入力（dashboard 側は .form-group input） */
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea{
  border-radius:var(--m3-shape-sm) !important;
  background:var(--m3-surface-container-lowest) !important;
  border:1px solid var(--m3-outline) !important;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none !important;
  border-color:var(--m3-primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--m3-primary) 22%,transparent) !important;
}

/* 設定バナー */
.sheet-config-banner{
  background:var(--m3-tertiary-container) !important;
  border-bottom-color:var(--m3-tertiary) !important;
  color:var(--m3-on-tertiary-container) !important;
}

/* --- アニメーションを抑える設定の尊重 --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}