/*
Theme Name: fxcal 
Theme URI: https://example.com/
Author: usagi
Author URI: https://example.com/
Description: A custom theme for managing stores.
Version: 1.0
*/

:root {
  --blue: #063BCA;
  --light-gray: #f5f5f5;
  --border: #e0e0e0;
  --font: "Helvetica Neue", Arial, sans-serif;
}

/* 汎用スタイル */
body {
  font-family: var(--font);
  background: var(--light-gray);
  color: #333;
  margin: 0;
  padding: 16px;
}

h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

.profit {
  color: var(--blue);
}

.loss {
  color: #d40000;
}

.positive {
  color: var(--blue);
}

.negative {
  color: red;
  /*font-weight: bold;*/
}

/* 円グラフ用 */
.chart-container {
  background: #F6F7FA;
  border-radius: 12px;
  padding: 20px;
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: center;
}

#total-revenue {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.chart-container canvas {
  width: 100% !important;
  max-width: 300px;
  margin: 0 auto 20px;
}

.revenue-table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.revenue-table th,
.revenue-table td {
  border: 1px solid var(--border);
  padding: 8px;
  text-align: center;
  word-break: break-word;
}

.revenue-table th {
  background-color: #F0F2F7;
  font-weight: 600;
}

/* カレンダー用 */
.calendar-container {
  background: #F6F7FA;
  border-radius: 16px;
  padding: 20px;
  max-width: 400px;
  margin: 20px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-link {
  color: var(--blue);
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}

.calendar-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0;
}

.calendar-container table {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

th,
td {
  background: #fff;
  border: 1px solid var(--border);
  height: 40px;
  text-align: center;
  vertical-align: middle;
  padding: 4px;
}

.today {
  background-color: #fff3cd !important;
}

#month-total {
  margin: 16px 0;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

.ea-summary {
  margin-top: 24px;
}

.ea-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ea-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px;
}

.ea-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.ea-values {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  flex-wrap: wrap;
}

.ea-values div {
  margin-right: 12px;
  color: #4a4a4a;
}

#trade-details {
  display: none;
  max-width: 400px;
  margin: 20px auto;
  text-align: left;
  font-size: 14px;
}

.trade-item {
  padding: 4px 0;
}

.tag-filter {
  margin: 1em 0;
  text-align: center;
}
.tag-filter select {
  padding: 4px 8px;
  font-size: 14px;
} 


/* レスポンシブ対応 */
@media screen and (max-width: 480px) {
  .chart-container,
  .calendar-container {
    padding: 16px;
  }

  h2,
  .calendar-title {
    font-size: 16px;
  }

  #total-revenue,
  #month-total {
    font-size: 14px;
  }

  .revenue-table,
  table {
    font-size: 12px;
  }

  .revenue-table th,
  .revenue-table td,
  th,
  td {
    padding: 6px;
  }

  canvas {
    max-width: 100%;
  }
}


/* =========================================================
   FXCAL — Chart Index (Accounts) Styles
   口座一覧（チャート・スマホアプリ風）専用CSS
   既存テーマへの影響を避けるため .chart-index 配下にスコープ
   そのまま style.css に追記してください
   ========================================================= */

/* -------- ベース / トークン -------- */
:root{
  --fxc-bg:        #f6f7fa;
  --fxc-card:      #ffffff;
  --fxc-text:      #111827;
  --fxc-muted:     #6b7280;
  --fxc-border:    #e5e7eb;
  --fxc-shadow:    0 6px 20px rgba(0,0,0,.06);
  --fxc-primary:   #0b6dff;
  --fxc-pos:       #0a8f5b;
  --fxc-neg:       #e23546;
  --fxc-chip:      #f1f5f9;
  --fxc-chipText:  #334155;
  --fxc-maxW:      1080px; /* 全体の最大幅（幅感の統一） */
}

.chart-index *{ box-sizing: border-box; }

/* -------- アプリシェル -------- */
.chart-index{
  background: var(--fxc-bg);
  color: var(--fxc-text);
  padding: 16px;
}
.chart-index .app-header,
.chart-index .totals-card,
.chart-index .accounts-list{
  width: 100%;
  max-width: var(--fxc-maxW);
  margin: 0 auto 16px;
}

.chart-index .app-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 12px;
}
.chart-index .app-title{
  font-size: 20px; font-weight: 700; letter-spacing:.02em;
}
.chart-index .app-subtitle{
  font-size: 13px; color: var(--fxc-muted);
}

