/* ============================================================
   KBC 利用計画ツール — スタイルシート
   ============================================================ */

/* ── リセット ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden 属性を確実に非表示にする（CSSの display 指定に上書きされないよう !important） */
[hidden] { display: none !important; }

:root {
  --primary      : #3A6B50;
  --primary-dark : #2C5340;
  --primary-light: #E8F2EC;
  --bg           : #F3F1EC;
  --surface      : #FFFFFF;
  --border       : #C8C2B5;
  --text         : #2A3A2B;
  --text-muted   : #6B7A6B;
  --header-bg    : #3A6B50;
  --header-text  : #FFFFFF;
  --grid-line    : #DDD8CE;
  --grid-month   : #B5AFA4;
  --error        : #B03A2E;
  --radius       : 6px;
  --shadow       : 0 2px 10px rgba(0,0,0,0.10);
  --font         : 'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
}

body {
  font-family: var(--font);
  font-size  : 15px;
  color      : var(--text);
  background : var(--bg);
  height     : 100vh;
  overflow   : hidden;
}

/* ── 認証画面 ─────────────────────────────────────────────── */
#auth-screen {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : 100vh;
}

.auth-box {
  background   : var(--surface);
  border-radius: 12px;
  box-shadow   : 0 4px 24px rgba(0,0,0,0.14);
  padding      : 44px 52px;
  text-align   : center;
  width        : 380px;
}

.auth-logo {
  max-width    : 220px;
  height       : auto;
  margin-bottom: 20px;
}

.auth-subtitle {
  color        : var(--text-muted);
  font-size    : 12px;
  line-height  : 1.7;
  margin-bottom: 24px;
}

.auth-form {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.auth-error {
  color     : var(--error);
  font-size : 12px;
  margin-top: 10px;
}

/* ── メインレイアウト ─────────────────────────────────────── */
#app {
  display  : flex;
  height   : 100vh;
  overflow : hidden;
}

/* 左：チャートパネル */
#chart-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  border-right  : 1px solid var(--border);
}

#chart-scroll {
  flex    : 1;
  overflow: auto;
  padding : 16px;
}

#chart-toolbar {
  padding         : 8px 16px;
  background      : var(--surface);
  border-top      : 1px solid var(--border);
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

/* ズームコントロール */
.zoom-controls {
  display    : flex;
  align-items: center;
  gap        : 6px;
}

.btn-zoom {
  background   : var(--primary-light);
  border       : 1.5px solid var(--border);
  color        : var(--primary-dark);
  width        : 32px;
  height       : 32px;
  font-size    : 20px;
  font-weight  : 700;
  border-radius: 4px;
  line-height  : 1;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  transition   : background .15s;
}
.btn-zoom:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn-zoom-reset {
  background   : #E4E0D8;
  border       : 1.5px solid var(--border);
  color        : var(--text-muted);
  padding      : 0 10px;
  height       : 32px;
  font-size    : 12px;
  font-weight  : 600;
  border-radius: 4px;
  cursor       : pointer;
  transition   : background .15s;
  font-family  : var(--font);
}
.btn-zoom-reset:hover { background: #D8D4CC; color: var(--text); }

.zoom-display {
  font-size  : 13px;
  font-weight: 700;
  color      : var(--text-muted);
  min-width  : 46px;
  text-align : center;
}

/* 右：設定パネル */
#settings-panel {
  width         : 420px;
  min-width     : 360px;
  flex-shrink   : 0;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  background    : var(--surface);
  border-left   : 1px solid var(--border);
}

/* ── タブバー ────────────────────────────────────────────── */
#tab-bar {
  display    : flex;
  flex-shrink: 0;
  background : var(--primary-light);
  border-bottom: 2px solid var(--border);
}

.tab-btn {
  flex        : 1;
  padding     : 10px 4px;
  font-size   : 12px;
  font-weight : 700;
  font-family : var(--font);
  border      : none;
  border-bottom: 3px solid transparent;
  background  : transparent;
  color       : var(--text-muted);
  cursor      : pointer;
  margin-bottom: -2px;
  transition  : color .15s, border-color .15s, background .15s;
}
.tab-btn:hover {
  background: var(--primary-light);
  color     : var(--primary);
}
.tab-btn.active {
  color        : var(--primary);
  border-bottom-color: var(--primary);
  background   : var(--surface);
}

