/* 朝日工業BI Webアプリ PoC - 共通スタイル */
:root{
  --c1:#118DFF; --c2:#12239E; --c3:#E66C37; --c4:#6B007B;
  --c5:#E044A7; --c6:#744EC2; --c7:#D9B300; --c8:#D64550;
  --fg:#252423; --bg:#FFFFFF; --dark:#2C323C;
  --good:#1AAB40; --bad:#D64554;
  --grid:#E1E1E1; --axis:#605E5C;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Segoe UI','Yu Gothic UI',Meiryo,sans-serif;
  color:var(--fg);
  background:#F3F2F1;
}

/* ---- nav ---- */
.pbi-nav{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  background:var(--dark);
  position:sticky;
  top:0;
  z-index:100;
}
.pbi-tab{
  color:#FFFFFF;
  text-decoration:none;
  font-size:13px;
  padding:12px 16px;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  opacity:.8;
}
.pbi-tab:hover{ opacity:1; background:rgba(255,255,255,.08); }
.pbi-tab.active{
  opacity:1;
  background:#3A4150;
  border-bottom-color:var(--c1);
  font-weight:600;
}

/* ---- canvas scaling ---- */
.canvas-wrap{ position:relative; width:100%; overflow:hidden; background:#FFFFFF; }
.canvas{
  position:relative;
  width:1920px;
  background:#FFFFFF;
  transform-origin:top left;
}

/* ---- visual containers ---- */
.v{ position:absolute; }
.v-card{
  width:100%; height:100%;
  background:var(--bg);
  border:1px solid #E1E1E1;
  border-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* ビジュアルの配置先（id付きdiv）に高さが無いと、charts.js の size() が
   既定の160pxで描いてしまい、カードのラベルが親からはみ出して切れる。
   親いっぱいに広げて実寸で描かせる。 */
.v > div[id]{ height:100%; }
.v-card > div[id]{ flex:1 1 auto; min-height:0; }

.v-title{
  font-size:10px;
  color:var(--fg);
  font-weight:600;
  padding:6px 8px 2px;
  flex:0 0 auto;
}
.v-body{ flex:1 1 auto; min-height:0; padding:2px 6px 6px; }

/* ---- textbox / shape / button ---- */
.textbox{ font-size:12px; color:var(--fg); }
.shape-rect{ width:100%; height:100%; background:#F3F2F1; border:1px solid var(--grid); border-radius:2px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  background:var(--c1); color:#fff;
  border:none; border-radius:2px;
  font-size:12px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }

/* ---- kpi card ---- */
.kpi-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; }
.kpi-card .kpi-value{ font-size:28px; font-weight:600; color:var(--c1); line-height:1.1; }
.kpi-card .kpi-label{ font-size:11px; color:var(--axis); margin-top:4px; }

/* ---- slicer ---- */
.slicer{ height:100%; display:flex; flex-direction:column; padding:4px; }
.slicer-title{ font-size:10px; font-weight:600; color:var(--fg); margin-bottom:4px; }
.slicer-dropdown{ position:relative; }
.slicer-dropdown-btn{
  width:100%; font-size:11px; padding:4px 6px; text-align:left;
  border:1px solid var(--grid); border-radius:2px; background:#fff; color:var(--fg); cursor:pointer;
}
.slicer-dropdown-panel{
  position:absolute; top:100%; left:0; right:0; z-index:20; max-height:200px; overflow:auto;
  border:1px solid var(--grid); border-radius:2px; background:#fff; padding:4px 6px; box-shadow:0 2px 6px rgba(0,0,0,.15);
}
/* ドロップダウンを開いている間だけカードのクリップを外し、前面に出す。
   .v-card の overflow:hidden がパネル(position:absolute)を切っていたため。 */
.v-card.slicer-open{ overflow:visible; }
.v.slicer-open{ z-index:50; }
.slicer-dropdown-panel label{ display:flex; align-items:center; gap:4px; font-size:11px; padding:2px 0; }
.slicer-list{ overflow:auto; flex:1; }
.slicer-list label{ display:flex; align-items:center; gap:4px; font-size:11px; padding:2px 0; }
.slicer-chiclet{ display:flex; flex-wrap:wrap; gap:4px; }
.chiclet-item{
  font-size:11px; padding:4px 8px; border:1px solid var(--grid); border-radius:2px;
  background:#fff; cursor:pointer; color:var(--fg);
}
.chiclet-item.selected{ background:var(--c1); color:#fff; border-color:var(--c1); }
.slicer-between{ display:flex; flex-direction:column; gap:4px; }
.slicer-between-inputs{ display:flex; gap:4px; }
.slicer-between-inputs input{ width:100%; font-size:11px; padding:3px 4px; border:1px solid var(--grid); border-radius:2px; }
.slicer-range-bar{ position:relative; height:4px; background:var(--grid); border-radius:2px; margin-top:2px; }
.slicer-range-bar .fill{ position:absolute; top:0; bottom:0; left:20%; right:20%; background:var(--c1); border-radius:2px; }

/* ---- table / matrix ---- */
.pbi-table-wrap{ width:100%; height:100%; overflow:auto; }
.pbi-table{ border-collapse:collapse; width:100%; font-size:11px; }
.pbi-table th{
  position:sticky; top:0; background:#fff; text-align:left;
  padding:4px 6px; border-bottom:1px solid var(--grid); color:var(--fg); font-weight:600;
}
.pbi-table td{ padding:4px 6px; border-bottom:1px solid var(--grid); color:var(--fg); }
.pbi-matrix td:first-child, .pbi-matrix th:first-child{ font-weight:600; }

/* ---- landing page ---- */
.landing{ max-width:1100px; margin:0 auto; padding:32px 20px 60px; }
.landing h1{ font-size:22px; margin-bottom:24px; }
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}
.page-card{
  display:block; padding:20px; background:#fff; border:1px solid var(--grid); border-radius:6px;
  text-decoration:none; color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.page-card:hover{ border-color:var(--c1); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.page-card .name{ font-size:14px; font-weight:600; }
.page-card .slug{ font-size:11px; color:var(--axis); margin-top:6px; }