/* -------- 合計カード -------- */
.chart-index .totals-card{
  background: var(--fxc-card);
  border: 1px solid var(--fxc-border);
  box-shadow: var(--fxc-shadow);
  border-radius: 16px;
  padding: 16px;
}
.chart-index .totals-card__row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px){
  .chart-index .totals-card__row{ grid-template-columns: repeat(3, 1fr); }
}
.chart-index .totals-card__item{ min-width:0; }
.chart-index .totals-card__item .label{
  font-size: 12px; color: var(--fxc-muted); margin-bottom: 4px;
}
.chart-index .totals-card__item .value{
  font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -------- アカウント・グリッド -------- */
/* デフォルトは1列（モバイルファースト） */
.chart-index .accounts-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
/* PCで最大2列。崩れたら狭い方が自動で折り返す */
@media (min-width: 980px){
  .chart-index .accounts-list{ grid-template-columns: repeat(2, minmax(420px, 1fr)); }
}
/* 強制1列ユーティリティ */
.chart-index .accounts-list.one-col{ grid-template-columns: 1fr !important; }

/* -------- アカウントカード -------- */
.chart-index .acc-card{
  position: relative;
  display: block;
  background: var(--fxc-card);
  border: 1px solid var(--fxc-border);
  border-radius: 16px;
  box-shadow: var(--fxc-shadow);
  padding: 16px 48px 16px 16px; /* 右に矢印余白 */
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
  overflow: hidden;               /* 子要素のはみ出し防止 */
  isolation: isolate;             /* 影の重なり安定 */
}
.chart-index .acc-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: #dfe3eb;
}

