/* Owner requests (OwnerRequests.razor): completion bar and the per-row status menu. */
.ish-request-progress { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

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

.ish-request-progress .ish-project-progress span { background: var(--success); }

.ish-request-progress > span { flex: none; color: var(--muted); font-size: .8rem; font-weight: 700; }

.ish-request-progress b { color: var(--ink); font-weight: 800; }

/* ── Status badge that opens a menu of statuses ──────────────────────────── */
.ish-request-status { position: relative; }

.ish-status-trigger { border: 0; font: inherit; font-size: .69rem; font-weight: 800; cursor: pointer; transition: box-shadow .12s ease; }

.ish-status-trigger::after { content: ""; width: 0; height: 0; margin-inline-start: 5px; border-inline: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .7; }

.ish-status-trigger:hover:not(:disabled), .ish-status-trigger[aria-expanded="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }

.ish-status-trigger:disabled { cursor: default; }

.ish-status-backdrop { position: fixed; inset: 0; z-index: 20; padding: 0; border: 0; background: transparent; cursor: default; }

.ish-status-menu { position: absolute; top: calc(100% - 4px); left: 50%; z-index: 21; display: flex; min-width: 150px; flex-direction: column; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(-50%); }

.ish-status-option { --tone: var(--muted); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; text-align: start; cursor: pointer; }

.ish-status-option i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--tone); }

.ish-status-option:hover:not(:disabled) { background: var(--surface-2); }

.ish-status-option[aria-checked="true"] { background: color-mix(in srgb, var(--tone) 12%, var(--surface)); }

.ish-status-option[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--tone); }

/* Phones: request rows become cards: description and actions, then status and date. */
@media (max-width: 620px) {
  .ish-request-grid .fl-table tbody tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "desc desc actions" "status date date";
    gap: 8px 10px;
  }

  .ish-request-grid .fl-table tbody td:nth-child(1) { grid-area: date; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

  .ish-request-grid .fl-table tbody td:nth-child(2) { grid-area: status; }

  .ish-request-grid .fl-table tbody td:nth-child(3) { grid-area: desc; align-self: start; line-height: 1.5; }

  .ish-request-grid .fl-table tbody td:nth-child(4) { grid-area: actions; align-self: start; }

  .ish-request-grid .ish-status-menu { left: auto; inset-inline-start: 0; transform: none; }
}