/* =========================================================================
   RequestMe — Request Preview / Approval screen
   The single most important screen in the product. Everything here optimises
   for one outcome: a manager understands and decides in under 30 seconds,
   without leaving the page. Sits on tokens/base/components/motion from the
   website's design system for total brand consistency.
   ========================================================================= */

body { background: var(--bg-subtle); }

/* ---- App topbar (minimal — this is a screen inside the app, not a marketing page) */
.app-topbar {
  position: sticky; top: 0; z-index: 100; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--space-6);
  background: color-mix(in srgb, var(--bg-page) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.app-back { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-s); font-weight: 600; color: var(--text-secondary); }
.app-back:hover { color: var(--text-primary); }
.app-topbar-right { display: flex; align-items: center; gap: var(--space-3); }
.app-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--action-primary-tint); color: var(--action-primary);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* ---- Shell ---------------------------------------------------------------- */
.request-shell { max-width: 1180px; margin-inline: auto; padding: var(--space-6) var(--space-6) var(--space-24); }

.request-titlebar { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.request-titlebar .meta-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-body-s); color: var(--text-secondary); }
.request-titlebar h1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-display-m); line-height: 1.15; }
.request-titlebar-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ---- Business summary strip — the 5-second read ---------------------------- */
.summary-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid var(--card-border); border-radius: var(--radius-m); background: var(--card-bg);
  margin-bottom: var(--space-6); overflow: hidden;
}
.summary-item { padding: var(--space-4) var(--space-5); border-right: 1px solid var(--border-hairline); min-width: 0; }
.summary-item:last-child { border-right: none; }
.summary-item .s-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 6px; }
.summary-item .s-value { font-size: var(--text-body-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-item.emphasis .s-value { font-family: var(--font-serif); font-size: var(--text-heading-m); font-weight: 500; color: var(--action-primary); white-space: normal; }
@media (max-width: 980px) { .summary-strip { grid-template-columns: repeat(3, 1fr); } .summary-item:nth-child(3) { border-right: none; } .summary-item:nth-child(-n+3) { border-bottom: 1px solid var(--border-hairline); } }
@media (max-width: 560px) { .summary-strip { grid-template-columns: repeat(2, 1fr); } .summary-item:nth-child(2n) { border-right: none; } .summary-item:nth-child(-n+4) { border-bottom: 1px solid var(--border-hairline); } }

/* ---- Two-zone grid: content + sticky decision rail -------------------------- */
.request-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; }
.request-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.request-rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--space-5); }

@media (max-width: 980px) {
  .request-grid { grid-template-columns: 1fr; }
  .request-rail { position: static; order: -1; }
}

.rp-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-m); padding: var(--space-6); }
.rp-card h2 { font-size: var(--text-body-l); font-weight: 600; margin-bottom: var(--space-3); }
.rp-card h2:has(+ .rp-card-desc) { margin-bottom: var(--space-1); }
.rp-card .rp-card-desc { color: var(--text-secondary); font-size: var(--text-body-s); margin-bottom: var(--space-4); }

/* ---- Purpose block ------------------------------------------------------------ */
.purpose-text { font-size: var(--text-body); line-height: 1.65; color: var(--text-primary); }

/* ---- Dynamic field rows (read-only form) -------------------------------------- */
.rp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--border-hairline); }
.rp-field-row { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--border-hairline); }
.rp-field-row:nth-child(odd) { border-right: 1px solid var(--border-hairline); padding-left: 0; }
.rp-field-row:nth-child(even) { padding-right: 0; }
.rp-field-icon { width: 32px; height: 32px; border-radius: var(--radius-s); background: var(--bg-fill); color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-field-icon .icon { width: 16px; height: 16px; }
.rp-field-body { min-width: 0; }
.rp-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 3px; }
.rp-field-value { font-size: var(--text-body-s); font-weight: 600; word-break: break-word; }
.rp-chip-set { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rp-chip-set .chip-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); background: var(--action-primary-tint); color: var(--action-primary); }
@media (max-width: 640px) {
  .rp-field-grid { grid-template-columns: 1fr; }
  .rp-field-row:nth-child(odd) { border-right: none; padding-left: 0; }
  .rp-field-row { padding-inline: 0; }
}

/* ---- Attachments ---------------------------------------------------------------- */
.attachment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .attachment-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .attachment-grid { grid-template-columns: 1fr 1fr; } }

