/* Project home (ProjectDashboard.razor): the toned hero with schedule facts, contacts and section links. */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.ish-project-hero {
  --tone: var(--brand);
  position: relative; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px 20px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tone) 7%, var(--surface)), var(--surface) 110px);
}

.ish-project-hero-head { display: flex; align-items: flex-start; gap: 14px; }

.ish-project-hero-title { min-width: 0; flex: 1; }

.ish-project-hero-title h1 { margin: 0; color: var(--ink); font-size: 1.4rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }

.ish-project-hero-title p { max-width: 70ch; margin: 6px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }

.ish-project-hero-actions { display: flex; flex: none; align-items: center; gap: 8px; }

/* ── Schedule facts and progress ─────────────────────────────────────────── */
.ish-project-schedule { padding-top: 16px; border-top: 1px solid var(--line-soft); }

.ish-project-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }

.ish-project-facts > div { min-width: 0; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); }

.ish-project-facts dt { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: .72rem; font-weight: 700; }

.ish-project-facts dt .msr { color: var(--faint); font-size: 16px; }

.ish-project-facts dd { margin: 4px 0 0; color: var(--ink); font-size: .92rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.ish-project-facts > .ish-project-facts-status { background: color-mix(in srgb, var(--tone) 10%, var(--surface)); }

.ish-project-facts-status dt .msr, .ish-project-facts-status dd { color: var(--tone); }

.ish-project-schedule.is-overdue .ish-project-facts > .ish-project-facts-status { background: var(--error-bg); }

.ish-project-schedule.is-overdue .ish-project-facts-status dt .msr, .ish-project-schedule.is-overdue .ish-project-facts-status dd { color: var(--error); }

.ish-project-schedule-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }

.ish-project-schedule-bar .ish-project-progress { flex: 1; height: 8px; }

.ish-project-schedule-bar b { flex: none; min-width: 40px; color: var(--ink); font-size: .82rem; font-weight: 800; text-align: end; }

.ish-project-schedule.is-overdue .ish-project-progress span { background: var(--error); }

.ish-project-schedule.is-overdue .ish-project-schedule-bar b { color: var(--error); }

/* ── Contacts ────────────────────────────────────────────────────────────── */
.ish-project-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }

.ish-contact { display: flex; min-width: 0; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }

/* One row in every card: role and name on the start side (a long name is cut short), the phone on the
   end side, so the cards keep one height and line up. */
.ish-contact-body { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 12px; }

.ish-contact-name { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }

.ish-contact-body small { color: var(--faint); font-size: .72rem; font-weight: 700; }

.ish-contact-body strong { overflow: hidden; color: var(--ink); font-size: .95rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.ish-contact-body .ish-project-phone, .ish-contact-body .ish-contact-empty { flex: none; margin: 0; align-self: center; }

/* ── Section links ───────────────────────────────────────────────────────── */
.ish-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

.ish-nav-card {
  display: flex; min-width: 0; align-items: center; gap: 13px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.ish-nav-card:hover { border-color: var(--brand); box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; }

.ish-nav-card:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

.ish-nav-card-icon {
  display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--brand-tint); color: var(--brand); font-size: 24px;
}

.ish-nav-card-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }

.ish-nav-card-text strong { color: var(--ink); font-size: .92rem; font-weight: 800; }

.ish-nav-card-text small { color: var(--muted); font-size: .75rem; line-height: 1.45; }

.ish-nav-card-arrow { flex: none; color: var(--faint); font-size: 22px; transition: color .14s ease, transform .14s ease; }

.ish-nav-card:hover .ish-nav-card-arrow { color: var(--brand); transform: translateX(-3px); }

@media (max-width: 620px) {
  .ish-project-hero { padding: 18px 16px 16px; }

  .ish-project-hero-head { flex-wrap: wrap; }

  /* Buttons share the row by their label widths and wrap to a second row rather than wrap their labels. */
  .ish-project-hero-actions { width: 100%; flex-wrap: wrap; }

  .ish-project-hero-actions > * { flex: 1 1 auto; }

  .ish-project-hero-actions .fl-btn { justify-content: center; }

  /* The edit button sits inside its editor's form; it fills the form the way the others fill their slot. */
  .ish-project-hero-actions > form .fl-btn { width: 100%; }

  .ish-project-hero-title h1 { font-size: 1.2rem; }

  .ish-project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  .ish-project-contacts { grid-template-columns: 1fr; }
}

/* ── Delete project dialog ─────────────────────────────────────────────── */
.ish-project-delete-dialog p { margin: 0 0 10px; line-height: 1.7; }

.ish-delete-list { margin: 0 0 10px; padding-inline-start: 18px; color: var(--ink); font-size: .84rem; line-height: 1.8; }