/* /home/m2tom3/calendar_app/static/style.css */
:root { --bg:#fff; --ink:#222; --muted:#777; --accent:#0066ff; --fz:18px; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body { font: var(--fz)/1.7 system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color:var(--ink); background:var(--bg); }

.topbar { position:sticky; top:0; z-index:10; display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 14px; background:#fafafa; border-bottom:1px solid #eee; }
.topbar .title { font-weight:800; font-size: 20px; }
.topbar a { color:var(--accent); text-decoration:none; margin-left:10px; font-weight:600; }

.week-controls { display:flex; gap:10px; padding:10px 12px; }
.btn { border:2px solid #ddd; padding:8px 12px; border-radius:12px; text-decoration:none; color:var(--ink); font-weight:700; }

.grid-week { 
    display:grid; 
    grid-template-columns: 90px repeat(7, minmax(180px, 1fr)); 
    grid-auto-rows: minmax(120px, auto); 
    overflow-x:auto; 
    padding:8px 0 24px; 
}
.rowlabel { position:sticky; left:0; background:#fff; z-index:1; display:flex; align-items:center; justify-content:center; border-right:1px solid #eee; font-weight:800; }
.cell { border-left:1px solid #eee; border-bottom:1px solid #eee; padding:10px; }

.login { padding:24px; display:grid; gap:12px; max-width:420px; margin:40px auto; }
.login label { display:grid; gap:6px; font-weight:700; }
.login input { padding:10px; border-radius:10px; border:2px solid #ddd; font-size: 18px; }
.login button { padding:12px 14px; border:0; border-radius:12px; background:var(--accent); color:white; font-weight:900; font-size: 18px; }

/* 追加: 変数で高さを管理（必要なら微調整） */
:root {
      --topbar-h: 58px;      /* .topbar の高さ相当 */
  --controls-h: 52px;    /* .week-controls の高さ相当（実際に合わせて調整可） */
}

/* 週切り替えバーも sticky にして、ヘッダとぶつからないようにする */
.week-controls {
      position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  background: #fff;
}

/* 左の行ラベルはそのまま（必要ならz-index:1でOK） */
.rowlabel{
      position: sticky;
  left: 0;
  background:#fff;
  z-index: 1;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid #eee; font-weight:800;
}

/* === 単一テーブル版（unified） === */
/* 左2列 + 7日分。行は ヘッダ44px + 8行（データ行は120px想定） */
.grid-week.unified{
    display: grid;
    grid-template-columns: 60px 60px repeat(7, minmax(160px, 1fr));
    grid-template-rows: var(--dayhead-h, 44px) repeat(8, minmax(80px, auto));
    grid-auto-rows: auto;     /* ヘッダが 120px にならないように */
    overflow-x: auto;
    padding: 8px 0 24px;
    gap: 0;
}

/* ヘッダ（日付）は上に固定。既存の --topbar-h を利用 */
.day-head{
      position: sticky;
  top: 0;
  height: var(--dayhead-h, 44px);
  background: #ccf;
  z-index: 2;
  border: 1px solid #ccc;
}
.day-label{ padding: 8px; font-weight: 800; text-align: center; }

/* 左2列（セクション名・午前/午後）は左固定 */
.section-col,.period-col{
      position: sticky;
  left: 0;                /* 1列目は 0、2列目は上書きで 110px */
  z-index: 3;             /* ヘッダより手前 */
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  border-right: 1px solid #eee; border-bottom: 1px solid #eee;
  background: #ccf;       /* 下の帯色は band_class で付与 */
}
.period-col{ left: 60px; }

.cell{
      border-left: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 8px;
  min-height: 80px;
}

/* 行の縞々（本人/ビラ = 色あり、選挙カー/事務所 = 色なし） */
.rowband-a{ background: #eeeeff; }  /* 薄い青系 */
.rowband-b{ background: #fff; }     /* 無色 */

/* 左2列にも帯色を適用（上の白を上書き） */
.section-col.rowband-a, .period-col.rowband-a{ background: #eeeeff; }
.section-col.rowband-b, .period-col.rowband-b{ background: #fff; }

/* 既存の .tag / .empty はお好みで */
.tag-hon { 
    display:inline-block; 
    padding:4px 4px; 
    border-radius:0px; 
    border:0; 
    margin:3px 3px 0 0; 
    font-weight:400;
    background: #ffffff; 
    font-size: 11pt;
}
.tag { display:inline-block; padding:6px 10px; border-radius:999px; border:2px solid #ddd; margin:6px 6px 0 0; font-weight:800; }
.tag.full { background:#ffcccc; border-color:#ff1111; }
.tag.tentative { background:#ccccff; border-color:#1111ff; }
.empty { color:#888; font-weight:600; }

/* スクロール時にヘッダが隠れないよう topbar + controls の高さを調整したい場合は下記を活用
:root { --topbar-h: 58px; --dayhead-h: 44px; }
*/