.attachment-card {
  border: 1px solid var(--border-hairline); border-radius: var(--radius-m); overflow: hidden; text-align: left;
  background: var(--bg-page); display: flex; flex-direction: column;
}
.attachment-thumb { position: relative; aspect-ratio: 3/4; background: var(--bg-fill); overflow: hidden; }
.attachment-thumb .thumb-overlay {
  position: absolute; inset: 0; background: rgba(11,14,20,0.55); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 180ms var(--ease-standard); color: #fff; gap: var(--space-2); font-size: var(--text-caption); font-weight: 600;
}
.attachment-card:hover .thumb-overlay, .attachment-card:focus-visible .thumb-overlay { opacity: 1; }
.attachment-meta { padding: var(--space-3); border-top: 1px solid var(--border-hairline); }
.attachment-meta .a-name { font-size: var(--text-caption); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta .a-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* Faux document preview (no real files needed — drawn entirely in CSS) */
.doc-page { position: absolute; inset: 10%; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(11,14,20,.12); padding: 10%; }
.doc-page .doc-bar { height: 6px; border-radius: 3px; background: var(--action-primary); width: 40%; margin-bottom: 12%; }
.doc-page .doc-line { height: 4px; border-radius: 2px; background: var(--grey-200); margin-bottom: 8%; }
.doc-page .doc-line.w-80 { width: 80%; } .doc-page .doc-line.w-60 { width: 60%; } .doc-page .doc-line.w-90 { width: 90%; } .doc-page .doc-line.w-40 { width: 40%; }
.doc-page .doc-table { margin-top: 14%; display: flex; flex-direction: column; gap: 10%; }
.doc-page .doc-table-row { display: flex; justify-content: space-between; }
.doc-page .doc-table-row .doc-line { margin-bottom: 0; }
.doc-page .doc-table-row.total .doc-line { background: var(--action-primary); }
.pdf-badge {
  position: absolute; bottom: 8px; left: 8px; background: #d92d20; color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: 0.04em; padding: 2px 6px; border-radius: 3px;
}
.doc-generic { display: flex; align-items: center; justify-content: center; height: 100%; }
.doc-generic .icon { width: 40px; height: 40px; color: var(--text-tertiary); }

/* ---- Approval workflow (rail) ---------------------------------------------------- */
.workflow-list .signature-line:first-child { padding-top: 0; border-top: none; }
.signature-line .sig-status-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--radius-full);
}
.signature-line.is-current { background: var(--action-primary-tint); margin-inline: calc(-1 * var(--space-3)); padding-inline: var(--space-3); border-radius: var(--radius-s); border-top-color: transparent; }
.signature-line.is-current .sig-status-badge { background: var(--action-primary); color: #fff; }
.signature-line.is-signed .sig-status-badge { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.signature-line.is-pending .sig-status-badge { background: var(--status-draft-bg); color: var(--status-draft-fg); }
.sig-timestamp { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ---- Actions (rail) ---------------------------------------------------------------- */
.rail-actions .btn { width: 100%; }
.rail-actions .btn + .btn { margin-top: var(--space-2); }
.action-reject-link { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-tertiary); font-weight: 600; }
.action-reject-link:hover { color: var(--status-rejected-fg); }
.kbd-hint { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); font-size: 11px; color: var(--text-tertiary); }
.kbd-hint kbd { font-family: var(--font-mono); background: var(--bg-fill); border: 1px solid var(--border-hairline); border-radius: 4px; padding: 1px 5px; font-size: 10px; }

.decided-state { text-align: center; padding: var(--space-4) 0; }
.decided-state .icon-tile { margin-inline: auto; width: 48px; height: 48px; border-radius: 50%; }
.decided-state.is-approved .icon-tile { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.decided-state.is-returned .icon-tile { background: var(--status-returned-bg); color: var(--status-returned-fg); }
.decided-state.is-rejected .icon-tile { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.decided-state p { margin-top: var(--space-3); font-size: var(--text-body-s); color: var(--text-secondary); }
.decided-state strong { display: block; font-size: var(--text-body); margin-top: var(--space-3); }

/* ---- History & comments (collapsible) ------------------------------------------------ */
.history-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.history-toggle .icon { color: var(--text-tertiary); transition: transform 220ms var(--ease-standard); }
.history-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.history-body { overflow: hidden; max-height: 0; transition: max-height 320ms var(--ease-standard); }
.history-body-inner { padding-top: var(--space-5); }

.comment-row { display: flex; gap: var(--space-3); padding-block: var(--space-3); }
.comment-row .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--action-primary-tint); color: var(--action-primary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.comment-bubble { background: var(--bg-fill); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); flex: 1; }
.comment-bubble .c-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-caption); margin-bottom: 4px; }
.comment-bubble .c-head strong { font-weight: 700; }
.comment-bubble .c-head span { color: var(--text-tertiary); }
.comment-bubble p { font-size: var(--text-body-s); }
.comment-compose { display: flex; gap: var(--space-3); margin-top: var(--space-4); align-items: flex-start; }
.comment-compose textarea { flex: 1; min-height: 44px; border-radius: var(--radius-s); border: 1px solid var(--border-strong); background: var(--bg-page); padding: var(--space-3); font: inherit; font-size: var(--text-body-s); resize: vertical; }
.comment-compose textarea:focus { border-color: var(--action-primary); }

