/* ========================================
   layout.css
   枠組み（トップバー＋サイドバー＋ビュー）　Excel風にコンパクトに
   ======================================== */

#app{
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  grid-template-rows:var(--topbar) 1fr;
  height:100dvh;width:100vw;
}

/* ===== トップバー ===== */
#topbar{
  grid-column:1 / -1;grid-row:1;
  display:flex;align-items:center;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 12px;gap:10px;z-index:10;
}
#topbar .logo{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px}
#topbar .logo .stk{color:var(--brand)}
#topbar .ver{font-size:10px;color:var(--text3);background:var(--bg3);padding:1px 7px;border-radius:3px;margin-left:2px}
#topbar .spacer{flex:1}
#topbar .tb-btn{padding:5px 11px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px}
#topbar .tb-btn:hover{background:var(--bg3)}
#topbar .tb-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
#topbar .tb-btn.primary:hover{background:var(--brand-deep)}
.theme-toggle{width:30px;height:30px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px}

/* ===== サイドバー ===== */
#sidebar{
  grid-column:1;grid-row:2;
  background:var(--bg2);
  border-right:1px solid var(--border);
  overflow-y:auto;padding:6px 0;
  display:flex;flex-direction:column;
}
.si-section-title{font-size:10px;color:var(--text3);letter-spacing:.06em;padding:10px 14px 3px;font-weight:600}
.si-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 14px;cursor:pointer;font-size:13px;color:var(--text);
  border-left:3px solid transparent;
}
.si-item:hover{background:var(--bg3)}
.si-item.active{background:var(--brand-soft);border-left-color:var(--brand);color:var(--brand-deep);font-weight:600}
.si-item .icon{font-size:15px;width:20px;text-align:center}
.si-foot{margin-top:auto;padding:12px 14px;line-height:1.6;border-top:1px solid var(--border)}

/* ===== メイン ===== */
#main{grid-column:2;grid-row:2;overflow:hidden;position:relative;background:var(--bg)}
.view{position:absolute;inset:0;overflow:auto;padding:12px 14px;display:none}
.view.active{display:block}

/* ビュー共通：ヘッダー */
.view-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.view-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:7px}
.view-title .icon{font-size:18px}
.view-actions{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.vh-btn{padding:5px 11px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px}
.vh-btn:hover{background:var(--bg3)}
.vh-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.vh-btn.primary:hover{background:var(--brand-deep)}

.search{padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);width:210px}

/* フィルタタブ（ライン・状態など） */
.filter-tabs{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.filter-tabs button{padding:6px 11px;font-size:12px;color:var(--text2);background:var(--bg2);border-right:1px solid var(--border)}
.filter-tabs button:last-child{border-right:none}
.filter-tabs button:hover{background:var(--bg3)}
.filter-tabs button.active{background:var(--brand);color:#fff}

/* レスポンシブ */
@media (max-width:768px){
  #app{grid-template-columns:1fr;grid-template-rows:var(--topbar) auto 1fr}
  #sidebar{grid-column:1;grid-row:2;height:auto;flex-direction:row;overflow-x:auto;padding:0;border-right:none;border-bottom:1px solid var(--border)}
  .si-section-title,.si-foot{display:none}
  .si-item{border-left:none;border-bottom:3px solid transparent;padding:9px 11px;white-space:nowrap}
  .si-item.active{border-left:none;border-bottom-color:var(--brand)}
  #main{grid-column:1;grid-row:3}
  .search{width:150px}
}