<!DOCTYPE html>
<html lang="en" class="theme-light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FIN-042: Audited financials FY2024 — Dealspace</title>
  <link rel="stylesheet" href="../static/themes.css">
  <style>
    /* Page-specific layout */
    .page-layout {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .main-content {
      flex: 1;
      padding: var(--space-lg);
    }
    
    /* Back link */
    .back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--text-sm);
      color: var(--color-text-link);
      text-decoration: none;
      margin-bottom: var(--space-lg);
    }
    
    .back-link:hover {
      color: var(--color-text-link-hover);
    }
    
    /* Request header */
    .request-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: var(--space-lg);
      padding-bottom: var(--space-lg);
      border-bottom: 1px solid var(--color-border-primary);
      margin-bottom: var(--space-lg);
    }
    
    .request-header-main {
      flex: 1;
    }
    
    .request-ref-row {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-sm);
    }
    
    .request-ref {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-text-secondary);
      font-family: var(--font-mono);
    }
    
    .request-title {
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--color-text-primary);
      margin: 0 0 var(--space-sm) 0;
    }
    
    .request-meta {
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
    }
    
    .request-priority {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    
    .priority-dot {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: var(--radius-full);
    }
    
    .priority-dot.high { background: var(--color-priority-high); }
    .priority-dot.normal { background: var(--color-priority-normal); }
    .priority-dot.low { background: var(--color-priority-low); }
    
    .priority-label {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-primary);
    }
    
    /* Routing section */
    .section-title {
      font-size: var(--text-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
      margin-bottom: var(--space-md);
    }
    
    .routing-section {
      margin-bottom: var(--space-xl);
    }
    
    .routing-box {
      padding: var(--space-lg);
      background: var(--color-bg-secondary);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-lg);
    }
    
    .routing-chain {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex-wrap: wrap;
      margin-bottom: var(--space-lg);
    }
    
    .routing-step {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
    }
    
    .routing-step.current {
      padding: var(--space-xs) var(--space-sm);
      background: var(--color-accent-light);
      color: var(--color-accent);
      font-weight: 600;
      border-radius: var(--radius-md);
    }
    
    .routing-arrow {
      color: var(--color-text-tertiary);
    }
    
    .routing-return {
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-border-secondary);
    }
    
    .routing-return strong {
      color: var(--color-text-primary);
    }
    
    /* Actions bar */
    .actions-bar {
      display: flex;
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    
    /* Thread section */
    .thread-section {
      margin-bottom: var(--space-xl);
    }
    
    .thread-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }
    
    /* Response section */
    .response-section {
      margin-bottom: var(--space-xl);
    }
    
    .response-box {
      padding: var(--space-lg);
      background: var(--color-card-bg);
      border: 1px solid var(--color-card-border);
      border-radius: var(--radius-lg);
    }
    
    .response-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: var(--space-md);
      padding-top: var(--space-md);
      border-top: 1px solid var(--color-border-secondary);
    }
    
    .response-tools {
      display: flex;
      gap: var(--space-sm);
    }
    
    .response-submit {
      display: flex;
      gap: var(--space-sm);
    }
    
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-md);
      background: var(--color-bg-secondary);
      color: var(--color-text-secondary);
      cursor: pointer;
      font-size: var(--text-lg);
    }
    
    .icon-btn:hover {
      background: var(--color-bg-tertiary);
      color: var(--color-text-primary);
    }
    
    /* Global nav area */
    .global-nav {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      margin-left: auto;
    }
    
    .inbox-link {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-inverse);
      background: var(--color-accent);
      border-radius: var(--radius-md);
      text-decoration: none;
    }
    
    .user-menu {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    
    .avatar {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      background: var(--color-bg-tertiary);
    }
    
    .user-name {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-header-text);
    }
    
    /* Theme switcher (demo only) */
    .theme-switcher {
      position: fixed;
      bottom: var(--space-lg);
      right: var(--space-lg);
      display: flex;
      gap: var(--space-sm);
      padding: var(--space-sm);
      background: var(--color-card-bg);
      border: 1px solid var(--color-card-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }
    
    .theme-switcher button {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--text-sm);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-md);
      background: var(--color-bg-secondary);
      color: var(--color-text-primary);
      cursor: pointer;
    }
    
    .theme-switcher button:hover {
      background: var(--color-bg-tertiary);
    }
    
    /* Two-column layout on larger screens */
    @media (min-width: 1024px) {
      .request-content {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--space-xl);
      }
      
      .request-main {
        order: 1;
      }
      
      .request-sidebar {
        order: 2;
      }
    }
    
    /* Sidebar info card */
    .info-card {
      padding: var(--space-lg);
      background: var(--color-bg-secondary);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-lg);
      margin-bottom: var(--space-lg);
    }
    
    .info-card-title {
      font-size: var(--text-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
      margin-bottom: var(--space-md);
    }
    
    .info-row {
      display: flex;
      justify-content: space-between;
      padding: var(--space-sm) 0;
      border-bottom: 1px solid var(--color-border-secondary);
    }
    
    .info-row:last-child {
      border-bottom: none;
    }
    
    .info-label {
      font-size: var(--text-sm);
      color: var(--color-text-secondary);
    }
    
    .info-value {
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-text-primary);
    }
    
    .info-value.overdue {
      color: var(--color-error);
    }
  </style>
