/* 
保存ディレクトリ: ./wp-content/plugins/dddb-dashboard/assets/
ファイル名: dddb-dashboard.css
ファイル役割: DDDB Dashboard（スクリーナー/ランキング/銘柄ページ）共通スタイル
作成日: 2025-12-22
最終更新: 2026-01-13
説明: Cocoon等のテーマに馴染む「中立で読みやすい」ベースにしつつ、要所だけ印象に残るコントラストを付ける。ライトモードのみ対応。
*/

:root{
  --dddb-bg: #ffffff;
  --dddb-ink: #0b1220;
  --dddb-muted: #5a667a;
  --dddb-line: rgba(11, 18, 32, .10);
  --dddb-soft: rgba(11, 18, 32, .04);
  --dddb-accent: #0073aa;
  --dddb-accent-ink: #ffffff;
  --dddb-badge-bg: #eef2ff;
  --dddb-badge-ink: #3730a3;
  --dddb-kpi-a: #0b1220;
  --dddb-kpi-b: #1f2a44;
  --dddb-radius: 14px;
}

.dddb-app {max-width: 1100px; margin: 0 auto; padding: 16px;}
.dddb-panel {background:var(--dddb-bg); border:1px solid var(--dddb-line); border-radius:var(--dddb-radius); padding:14px; margin-bottom:12px;}
.dddb-row {display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.dddb-row input, .dddb-row select {padding:10px; border-radius:12px; border:1px solid var(--dddb-line); background:var(--dddb-bg); color:var(--dddb-ink);}
.dddb-row input::placeholder {color: rgba(90, 102, 122, .85);}

.dddb-btn {padding:10px 12px; border-radius:12px; background:var(--dddb-accent); color:var(--dddb-accent-ink); border:none; cursor:pointer; font-weight:700;}
.dddb-btn:hover {filter: brightness(.95);}
.dddb-btn:disabled {opacity:.5; cursor:not-allowed;}
.dddb-btn-ghost {background: transparent; color: var(--dddb-accent); border:1px solid rgba(0,115,170,.35);}
.dddb-btn-ghost:hover {background: rgba(0,115,170,.06);}

.dddb-table {width:100%; border-collapse:collapse;}
.dddb-table th, .dddb-table td {border-bottom:1px solid rgba(11,18,32,.08); padding:10px; text-align:left; vertical-align: top;}
.dddb-table th {background:var(--dddb-soft); font-weight:800;}
.dddb-muted {color:var(--dddb-muted); font-size:12px;}
.dddb-badge {display:inline-block; padding:2px 8px; border-radius:999px; background:var(--dddb-badge-bg); color:var(--dddb-badge-ink); font-size:12px; border:1px solid rgba(55,48,163,.18);}

.dddb-pager {display:flex; gap:10px; align-items:center; margin: 8px 0 12px;}
.dddb-sub-link {font-size: 12px; color: var(--dddb-muted); margin-left: 6px;}
.dddb-sub-link a {color: var(--dddb-accent); text-decoration: none;}
.dddb-sub-link a:hover {text-decoration: underline;}

/* stock page */
.dddb-stock {max-width: 1100px; margin: 0 auto; padding: 16px;}
.dddb-grid {display: grid; grid-template-columns: 1fr; gap: 12px;}
.dddb-card {background:var(--dddb-bg); border:1px solid var(--dddb-line); border-radius:var(--dddb-radius); padding: 14px;}
.dddb-stock-title {margin: 0 0 10px 0; font-size: 18px; letter-spacing:.02em;}
.dddb-meta {display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px;}
.dddb-meta .item {background:var(--dddb-soft); border-radius:12px; padding:10px; border:1px solid rgba(11,18,32,.06);}
.dddb-meta .label {font-size: 12px; color:var(--dddb-muted); margin-bottom:4px;}
.dddb-meta .value {font-size: 14px; color:var(--dddb-ink); font-weight: 800;}

.dddb-kpis {display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px;}
.dddb-kpi {background: linear-gradient(135deg, var(--dddb-kpi-a), var(--dddb-kpi-b)); color:#fff; border-radius:var(--dddb-radius); padding:12px; border:1px solid rgba(255,255,255,.08);}

/* panel head */
.dddb-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 0 0 10px;}
.dddb-panel-title{font-weight:900; color:var(--dddb-ink); font-size:14px; letter-spacing:.02em;}
.dddb-kpi .label {font-size: 12px; opacity:.85;}
.dddb-kpi .value {font-size: 20px; font-weight: 900; margin-top:6px;}
.dddb-sub {color:var(--dddb-muted); font-size: 12px; margin-top:6px;}
.dddb-actions a.dddb-btn-link {display:inline-block; padding:10px 12px; border-radius:12px; background:var(--dddb-accent); color:var(--dddb-accent-ink); text-decoration:none; font-weight:800;}
.dddb-actions a.dddb-btn-link:hover {filter: brightness(.95);}

/* ============================================
   Buffett-code style dashboard
   ============================================ */

/* Stock header */
.dddb-stock-header {
  margin-bottom: 16px;
}
.dddb-stock-name {
  font-size: 24px;
  font-weight: 900;
  color: var(--dddb-ink);
  margin: 0 0 8px 0;
  letter-spacing: .01em;
}
.dddb-stock-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tabs */
.dddb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--dddb-line);
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dddb-tabs::-webkit-scrollbar {
  height: 0;
}
.dddb-tab {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dddb-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dddb-tab:hover {
  color: var(--dddb-ink);
}
.dddb-tab.active {
  color: var(--dddb-accent);
  border-bottom-color: var(--dddb-accent);
}

/* Tab panels */
.dddb-tab-panel {
  display: none;
}
.dddb-tab-panel.active {
  display: block;
}

/* Section card (Buffett-code style) */
.dddb-section {
  background: var(--dddb-bg);
  border: 1px solid var(--dddb-line);
  border-radius: var(--dddb-radius);
  overflow: hidden;
  margin-bottom: 14px;
}
.dddb-section-header {
  background: linear-gradient(135deg, var(--dddb-kpi-a), var(--dddb-kpi-b));
  color: #fff;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dddb-section-header .icon {
  font-size: 16px;
  opacity: .9;
}

/* Data list (label-value pairs) */
.dddb-data-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dddb-data-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dddb-line);
}
.dddb-data-list li:last-child {
  border-bottom: none;
}
.dddb-data-list .label {
  color: var(--dddb-muted);
  font-size: 13px;
}
.dddb-data-list .value {
  color: var(--dddb-ink);
  font-size: 17px;
  font-weight: 700;
}
.dddb-data-list .unit {
  color: var(--dddb-muted);
  font-size: 12px;
  margin-left: 2px;
}