/* ---- Dialogs (approve / return / reject confirmations) --------------------------------- */
dialog.rp-dialog { border: none; border-radius: var(--radius-l); padding: 0; width: min(440px, 92vw); box-shadow: var(--shadow-elevated); background: var(--card-bg); color: var(--text-primary); }
dialog.rp-dialog::backdrop { background: rgba(11,14,20,0.5); backdrop-filter: blur(2px); }
.rp-dialog-body { padding: var(--space-6); }
.rp-dialog-body h3 { font-size: var(--text-heading-m); margin-bottom: var(--space-2); }
.rp-dialog-body p { color: var(--text-secondary); font-size: var(--text-body-s); }
.rp-dialog-body textarea { width: 100%; margin-top: var(--space-4); min-height: 88px; border-radius: var(--radius-s); border: 1px solid var(--border-strong); padding: var(--space-3); font: inherit; font-size: var(--text-body-s); resize: vertical; }
.rp-dialog-body textarea:focus { border-color: var(--action-primary); }
.rp-dialog-foot { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-hairline); display: flex; justify-content: flex-end; gap: var(--space-3); }
.rp-dialog-foot .btn { min-width: 96px; }

/* Attachment lightbox */
dialog.lightbox-dialog { border: none; border-radius: var(--radius-l); padding: 0; width: min(560px, 94vw); box-shadow: var(--shadow-elevated); background: var(--card-bg); color: var(--text-primary); }
dialog.lightbox-dialog::backdrop { background: rgba(11,14,20,0.66); backdrop-filter: blur(3px); }
.lightbox-head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-hairline); }
.lightbox-head .l-name { font-weight: 600; font-size: var(--text-body-s); }
.lightbox-body { padding: var(--space-6); display: flex; justify-content: center; }
.lightbox-preview { width: 100%; max-width: 340px; aspect-ratio: 3/4; position: relative; background: var(--bg-fill); border-radius: var(--radius-s); overflow: hidden; }
.lightbox-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-hairline); display: flex; justify-content: flex-end; }

/* ---- Sticky mobile decision bar ---------------------------------------------------------- */
.mobile-approval-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: var(--bg-page); border-top: 1px solid var(--border-hairline); box-shadow: 0 -4px 16px rgba(11,14,20,.06);
}
.mobile-approval-bar .btn { flex: 1; }
@media (max-width: 980px) { .mobile-approval-bar.is-active { display: flex; } .request-shell { padding-bottom: 96px; } }

/* ---- Toast --------------------------------------------------------------------------------- */
#rp-toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-s); font-size: var(--text-body-s); font-weight: 500; z-index: 300; max-width: 92vw;
  opacity: 0; pointer-events: none; transition: opacity 220ms, transform 220ms; display: flex; align-items: center; gap: var(--space-2);
}
#rp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
#rp-toast .icon { color: var(--status-approved-fg); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .signature-line, .history-toggle .icon, .attachment-thumb .thumb-overlay { transition: none !important; }
}

/* ---- Disabled buttons (reason required before Return/Reject can submit) ------------------- */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* ---- Pending-decision spinner ---------------------------------------------------------------- */
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-spin { animation: rpSpin 900ms linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .rp-spin { animation-duration: 2000ms; } }