/* ？ヘルプタブ：小さく右端に固定 */
.tab-btn--help {
  flex        : none;
  width       : 34px;
  font-size   : 15px;
  font-weight : 900;
  color       : var(--text-muted);
  border-left : 1px solid var(--border);
  margin-left : auto;
}
.tab-btn--help:hover  { color: var(--primary); }
.tab-btn--help.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── タブパネル ──────────────────────────────────────────── */
.tab-panel {
  flex          : 1;
  overflow-y    : auto;
  padding       : 12px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  min-height    : 0;
}

/* ── 設定セクション ───────────────────────────────────────── */
.settings-section {
  border       : 1px solid var(--border);
  border-radius: var(--radius);
  overflow     : hidden;
}

.section-header {
  background   : var(--primary-light);
  color        : var(--primary-dark);
  font-size    : 12px;
  font-weight  : 700;
  padding      : 7px 12px;
  border-bottom: 1px solid var(--border);
}

.section-header--flex {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.section-body {
  padding: 10px 12px;
}

/* 期間行 */
.period-row {
  display    : flex;
  align-items: center;
  gap        : 5px;
  margin-bottom: 8px;
  flex-wrap  : wrap;
}
.period-row:last-of-type { margin-bottom: 0; }

.period-label {
  width     : 30px;
  font-size : 12px;
  color     : var(--text-muted);
  flex-shrink: 0;
}

.sep { font-size: 12px; color: var(--text-muted); }

/* ── 項目リスト ───────────────────────────────────────────── */
.item-card {
  display      : flex;
  align-items  : center;
  gap          : 6px;
  padding      : 4px 7px;
  border       : 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 3px;
  background   : var(--surface);
  transition   : background .15s, border-color .15s;
  cursor       : pointer;
  user-select  : none;
}
.item-card:hover {
  background  : #EAF2EC;
  border-color: var(--primary);
}

.item-badge {
  flex-shrink  : 0;
  width        : 52px;
  font-size    : 11px;
  font-weight  : 700;
  padding      : 2px 3px;
  border-radius: 3px;
  text-align   : center;
  white-space  : nowrap;
}

.item-info {
  flex    : 1;
  min-width: 0;
}

.item-name {
  font-size    : 13px;
  font-weight  : 600;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}

.item-actions { display: flex; gap: 3px; flex-shrink: 0; }

.items-empty {
  font-size  : 11px;
  color      : var(--text-muted);
  text-align : center;
  padding    : 18px 8px;
  line-height: 1.8;
  white-space: pre-line;
}

/* ── フォーム共通 ─────────────────────────────────────────── */
input[type="text"],
input[type="password"],
textarea,
select {
  font-family: var(--font);
  font-size  : 13px;
  color      : var(--text);
  border     : 1.5px solid var(--border);
  border-radius: var(--radius);
  padding    : 6px 9px;
  background : var(--surface);
  outline    : none;
  transition : border-color .2s;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus { border-color: var(--primary); }

.w-full  { width: 100%; }
.sel-sm  { padding: 5px 6px; font-size: 12px; }

textarea { resize: vertical; line-height: 1.7; }

.field-error {
  color     : var(--error);
  font-size : 11px;
  margin-top: 5px;
}

/* ── ボタン ──────────────────────────────────────────────── */
button {
  font-family: var(--font);
  cursor     : pointer;
  border     : none;
  border-radius: var(--radius);
  transition : background .15s, opacity .15s;
  line-height: 1;
}

.btn-primary {
  background : var(--primary);
  color      : #fff;
  padding    : 9px 20px;
  font-size  : 13px;
  font-weight: 700;
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary {
  background: #E4E0D8;
  color     : var(--text);
  padding   : 9px 20px;
  font-size : 13px;
}
.btn-secondary:hover { background: #D8D4CC; }

.btn-sm { padding: 3px 10px; font-size: 11px; font-weight: 700; }

.btn-icon {
  background: transparent;
  padding   : 4px 6px;
  font-size : 13px;
  color     : var(--text-muted);
  border-radius: 4px;
}
.btn-icon:hover { background: #EEE; color: var(--text); }
.btn-icon-del:hover { background: #FDECEA; color: var(--error); }

/* ← → シフトボタン（手続きカラー） */
.btn-shift {
  background   : #D6EAF8;
  border       : 1.5px solid #4A7FA5;
  color        : #4A7FA5;
  padding      : 5px 12px;
  font-size    : 15px;
  font-weight  : 700;
  border-radius: 4px;
  line-height  : 1;
  cursor       : pointer;
  transition   : background .15s, color .15s;
}
.btn-shift:hover { background: #4A7FA5; color: #fff; }

/* 全体シフト行（期間セクション内） */
.period-shift-row {
  display    : flex;
  gap        : 8px;
  margin-top : 10px;
  padding-top: 10px;
  border-top : 1px dashed var(--border);
}

.btn-shift-all {
  flex        : 1;
  padding     : 7px 6px;
  font-size   : 12px;
  font-weight : 700;
  font-family : var(--font);
  border-radius: 4px;
  border      : 1.5px solid var(--primary);
  background  : var(--primary-light);
  color       : var(--primary);
  cursor      : pointer;
  transition  : background .15s, color .15s;
  text-align  : center;
}
.btn-shift-all:hover { background: var(--primary); color: #fff; }

/* ── インライン項目フォーム ───────────────────────────────── */
#item-form {
  border-top: 2px solid var(--primary);
}

.item-form-hd {
  background     : var(--primary);
  color          : #fff;
  font-size      : 12px;
  font-weight    : 700;
  padding        : 6px 10px 6px 12px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.item-form-hd-actions {
  display    : flex;
  align-items: center;
  gap        : 6px;
}

.btn-form-delete {
  background   : rgba(176,58,46,.18);
  border       : 1px solid rgba(255,255,255,.40);
  color        : #fff;
  font-size    : 11px;
  font-weight  : 600;
  font-family  : var(--font);
  padding      : 3px 9px;
  border-radius: 4px;
  cursor       : pointer;
  transition   : background .15s;
}
.btn-form-delete:hover { background: rgba(176,58,46,.55); }

.btn-form-close {
  background   : rgba(255,255,255,.18);
  border       : 1px solid rgba(255,255,255,.45);
  color        : #fff;
  font-size    : 11px;
  font-weight  : 600;
  font-family  : var(--font);
  padding      : 3px 9px;
  border-radius: 4px;
  cursor       : pointer;
  transition   : background .15s;
}
.btn-form-close:hover { background: rgba(255,255,255,.32); }

.item-form-body {
  padding       : 12px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  background    : #F0F5F2;
}


.form-row {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}

.form-label {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--text-muted);
  letter-spacing: .04em;
}
.lbl-required::after { content: " ＊"; color: var(--error); }

.date-inputs {
  display    : flex;
  align-items: center;
  gap        : 4px;
  flex-wrap  : wrap;
}
.date-inputs .sep { font-size: 12px; }

/* ── 操作説明 ────────────────────────────────────────────── */
.op-guide {
  display              : grid;
  grid-template-columns: auto 1fr;
  gap                  : 5px 12px;
  margin               : 0;
}

.op-guide dt {
  font-size  : 12px;
  font-weight: 700;
  color      : var(--primary-dark);
  white-space: nowrap;
  padding    : 2px 0;
}

.op-guide dd {
  font-size  : 12px;
  color      : var(--text-muted);
  margin     : 0;
  padding    : 2px 0;
  border-bottom: 1px dotted var(--border);
}

.op-guide dt:last-of-type + dd,
.op-guide dd:last-child { border-bottom: none; }

/* ── データ管理 ──────────────────────────────────────────── */
.data-mgmt-row {
  display      : flex;
  gap          : 8px;
  margin-bottom: 8px;
}

.btn-data {
  flex        : 1;
  padding     : 9px 10px;
  font-size   : 13px;
  font-weight : 700;
  font-family : var(--font);
  border-radius: var(--radius);
  border      : 1.5px solid var(--primary);
  background  : var(--primary-light);
  color       : var(--primary);
  cursor      : pointer;
  transition  : background .15s, color .15s;
}
.btn-data:hover { background: var(--primary); color: #fff; }

.btn-data--import {
  border-color: #7A6B3D;
  background  : #F5EFD8;
  color       : #7A6B3D;
}
.btn-data--import:hover { background: #7A6B3D; color: #fff; }

.btn-data--new {
  border-color: #8B4513;
  background  : #FDF0E6;
  color       : #8B4513;
  font-size   : 12px;
}
.btn-data--new:hover { background: #8B4513; color: #fff; }

.data-mgmt-note {
  font-size  : 11px;
  color      : var(--text-muted);
  line-height: 1.75;
}

/* ── チャート ─────────────────────────────────────────────── */
#chart-wrapper {
  background   : #fff;
  border-radius: 6px;
  box-shadow   : var(--shadow);
  min-width    : fit-content;
  overflow     : hidden;
}

/* 印刷時のみ表示するロゴ行 */
.chart-print-header {
  display        : none;
  padding        : 8px 16px 4px;
  align-items    : center;
  justify-content: space-between;
  border-bottom  : 1px solid var(--grid-month);
}
.chart-print-header img { height: 38px; width: auto; }
.chart-print-date { font-size: 10px; color: #888; }

/* タイトル */
.chart-title {
  text-align : center;
  font-size  : 20px;
  font-weight: 700;
  color      : var(--primary-dark);
  padding    : 14px 16px 10px;
}

/* タイトル・コメント インライン編集スタイル */
.chart-title-edit {
  cursor    : text;
  outline   : none;
  border-radius: 4px;
  transition: background .15s;
}
.chart-title-edit:hover  { background: rgba(58,107,80,.06); }
.chart-title-edit:focus  { background: rgba(58,107,80,.10); outline: 2px solid var(--primary); outline-offset: 2px; }

.chart-comment-edit {
  cursor     : text;
  outline    : none;
  min-height : 30px;
  border-radius: 4px;
  transition : background .15s;
}
.chart-comment-edit:hover { background: rgba(58,107,80,.04); }
.chart-comment-edit:focus { background: rgba(58,107,80,.08); outline: 2px solid var(--primary); outline-offset: 2px; }

/* コメント欄が空のときプレースホルダーを表示 */
.chart-comment-edit:empty::before {
  content       : 'コメントを入力...';
  color         : #ccc;
  font-style    : italic;
  pointer-events: none;
}

/* テーブル */
.chart-table {
  width          : 100%;
  border-collapse: collapse;
  table-layout   : fixed;
}

/* ヘッダー：分類列 */
.th-cat {
  background: var(--header-bg);
  color     : var(--header-text);
  width     : 80px;
  min-width : 80px;
  border    : 1px solid rgba(255,255,255,.2);
  padding   : 7px 3px;
  font-size : 13px;
  text-align: center;
  vertical-align: middle;
}

/* ヘッダー：月 */
.th-month {
  background : var(--header-bg);
  color      : var(--header-text);
  text-align : center;
  padding    : 7px 2px;
  font-size  : 13px;
  font-weight: 700;
  border     : 1px solid rgba(255,255,255,.2);
}

/* ヘッダー：旬 */
.th-dekad {
  background: #4A7D61;
  color     : rgba(255,255,255,.92);
  text-align: center;
  padding   : 4px 1px;
  font-size : 11px;
  border    : 1px solid rgba(255,255,255,.15);
  min-width : 38px;
}

/* データ行：分類ラベル */
.td-cat {
  background    : var(--primary-light);
  font-size     : 13px;
  font-weight   : 700;
  text-align    : center;
  vertical-align: middle;
  padding       : 4px 2px;
  border        : 1px solid var(--grid-line);
  color         : var(--primary-dark);
  word-break    : break-all;
}

/* データ行：タイムライン */
.td-timeline {
  position      : relative;
  border        : 1px solid var(--grid-line);
  padding       : 0;
  vertical-align: top;
}

/* タイムライン内部（絶対配置の基準） */
.tl-inner {
  position: relative;
  width   : 100%;
  cursor  : cell;   /* 空き領域クリックで追加できることを示す */
}

/* グリッドオーバーレイ */
.tl-grid {
  position      : absolute;
  inset         : 0;
  display       : flex;
  pointer-events: none;
}
.tl-grid-cell { flex: 1; }
.tl-grid-cell--dekad { border-right: 1px dashed var(--grid-line); }
.tl-grid-cell--month { border-right: 1px solid var(--grid-month); }

/* ガントバー */
.g-bar {
  position       : absolute;
  border-radius  : 3px;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  padding        : 1px 5px;
  overflow       : hidden;
  cursor         : grab;
  transition     : filter .15s;
  user-select    : none;
}
.g-bar:hover { filter: brightness(.92); }

/* リサイズハンドル div（バー両端） */
.g-bar-handle {
  position  : absolute;
  top       : 0;
  width     : 7px;
  height    : 100%;
  background: rgba(0,0,0,.20);
  opacity   : 0;
  transition: opacity .12s;
  cursor    : ew-resize;
  z-index   : 1;
}
.g-bar-handle--start { left: 0; border-radius: 3px 0 0 3px; }
.g-bar-handle--end   { right: 0; border-radius: 0 3px 3px 0; }
.g-bar:hover .g-bar-handle { opacity: 1; }

/* バー右上の削除ボタン */
.g-bar-del {
  position     : absolute;
  top          : 0;
  right        : 0;
  width        : 17px;
  height       : 17px;
  background   : rgba(160,40,40,.80);
  color        : #fff;
  border       : none;
  border-radius: 0 3px 0 4px;
  font-size    : 12px;
  font-weight  : 700;
  line-height  : 1;
  padding      : 0;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  justify-content: center;
  opacity      : 0;
  transition   : opacity .12s, background .12s;
  z-index      : 3;
}
.g-bar:hover .g-bar-del        { opacity: 1; }
.g-bar-del:hover               { background: rgba(180,30,30,1); }

.g-bar-name {
  font-size    : 12px;
  font-weight  : 700;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  line-height  : 1.35;
}
.g-bar-summary {
  font-size    : 10px;
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  line-height  : 1.3;
  color        : #2A3A2B !important;
  opacity      : .90;
}

/* ⭐ ポイントマーカー */
.g-point {
  position      : absolute;
  transform     : translateX(-50%);
  display       : flex;
  flex-direction: column;
  align-items   : center;
  pointer-events: auto;   /* ドラッグ・クリック可 */
  cursor        : grab;
  padding       : 4px 10px; /* ヒット領域を広げる */
}
.g-point-icon  { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* ⭐ポイント右上の削除ボタン */
.g-point-del {
  position       : absolute;
  top            : 0;
  right          : 4px;
  width          : 16px;
  height         : 16px;
  background     : rgba(160,40,40,.80);
  color          : #fff;
  border         : none;
  border-radius  : 50%;
  font-size      : 11px;
  font-weight    : 700;
  line-height    : 1;
  padding        : 0;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  opacity        : 0;
  transition     : opacity .12s, background .12s;
  z-index        : 3;
}
.g-point:hover .g-point-del { opacity: 1; }
.g-point-del:hover           { background: rgba(180,30,30,1); }
.g-point-label {
  font-size    : 12px;
  white-space  : nowrap;
  background   : rgba(255,255,255,.88);
  padding      : 1px 3px;
  border-radius: 2px;
  margin-top   : 1px;
  color        : var(--text);
  max-width    : 80px;
  overflow     : hidden;
  text-overflow: ellipsis;
}

/* コメント */
.chart-comment {
  padding    : 10px 16px;
  font-size  : 12px;
  line-height: 1.8;
  border-top : 1px solid var(--grid-line);
  white-space: pre-wrap;
  word-break : break-all;
  color      : var(--text);
}

/* 空メッセージ */
.chart-empty {
  text-align : center;
  padding    : 40px 20px;
  color      : var(--text-muted);
  font-size  : 12px;
  line-height: 1.8;
}

/* ── 印刷スタイル ─────────────────────────────────────────── */
@media print {
  @page {
    size  : A4 landscape;
    margin: 8mm 10mm;
  }

  body {
    overflow  : visible !important;
    background: #fff !important;
    height    : auto !important;
  }

  /* 印刷不要な要素を非表示 */
  #auth-screen,
  #settings-panel,
  #chart-toolbar { display: none !important; }

  #app {
    display: block !important;
    height : auto !important;
  }

  #chart-panel {
    border  : none !important;
    width   : 100% !important;
    height  : auto !important;
    overflow: visible !important;
  }

  #chart-scroll {
    overflow: visible !important;
    padding : 0 !important;
    height  : auto !important;
  }

  #chart-wrapper {
    box-shadow   : none !important;
    border-radius: 0 !important;
    min-width    : 0 !important;
    width        : 100% !important;
  }

  /* 印刷時にロゴ行を表示 */
  .chart-print-header { display: flex !important; }

  /* フォントを少し小さく */
  .chart-table  { font-size: 10px; }
  .g-bar-name   { font-size: 9px; }
  .g-bar-summary{ font-size: 7.5px; }
  .chart-title  { font-size: 14px; padding: 8px 16px 6px; }
  .chart-comment{ font-size: 11px; }
}