/* Metrics grid (2-column) */
.dddb-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dddb-metrics-grid .metric {
  padding: 16px;
  border-bottom: 1px solid var(--dddb-line);
  border-right: 1px solid var(--dddb-line);
}
.dddb-metrics-grid .metric:nth-child(2n) {
  border-right: none;
}
.dddb-metrics-grid .metric:nth-last-child(-n+2) {
  border-bottom: none;
}
.dddb-metrics-grid .metric:only-child,
.dddb-metrics-grid .metric:nth-last-child(1):nth-child(odd) {
  border-bottom: none;
  grid-column: span 2;
}
.dddb-metrics-grid .metric .label {
  color: var(--dddb-muted);
  font-size: 12px;
  margin-bottom: 6px;
}
.dddb-metrics-grid .metric .value {
  color: var(--dddb-ink);
  font-size: 22px;
  font-weight: 900;
}
.dddb-metrics-grid .metric .unit {
  color: var(--dddb-muted);
  font-size: 13px;
  margin-left: 2px;
}

/* Link section */
.dddb-link-list {
  padding: 16px;
}
.dddb-link-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--dddb-accent);
  color: var(--dddb-accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: filter .15s;
}
.dddb-link-list a:hover {
  filter: brightness(.92);
}
.dddb-link-list .dddb-sub {
  margin-top: 10px;
}

/* No data placeholder */
.dddb-no-data {
  padding: 20px 16px;
  text-align: center;
  color: var(--dddb-muted);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 600px) {
  .dddb-stock-name {
    font-size: 20px;
  }
  .dddb-tab {
    padding: 10px 14px;
    font-size: 12px;
  }
  .dddb-metrics-grid {
    grid-template-columns: 1fr;
  }
  .dddb-metrics-grid .metric {
    border-right: none;
  }
  .dddb-metrics-grid .metric:nth-last-child(1) {
    border-bottom: none;
  }
  .dddb-metrics-grid .metric:only-child,
  .dddb-metrics-grid .metric:nth-last-child(1):nth-child(odd) {
    grid-column: span 1;
  }
  .dddb-data-list .value {
    font-size: 15px;
  }
  .dddb-metrics-grid .metric .value {
    font-size: 18px;
  }
}