/* ヘッダー */
.chart-index .acc-card__head{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;                /* 狭幅で折り返し */
}
.chart-index .acc-card__title{
  display:flex; align-items:center; gap: 8px; flex-wrap: wrap;
  min-width:0;                    /* 省略可にするため */
}
.chart-index .acc-card__broker{
  display:inline-block;
  padding: 2px 8px;
  background:#eef4ff;
  color: var(--fxc-primary);
  border-radius: 999px;
  font-size: 12px; font-weight:700;
  flex:0 0 auto;
}
.chart-index .acc-card__accno{
  font-size: 15px; font-weight: 700; letter-spacing:.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-index .acc-card__time{
  font-size: 12px; color: var(--fxc-muted); white-space: nowrap;
  flex:0 0 auto;
}

/* タグ行（プライマリ + 他） */
.chart-index .acc-card__tags{
  display:flex; align-items:center; gap:8px; flex-wrap: wrap;
  margin: 2px 0 10px;
}
.chart-index .tag-chip{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--fxc-chip);
  color: var(--fxc-chipText);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px; line-height:1;
  border: 1px solid #e2e8f0;
  max-width: 100%;
}
.chart-index .tag-chip .tag-label{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
@media (max-width:480px){
  .chart-index .tag-chip .tag-label{ max-width: 140px; }
}
.chart-index .tag-chip--primary{
  background:#e9f3ff;
  border-color:#dbeafe;
  color:#1d4ed8;
  font-weight:700;
}
.chart-index .tag-dot{
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8;
}
.chart-index .tag-more{ position: relative; }
.chart-index .tag-more summary{
  list-style:none; cursor:pointer; outline:none;
}
.chart-index .tag-more summary::-webkit-details-marker{ display:none; }
.chart-index .tag-chip--more{ padding: 4px 10px; }
/* 展開パネル */
.chart-index .tag-more[open] .tag-more__panel{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  background:#fff;
  border:1px solid var(--fxc-border);
  border-radius:12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  padding:10px;
  display:flex; flex-wrap:wrap; gap:8px;
  min-width: 220px;
}

/* メトリクス（4分割） */
.chart-index .acc-card__grid{
  margin-top: 6px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items:start;
}
@media (min-width: 560px){
  .chart-index .acc-card__grid{ grid-template-columns: repeat(4, 1fr); }
}
.chart-index .acc-metric .label{
  font-size: 12px; color: var(--fxc-muted); margin-bottom: 2px;
}
.chart-index .acc-metric .value{
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;      /* 桁ズレ防止 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-index .acc-metric .value.pos{ color: var(--fxc-pos); }
.chart-index .acc-metric .value.neg{ color: var(--fxc-neg); }

/* 右矢印 */
.chart-index .acc-card__chevron{
  position:absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: #94a3b8; pointer-events:none;
}

/* 空状態 */
.chart-index .empty{
  background: var(--fxc-card);
  border: 1px solid var(--fxc-border);
  border-radius: 16px;
  box-shadow: var(--fxc-shadow);
  text-align:center;
  padding: 24px;
  color: var(--fxc-muted);
}

/* -------- 小さなスクリーン調整 -------- */
@media (max-width: 360px){
  .chart-index{ padding: 12px; }
  .chart-index .acc-card{ padding-right: 44px; }
  .chart-index .acc-metric .value{ font-size: 17px; }
}

/* -------- 既存CSSとの衝突回避（保険） -------- */
.chart-index table{ width:100%; border-collapse: collapse; }
.chart-index canvas{ max-width: 100%; height:auto; display:block; }


/* =========================================================
   FXCAL — Account Detail (Chart) Styles
   口座チャート専用CSS（他ページと衝突しないようにスコープ）
   ========================================================= */

.chart-account *{ box-sizing: border-box; }

/* ---- Page width / container ---- */
.chart-account{
  background:#f6f7fa;
  color:#111827;
  padding:16px;
}
.chart-account .card,
.chart-account .section{
  max-width: 1080px;
  margin: 0 auto 16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:16px;
}

/* ---- Headings & small text ---- */
.chart-account h2{
  margin:0 0 6px 0;
  font-size:20px;
  letter-spacing:.02em;
}
.chart-account h3{
  margin:0 0 12px 0;
  font-size:18px;
}
.chart-account .muted{
  color:#6b7280;
  font-size:12px;
}

/* ---- KPI row ---- */
.chart-account .grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-top:12px;
}
@media (max-width: 640px){
  .chart-account .grid3{ grid-template-columns: 1fr; }
}
.chart-account .kpi{
  font-size:13px;
  color:#6b7280;
}
.chart-account .kpi strong{
  display:block;
  margin-top:2px;
  font-size:28px;
  line-height:1.1;
  color:#111827;
}
.chart-account .kpi.blue strong{ color:#0b6dff; }
.chart-account .kpi.right{ text-align:right; }

/* ---- Thin divider ---- */
.chart-account .hr-thin{
  border:none;
  border-top:1px solid #eef2f7;
  margin:14px 0;
}

/* ---- Info rows (rate, 前日比など) ---- */
.chart-account .info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.chart-account .info-label{
  font-size:13px;
  color:#6b7280;
}
.chart-account .info-value{
  font-size:16px;
  font-weight:700;
}
.chart-account .delta.green{ color:#0a8f5b; }
.chart-account .delta.red{ color:#e23546; }

/* ---- Chart area ---- */
.chart-account .chart-wrap{
  position:relative;
  width:100%;
  height:360px;           /* CSS優先の高さ */
}
@media (max-width:640px){
  .chart-account .chart-wrap{ height:300px; }
}
.chart-account .chart-wrap canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* ---- Table (daily snapshot) ---- */
.chart-account table.snap{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size:14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden; /* 角丸を効かせるための親でラップしていない場合の保険 */
}
.chart-account table.snap thead th{
  background:#f3f4f6;
  color:#374151;
  font-weight:600;
  text-align:right;
  padding:10px;
  border-bottom:1px solid #e5e7eb;
}
.chart-account table.snap thead th:first-child,
.chart-account table.snap tbody td:first-child{
  text-align:left;
}
.chart-account table.snap tbody td{
  padding:10px;
  border-bottom:1px solid #eef2f7;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chart-account table.snap tbody tr:last-child td{
  border-bottom:none;
}
/* 交互背景で可読性UP */
.chart-account table.snap tbody tr:nth-child(odd){
  background:#fafafa;
}

/* 金額の色分け（必要時に利用） */
.chart-account .green{ color:#0a8f5b; font-weight:700; }
.chart-account .red{ color:#e23546; font-weight:700; }

/* ---- Small screens tweaks ---- */
@media (max-width: 480px){
  .chart-account{ padding:12px; }
  .chart-account .card,
  .chart-account .section{ padding:14px; border-radius:14px; }

  .chart-account h2{ font-size:18px; }
  .chart-account h3{ font-size:16px; }
  .chart-account .kpi strong{ font-size:24px; }

  .chart-account table.snap{ font-size:13px; }
  .chart-account table.snap thead th,
  .chart-account table.snap tbody td{ padding:8px; }
}

/* ---- Safety overrides（他ページの canvas / table 汎用指定の影響を防ぐ） ---- */
.chart-account canvas{ max-width:100%; height:auto; display:block; }
.chart-account table{ max-width:none; margin:0; }

/* ----- 口座チャート: ROI 表示用 ----- */
.chart-account .info-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 6px 0;
}
.chart-account .info-label{ color:#6b7280; font-size:14px; }
.chart-account .info-value{ font-weight:600; font-size:16px; }

.chart-account .roi-chip{
  display:inline-flex; align-items:baseline; gap:.5em;
  padding:6px 10px; border-radius:999px;
  font-weight:700; font-size:14px;
  background:#eef7ff; color:#0b6dff; border:1px solid #dbeafe;
}
.chart-account .roi-chip.pos{ background:#ecfdf5; color:#0a8f5b; border-color:#bbf7d0; }
.chart-account .roi-chip.neg{ background:#fff1f2; color:#e23546; border-color:#fecdd3; }
.chart-account .roi-chip__sub{ font-weight:600; opacity:.85; }
.chart-account .delta.green{ color:#0a8f5b; font-weight:700; }
.chart-account .delta.red{   color:#e23546; font-weight:700; }

/* 既存カードの横幅いっぱいに見せるための保険 */
.chart-account .card.card--full,
.chart-account .section.section--full{ max-width:1000px; margin:16px auto; }

/* 入出金履歴テーブル */
.table-cf {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

/* スマホ対応（横スクロール） */
.table-cf-wrapper {
  width: 100%;
  overflow-x: auto;
}
.table-cf th,
.table-cf td {
  white-space: nowrap;
}

/* ヘッダー */
.table-cf thead th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* セル */
.table-cf tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
}
.table-cf tbody tr:nth-child(even) {
  background: #fafafa;
}

/* 金額右寄せ */
.table-cf td:nth-child(3) {
  text-align: right;
}

/* バッジ（chip） - アウトライン＆背景色淡め */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.chip.dep {
  color: #16a34a; /* 緑文字 */
  border-color: #bbf7d0; /* 緑薄枠 */
  background-color: #f0fdf4; /* 緑薄背景 */
}
.chip.wdr {
  color: #dc2626;
  border-color: #fecaca;
  background-color: #fef2f2;
}
.chip.fee {
  color: #6b7280;
  border-color: #e5e7eb;
  background-color: #f9fafb;
}
.chip.bns {
  color: #d97706;
  border-color: #fde68a;
  background-color: #fffbeb;
}

/* =========================================================
   口座チャート: ブローカー名バッジ + タグUI（共通クラス名を採用）
   - クラス名: tag-chip / tag-chip--primary / tag-dot / tag-more …
   - 影響範囲を .chart-account 配下に限定
   ========================================================= */

/* ヘッダー行（口座番号の下にメタ列：ブローカー + タグ） */
.chart-account .acc-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:6px; flex-wrap:wrap;
}
.chart-account .acc-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;
}

/* ブローカーバッジ（小さめの丸 pill） */
.chart-account .acc-broker{
  display:inline-block;
  padding: 3px 10px;
  background:#eef4ff;
  color:#0b6dff;
  border:1px solid #dbeafe;
  border-radius:999px;
  font-size:12px; font-weight:700; line-height:1;
  white-space:nowrap;
}

/* タグリスト（同じクラス名を採用） */
.chart-account .acc-card__tags{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* ---- tag-chip （共通）---- */
.chart-account .tag-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#f1f5f9;            /* = slate-100 */
  color:#334155;                  /* = slate-700 */
  border-radius:999px;
  padding:4px 10px;
  font-size:12px; line-height:1;
  border:1px solid #e2e8f0;       /* = slate-200 */
  max-width:100%;
}
.chart-account .tag-chip .tag-label{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:220px;
}
@media (max-width:480px){
  .chart-account .tag-chip .tag-label{ max-width:140px; }
}

/* プライマリタグを強調 */
.chart-account .tag-chip--primary{
  background:#e9f3ff;
  border-color:#dbeafe;
  color:#1d4ed8;
  font-weight:700;
}

/* ドット色はインラインstyleで可変。サイズだけ規定 */
.chart-account .tag-dot{
  width:8px; height:8px; border-radius:50%;
  background:#94a3b8;
}

/* +N 展開（details/summary） */
.chart-account .tag-more{ position:relative; }
.chart-account .tag-more summary{
  list-style:none; cursor:pointer; outline:none;
}
.chart-account .tag-more summary::-webkit-details-marker{ display:none; }
.chart-account .tag-chip--more{ padding:4px 10px; }

/* 展開パネル（オーバーレイ） */
.chart-account .tag-more[open] .tag-more__panel{
  position:absolute;
  top: calc(100% + 6px);
  left:0;
  z-index:15;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  padding:10px;
  display:flex; flex-wrap:wrap; gap:8px;
  min-width:220px;
}

/* --- スマホ最適化（ヘッダーが詰まる場合の折返し間隔調整） --- */
@media (max-width: 480px){
  .chart-account .acc-head{ gap:8px; }
  .chart-account .acc-broker{ font-size:11px; padding:3px 8px; }
}

/* =========================================================
   入出金テーブルの金額色（任意）
   ※ 正負で色付けしたくなった場合に使用
   ========================================================= */
.chart-account .amt-pos{ color:#0a8f5b; font-weight:700; }
.chart-account .amt-neg{ color:#e23546; font-weight:700; }