/* Projects list (Projects.razor) and the project editor modal (ProjectEditor/ProjectFields). */

/* ── List panel: heading, new-project button, search and filters ─────────── */
.ish-projects-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }

.ish-projects-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.ish-projects-heading { display: flex; min-width: 0; align-items: center; gap: 14px; }

.ish-projects-heading h1 { margin: 0; color: var(--ink); font-size: 1.35rem; font-weight: 800; line-height: 1.2; }

.ish-projects-heading p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }

.ish-project-new { height: 42px; padding-inline: 16px 20px; border-radius: 8px; font-size: .9rem; box-shadow: 0 4px 12px rgba(3,75,228,.2); }

.ish-project-new .msr { font-size: 20px; }

.ish-projects-tools { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.ish-projects-tools .fl-search { min-width: 0; max-width: none; flex: 1 1 auto; }

.ish-projects-tools .fl-sel { flex: 0 0 200px; }

.ish-projects-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ish-projects-result { flex: none; margin: 0; color: var(--muted); font-size: .78rem; font-weight: 700; }

.ish-project-noresults { min-height: 220px; }

.ish-project-noresults p { margin: 0 0 14px; }

/* ── Project cards ───────────────────────────────────────────────────────── */
.ish-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.ish-project-grid.is-refreshing { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.ish-project-card {
  --tone: var(--brand);
  position: relative; display: flex; min-width: 0; min-height: 188px; flex-direction: column; padding-block: 14px 13px; padding-inline: 18px 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tone) 7%, var(--surface)), var(--surface) 64px);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.ish-project-card:hover { border-color: color-mix(in srgb, var(--tone) 55%, var(--line)); box-shadow: var(--shadow-hover); transform: translateY(-2px); }

.ish-project-card:focus-within { border-color: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); }

.ish-project-cardhead { display: flex; align-items: center; gap: 10px; }

.ish-project-cardicon {
  display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center;
  border-radius: 9px; background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone); font-size: 20px;
}

.ish-project-cardtitle { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 8px; }

.ish-project-cardtitle > a { overflow-wrap: anywhere; color: var(--ink); font-size: .92rem; font-weight: 800; }

.ish-project-cardtitle > a:hover { color: var(--brand); text-decoration: none; }

.ish-project-link:focus-visible { outline: none; }

/* The title link covers the whole card; the footer links sit above it. */
.ish-project-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Owner and guard: one row each, the person on the start side and the number (with its copy button) on the end side. */
.ish-project-cardmeta { display: flex; flex-direction: column; margin-top: 10px; }

.ish-project-cardmeta > div { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px 0; }

.ish-project-cardmeta > div + div { border-top: 1px solid var(--line-soft); }

.ish-project-cardmeta > div > .msr { flex: none; color: var(--faint); font-size: 17px; }

.ish-project-contactname { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }

.ish-project-cardmeta small { color: var(--faint); font-size: .66rem; font-weight: 700; }

.ish-project-cardmeta strong { overflow: hidden; color: var(--ink); font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.ish-project-cardmeta .ish-project-phone { flex: none; margin: 0; align-self: center; }

.ish-project-timeline { margin-top: 12px; }

.ish-project-timeline-text { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 700; }

.ish-project-timeline-text b { color: var(--ink); font-size: .72rem; font-weight: 800; }

.ish-project-dates { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: var(--faint); font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ish-project-timeline.is-overdue .ish-project-timeline-text, .ish-project-timeline.is-overdue b { color: var(--error); }

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

.ish-project-links { position: relative; z-index: 1; display: flex; min-width: 0; align-items: center; gap: 14px; flex-wrap: wrap; }

.ish-project-cardfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line-soft);
}

.ish-project-location, .ish-project-open { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; }

.ish-project-location { color: var(--muted); }

.ish-project-location:hover { color: var(--brand); text-decoration: none; }

.ish-project-location .msr, .ish-project-open .msr { font-size: 17px; }

.ish-project-open { color: var(--brand); }

.ish-project-open:hover { text-decoration: none; }

/* ── Editor modal ────────────────────────────────────────────────────────── */
.fl-modal.ish-project-modal.fl-modal--lg { max-width: 700px; }

.ish-project-modal .ish-modal-form { gap: 0; }

.ish-project-modal .fl-btn--primary:disabled .msr { animation: ish-spin 1s linear infinite; }

.ish-form-section { padding: 18px 0; border-top: 1px solid var(--line-soft); }

.ish-modal-form > .ish-form-section:first-of-type { padding-top: 2px; border-top: 0; }

.ish-modal-form > .ish-form-section:last-of-type { padding-bottom: 0; }

.ish-form-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); font-size: .88rem; font-weight: 800; }

.ish-form-section-title .msr {
  display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--brand-tint); color: var(--brand); font-size: 17px;
}

.ish-form-section textarea.fl-input { min-height: 96px; padding: 10px 12px; resize: vertical; }

.ish-formgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.ish-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.ish-contact-card { display: grid; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface-2); }

.ish-contact-card .fl-input { background: var(--surface); }

.ish-contact-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: .8rem; font-weight: 800; }

.ish-contact-title .msr { color: var(--muted); font-size: 17px; }

.ish-form-required-note { margin-inline-end: auto; color: var(--faint); font-size: .74rem; font-weight: 700; }

@media (max-width: 620px) {
  .ish-projects-panel { padding: 16px; }

  .ish-projects-head { flex-direction: column; align-items: stretch; }

  .ish-project-new { justify-content: center; }

  .ish-projects-tools { flex-direction: column; align-items: stretch; }

  .ish-projects-tools .fl-sel { flex: 0 0 auto; }

  .ish-projects-filterbar { flex-direction: column; align-items: stretch; }

  .ish-project-grid { grid-template-columns: minmax(0, 1fr); }

  .ish-formgrid--3, .ish-contact-grid { grid-template-columns: 1fr; }

  .ish-form-required-note { display: none; }
}