/* file: /app/TL/style.css
------------------------------------------------------
 TimeLedger Web - Clean CSS (single source of truth)
 - 余分な重複定義を撤去
 - カレンダー画面は .tlCalendarPage 配下だけにスコープ
------------------------------------------------------ */

/* ========== Base ========== */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;

  --line: #d9d9d9;
  --card: #ffffff;

  --sun: #d0021b;  /* 日祝 */
  --sat: #1f5fff;  /* 土 */

  --header: #d9f2d9;      /* pastel green */
  --headerLine: #cfe7cf;  /* header border */

  --radius: 12px;
  --shadow: 0 8px 20px rgba(0,0,0,0.08);
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
#app{ min-height:100vh; }

/* ========== Common UI ========== */
.page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.btn{
  border:none;
  cursor:pointer;
  border-radius:999px;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  background:#fff;
  border:1px solid #d0d0d0;
  color:var(--text);
}
.btn.active{
  background:#111;
  border-color:#111;
  color:#fff;
}

/* ========== Auth (Login) ========== */
.authWrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.authCard{
  width:min(520px, 100%);
  padding:16px;
  background:#EAF6FF;
  border:1px solid #CFEAFF;
  border-radius:18px;
}
.authTitle{
  font-size:22px;
  font-weight:900;
  margin:6px 0 10px;
}
.label{
  font-size:13px;
  font-weight:800;
  margin:12px 0 6px;
  color:#374151;
}
.input{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid #BFE3FF;
  background:#fff;
  outline:none;
  font-weight:700;
  color:var(--text);
}
.errorText{
  color:#B91C1C;
  font-weight:800;
  margin-top:10px;
}

/* ========== Modal / Overlay ========== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal{
  width:min(560px, calc(100% - 28px));
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:14px;
}
.modalTitle{
  font-size:16px;
  font-weight:900;
  margin-bottom:8px;
}
.modalBody{
  color:#111827;
  font-weight:800;
  line-height:1.6;
}
.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

/* ========== Toast ========== */
.toastWrap{
  position:fixed;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:2000;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.toast{
  min-width:260px;
  max-width:min(520px, calc(100vw - 28px));
  background:#111827;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  box-shadow:var(--shadow);
}

/* ======================================================
   Calendar Screen (scoped)
   - calendar.js のDOM構造前提
   - ここ以外で .tlWeekRow などは定義しない
====================================================== */

.tlCalendarPage{
  background:var(--bg);
  color:var(--text);
}

/* Header */
.tlCalendarPage .tlHeader{
  position:sticky;
  top:0;
  z-index:50;
  height:56px;

  background:var(--header);
  border-bottom:1px solid var(--headerLine);

  display:grid;
  grid-template-columns: 220px 1fr 420px;
  align-items:center;
  padding:0 12px;
}
.tlCalendarPage .tlHeaderLeft{ font-weight:800; }
.tlCalendarPage .tlHeaderMid{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  transform: translateX(-150px); /* ★ここ：-40px を調整（-30〜-60px目安） */
}

.tlCalendarPage .tlMonthTitle{
  font-weight:900;
  min-width:120px;
  text-align:center;
}
.tlCalendarPage .tlHeaderRight{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}

/* Body: 2 columns */
.tlCalendarPage .tlBody{
  flex:1;
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:12px;
  padding:12px;
  overflow:hidden;
}
@media (max-width: 980px){
  .tlCalendarPage .tlBody{
    grid-template-columns: 1fr;
  }
}

.tlCalendarPage .tlGridWrap{
  min-width:0;
  overflow:auto;
}
.tlCalendarPage .tlSide{
  min-width:0;
  overflow:auto;
}

.tlCalendarPage .tlSideCard{
  background:var(--card);
  border:1px solid #e6e6e6;
  border-radius:var(--radius);
  padding:12px;
}
.tlCalendarPage .tlSideTitle{
  font-weight:900;
  margin-bottom:10px;
}
.tlCalendarPage .tlSideItem{
  border:1px solid #ededed;
  border-radius:12px;
  padding:10px;
  background:#fff;
  margin-bottom:10px;
}

/* Weekday Row (Sun..Sat) */
.tlCalendarPage .tlDowRow{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border:1px solid var(--line);
  border-bottom:none;
  background:#fff;
}
.tlCalendarPage .tlDowCell{
  padding:10px 0;
  text-align:center;
  font-weight:900;
  border-right:1px solid var(--line);
  color:#111;
  -webkit-user-select:none;
  user-select:none;
}
.tlCalendarPage .tlDowCell:last-child{ border-right:none; }

/* Month Grid: 6 week rows stacked */
.tlCalendarPage .tlGrid{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
  background:#fff;
}
.tlCalendarPage .tlGrid.isLoading{ opacity:0.65; }

/* ✅ 重要：週行は絶対に grid にしない（崩壊原因を封じる） */
.tlCalendarPage .tlWeekRow{
  position:relative;
  display:block;
  min-height:120px; /*縦長*/
  border-top:1px solid var(--line);
}

/* Cells layer (7 columns) */
.tlCalendarPage .tlWeekCells{
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Cell */
.tlCalendarPage .tlCell{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  min-height:180px;  /*縦長*/
  overflow:hidden;
}
.tlCalendarPage .tlCell:last-child{ border-right:none; }
.tlCalendarPage .tlCell.isOutMonth{ opacity:0.55; }
.tlCalendarPage .tlCell.isSelected{
  outline:2px solid #7bbf7b;
  outline-offset:-2px;
  background:#eef8ee;
}

/* Date label */
.tlCalendarPage .tlCellTop{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 8px;
  pointer-events:none;
}
.tlCalendarPage .tlDayNum{
  font-size:16px;
  line-height:16px;
  font-weight:900;
  color:#111;
}
.tlCalendarPage .tlMore{
  font-size:12px;
  font-weight:800;
  color:#666;
}

/* Bars overlay (week spans) */
.tlCalendarPage .tlWeekBars{
  position:absolute;
  left:0;
  right:0;
  top:28px;        /* 日付段の下から */
  bottom:8px;

  padding:4px 6px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 24px;
  column-gap:6px;
  row-gap:6px;

  pointer-events:none; /* barだけ JS で pointer-events を有効化 */
}

/* Span bar */
.tlCalendarPage .tlSpanBar{
  border-radius:8px;
  color:#fff;
  padding:0 8px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.tlCalendarPage .tlSpanTime{
  font-size:12px;
  opacity:0.95;
  flex:0 0 auto;
}
.tlCalendarPage .tlSpanTitle{
  font-size:13px;
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Safari compatibility warnings (optional) */
.tlCalendarPage .tlHeader{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 土日数字色 */
.tlCalendarPage .tlCell.isSun .tlDayNum{ color: var(--sun); }
.tlCalendarPage .tlCell.isSat .tlDayNum{ color: var(--sat); }

/* 右側一覧：左端に同色ライン（JSで --bar-color を付与） */
.tlCalendarPage .tlSideItem{
  position: relative;
  padding-left: 14px;
}
.tlCalendarPage .tlSideItem::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  border-radius: 6px;
  background: var(--bar-color, #d1d5db);
}