</head>
<body>
  <div class="page-layout">
    <!-- Global Header -->
    <header class="global-header">
      <div class="logo">Dealspace</div>
      
      <select class="project-select" aria-label="Select project">
        <option selected>Project Alpha — TargetCo Acquisition</option>
        <option>Project Beta — MergeCo Deal</option>
      </select>
      
      <nav class="global-nav">
        <a href="/inbox" class="inbox-link">
          Inbox
          <span class="badge">3</span>
        </a>
        <div class="user-menu">
          <div class="avatar" role="img" aria-label="User avatar"></div>
          <span class="user-name">S. Johnson</span>
        </div>
      </nav>
    </header>
    
    <!-- Main Content -->
    <main class="main-content container">
      <!-- Back navigation -->
      <a href="/inbox" class="back-link">
        ← Back to Inbox
      </a>
      
      <!-- Request header -->
      <header class="request-header">
        <div class="request-header-main">
          <div class="request-ref-row">
            <span class="request-ref">FIN-042</span>
            <span class="status-badge assigned">Assigned</span>
          </div>
          <h1 class="request-title">Audited financials FY2024</h1>
          <p class="request-meta">Project Alpha • Finance • Due: March 15, 2026</p>
        </div>
        <div class="request-priority">
          <span class="priority-dot high" aria-hidden="true"></span>
          <span class="priority-label">High Priority</span>
        </div>
      </header>
      
      <div class="request-content">
        <div class="request-main">
          <!-- Routing chain -->
          <section class="routing-section">
            <h2 class="section-title">Routing</h2>
            <div class="routing-box">
              <div class="routing-chain" role="navigation" aria-label="Request routing chain">
                <span class="routing-step">
                  Acme Capital (Buyer)
                </span>
                <span class="routing-arrow" aria-hidden="true">→</span>
                <span class="routing-step">
                  J. Smith (IB)
                </span>
                <span class="routing-arrow" aria-hidden="true">→</span>
                <span class="routing-step">
                  M. Chen (CFO)
                </span>
                <span class="routing-arrow" aria-hidden="true">→</span>
                <span class="routing-step current">
                  ★ You
                </span>
              </div>
              <div class="routing-return">
                When done, returns to: <strong>M. Chen (CFO)</strong>
              </div>
              <div class="actions-bar">
                <button class="btn btn-primary">Mark Done</button>
                <button class="btn btn-secondary">Forward</button>
              </div>
            </div>
          </section>
          
          <!-- Thread -->
          <section class="thread-section">
            <h2 class="section-title">Thread</h2>
            <div class="thread-list">
              <!-- Message 1: Original request -->
              <article class="thread-message">
                <header class="thread-message-header">
                  <span class="thread-message-author">J. Smith (IB)</span>
                  <time class="thread-message-time">Feb 25, 2026, 10:30 AM</time>
                </header>
                <div class="thread-message-body">
                  <p>Please provide audited financial statements for FY2024.</p>
                  <p>We need the following documents:</p>
                  <ul>
                    <li>Income statement (P&L)</li>
                    <li>Balance sheet</li>
                    <li>Cash flow statement</li>
                    <li>Auditor's opinion letter</li>
                  </ul>
                  <p>Please ensure these are the final audited versions, not draft.</p>
                </div>
              </article>
              
              <!-- Message 2: CFO forwarding -->
              <article class="thread-message">
                <header class="thread-message-header">
                  <span class="thread-message-author">M. Chen (CFO)</span>
                  <time class="thread-message-time">Feb 26, 2026, 2:15 PM</time>
                </header>
                <div class="thread-message-body">
                  <p>@accountant Can you pull these from the ERP? The audit was finalized last month.</p>
                  <p>Attaching last year's format for reference so we maintain consistency.</p>
                </div>
                <a href="#" class="thread-message-attachment">
                  📎 fy2023-financials-format.xlsx
                </a>
              </article>
              
              <!-- Message 3: Prior update -->
              <article class="thread-message">
                <header class="thread-message-header">
                  <span class="thread-message-author">S. Johnson (You)</span>
                  <time class="thread-message-time">Feb 27, 2026, 9:45 AM</time>
                </header>
                <div class="thread-message-body">
                  <p>On it. Just waiting for the auditor to send the final signed opinion letter. Should have everything by EOD Thursday.</p>
                </div>
              </article>
            </div>
          </section>
          
          <!-- Response box -->
          <section class="response-section">
            <h2 class="section-title">Your Response</h2>
            <div class="response-box">
              <textarea 
                class="textarea" 
                placeholder="Write a message or upload files..."
                aria-label="Response message"
              ></textarea>
              <div class="response-actions">
                <div class="response-tools">
                  <button class="icon-btn" title="Attach file" aria-label="Attach file">
                    📎
                  </button>
                  <button class="icon-btn" title="Format text" aria-label="Format text">
                    𝐁
                  </button>
                </div>
                <div class="response-submit">
                  <button class="btn btn-secondary">Save Draft</button>
                  <button class="btn btn-primary">Send & Mark Done</button>
                </div>
              </div>
            </div>
          </section>
        </div>
        
        <aside class="request-sidebar">
          <!-- Request details card -->
          <div class="info-card">
            <h3 class="info-card-title">Details</h3>
            <div class="info-row">
              <span class="info-label">Status</span>
              <span class="status-badge assigned">Assigned</span>
            </div>
            <div class="info-row">
              <span class="info-label">Priority</span>
              <span class="info-value">High</span>
            </div>
            <div class="info-row">
              <span class="info-label">Due Date</span>
              <span class="info-value overdue">Mar 15, 2026 (Overdue)</span>
            </div>
            <div class="info-row">
              <span class="info-label">Workstream</span>
              <span class="info-value">Finance</span>
            </div>
            <div class="info-row">
              <span class="info-label">Created</span>
              <span class="info-value">Feb 25, 2026</span>
            </div>
            <div class="info-row">
              <span class="info-label">Assigned to</span>
              <span class="info-value">S. Johnson</span>
            </div>
          </div>
          
          <!-- Related requests card -->
          <div class="info-card">
            <h3 class="info-card-title">Related Requests</h3>
            <div style="padding: var(--space-sm) 0;">
              <a href="#" style="font-size: var(--text-sm); color: var(--color-text-link); text-decoration: none;">
                FIN-041 — Audited financials FY2023
              </a>
              <span class="status-badge published" style="margin-left: var(--space-sm);">Published</span>
            </div>
            <div style="padding: var(--space-sm) 0;">
              <a href="#" style="font-size: var(--text-sm); color: var(--color-text-link); text-decoration: none;">
                FIN-045 — Revenue recognition policy
              </a>
              <span class="status-badge assigned" style="margin-left: var(--space-sm);">Assigned</span>
            </div>
          </div>
        </aside>
      </div>
    </main>
  </div>
  
  <!-- Theme Switcher (demo/testing only) -->
  <div class="theme-switcher" aria-label="Theme switcher">
    <button onclick="document.documentElement.className='theme-light'">Light</button>
    <button onclick="document.documentElement.className='theme-dark'">Dark</button>
    <button onclick="document.documentElement.className='theme-contrast'">Contrast</button>
  </div>
</body>
</html>
