/* ============================================================
   チバリヨ - P7 営業ダッシュボード スタイル (Phase 2-B-4)
   - p7- プレフィックスで独立 (他画面のクラスに依存しない)
   - 中央タイムラインは mobile-s2-timeline.css (s2-) をそのまま利用
   - 編集モーダル内は mobile-s3-create.css (s3-) をそのまま利用
============================================================ */

.p7-content {
  max-width: 1400px;
  margin: 0 auto;
}

/* ----- ヘッダー ----- */
.p7-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.p7-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
}
.p7-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p7-header .btn {
  width: auto;
  padding: 8px 16px;
}
.p7-updated {
  font-size: 12px;
  color: var(--color-text-muted);
}

.p7-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
}

.p7-loading, .p7-empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--color-text-sub);
  font-size: 13px;
}

/* ----- 3カラムグリッド ----- */
.p7-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1180px) {
  .p7-grid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .p7-col-right {
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px) {
  .p7-grid {
    grid-template-columns: 1fr;
  }
  .p7-col-right {
    grid-column: auto;
  }
}

/* 中央カラム: 検索バー + タイムライン/検索結果をまとめて中央寄せ */
.p7-center-inner {
  max-width: 640px;
  margin: 0 auto;
}
#p7-timeline {
  margin: 0 auto;
}

/* ----- セクションカード ----- */
.p7-section {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.p7-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.p7-section-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.p7-section-header .p7-section-title {
  margin-bottom: 0;
}
.p7-section-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ----- 自分向けアラート ----- */
.p7-alerts {
  border-color: #F2C9C9;
  background: #FDF4F4;
  padding: 12px 14px;
}
.p7-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.p7-alert-icon {
  flex-shrink: 0;
}
.p7-alert-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: var(--color-text);
}
.p7-alert-text strong {
  color: var(--color-danger);
}
.p7-alert-text span {
  font-size: 12px;
  color: var(--color-text-sub);
}

/* ----- KPI メトリクス ----- */
.p7-metric {
  margin-bottom: 12px;
}
.p7-metric:last-of-type {
  margin-bottom: 0;
}
.p7-metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.p7-metric-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-sub);
}
.p7-metric-nums {
  font-size: 13px;
  color: var(--color-text-sub);
}
.p7-metric-nums strong {
  font-size: 18px;
  color: var(--color-text);
}
.p7-metric-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.p7-metric-bottom .is-minus {
  color: var(--color-danger);
}

.p7-kpi-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
  font-size: 12px;
  color: var(--color-text-sub);
}
.p7-footer-sep {
  margin: 0 6px;
  color: var(--color-text-muted);
}

/* ----- プログレスバー ----- */
.p7-bar {
  height: 8px;
  background: #EEF1F5;
  border-radius: 4px;
  overflow: hidden;
}
.p7-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.p7-bar-fill.is-complete { background: #0F6E56; }
.p7-bar-fill.is-high     { background: #1D9E75; }
.p7-bar-fill.is-mid      { background: #D9A106; }
.p7-bar-fill.is-low      { background: #C66A4A; }
.p7-bar-fill.is-empty    { background: transparent; }

/* ----- ペースバッジ ----- */
.p7-pace-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.p7-pace-badge-sm {
  font-size: 11px;
  padding: 2px 8px;
}
.p7-pace-badge.is-pace-good    { color: #0F6E56; background: #E1F5EE; }
.p7-pace-badge.is-pace-warn    { color: #854F0B; background: #FAEEDA; }
.p7-pace-badge.is-pace-danger  { color: #A32D2D; background: #FCEBEB; }
.p7-pace-badge.is-pace-unknown { color: #475569; background: #F1F5F9; }

/* ----- メンバー比較 ----- */
.p7-compare-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p7-compare-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.p7-compare-row.is-me {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.p7-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.p7-compare-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.p7-me-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  background: #FFFFFF;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 1px 6px;
}
.p7-compare-nums {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.p7-compare-nums strong {
  color: var(--color-text);
}

/* ----- 担当顧客一覧 ----- */
.p7-stale-section {
  border-color: #F2C9C9;
}
.p7-client-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 480px;
  overflow-y: auto;
}
.p7-client-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: #FAFBFC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.p7-client-row:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.p7-client-row.is-stale {
  background: #FDF4F4;
  border-color: #F2C9C9;
}
.p7-client-row.is-stale:hover {
  border-color: var(--color-danger);
}
.p7-client-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.p7-client-visit {
  font-size: 11px;
  color: var(--color-text-sub);
}
.p7-client-row.is-stale .p7-client-visit {
  color: var(--color-danger);
}

/* ----- 種別バッジ・チップ (履歴モーダル用) ----- */
.p7-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}
.p7-type-badge.is-visit      { color: #0C447C; background: #E6F1FB; }
.p7-type-badge.is-quote-only { color: #0F6E56; background: #E1F5EE; }

.p7-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
}
.p7-chip-appo  { color: #854F0B; background: #FAEEDA; }
.p7-chip-quote { color: #0F6E56; background: #E1F5EE; }

/* ----- モーダル ----- */
.p7-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.p7-modal {
  width: 100%;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  max-height: 86vh;
}
.p7-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}
.p7-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.p7-modal-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
}
.p7-modal-close:hover {
  color: var(--color-text);
}
.p7-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}

/* ----- 顧客日報履歴 ----- */
.p7-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 12px;
}
.p7-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p7-history-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.p7-history-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.p7-history-date {
  font-weight: 600;
  color: var(--color-text);
}
.p7-history-member {
  color: var(--color-text-sub);
}
.p7-history-act {
  margin-top: 5px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ----- トースト ----- */
.p7-toast-wrap {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1100;
  pointer-events: none;
}
.p7-toast {
  background: #1F2933;
  color: #FFFFFF;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.p7-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.p7-toast.is-success { background: #0F6E56; }
.p7-toast.is-error   { background: #A32D2D; }

/* ============================================================
   日報検索 (中央カラム上部の検索バー + 検索結果)
============================================================ */
.p7-search-bar {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.p7-search-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.p7-search-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
}
.p7-search-select {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
  cursor: pointer;
}
.p7-search-input:focus,
.p7-search-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.p7-search-actions {
  display: flex;
  gap: 8px;
}
.p7-search-actions .btn {
  width: auto;
  padding: 8px 18px;
}

/* ----- 検索結果 ----- */
.p7-search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.p7-search-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.p7-search-results-header .btn {
  width: auto;
  padding: 6px 12px;
  flex-shrink: 0;
}
.p7-search-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p7-search-row {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.p7-search-row:hover {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.p7-search-client {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
/* 本文は3行までにクランプ (全文は編集モーダルで) */
.p7-search-row .p7-history-act {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* エリア絞り込み (datalist 付き入力。セレクトと同じ見た目で揃える) */
.p7-search-area-input {
  flex: 1 1 auto;
  min-width: 150px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-text);
}
.p7-search-area-input:focus {
  outline: none;
  border-color: var(--color-primary);
}