{% extends "layout.html" %}
{% block content %}

<style>
  /* Tighter top margin to shift content higher on page */
  @page { size: A4 portrait; margin: 0.35in 0.5in 0.5in 0.5in; }
  html, body { background: #fff; }

  /* Hide base layout chrome during print */
  @media print {
    body * { visibility: hidden !important; }
    .print-root, .print-root * { visibility: visible !important; }
    .print-root { position: static !important; width: auto !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; }
  }

  .print-root { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

  .title { font-weight: 700; font-size: 18px; text-align: center; margin: 0 0 6px 0; }

  .topline { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
  .topline .lbl { font-weight: 700; }

  .summary { display: flex; gap: 16px; margin: 4px 0 10px 0; flex-wrap: wrap; }
  .summary strong { font-weight: 700; }

  .table-wrap { width: 100% !important; }
  table.print-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.print-table thead th { text-align: left; border-bottom: 2px solid #333; padding: 6px 8px; }
  table.print-table tbody td { padding: 6px 8px; border-bottom: 1px solid #ddd; }
  table.print-table tbody tr:nth-child(even) td { background: #fafafa; }
  .num { text-align: right; }
  .center { text-align: center; }
  .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

  .footer { margin-top: 8px; font-size: 11px; color: #555; }

  .panel, .panel-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
</style>

<div class="print-root">
  <div class="title">PTO Ledger</div>

  <div class="topline">
    <div><span class="lbl">Employee:</span> {{ employee.name }}</div>
    <div><span class="lbl">Year:</span> {{ selected_year }}</div>
  </div>

  <div class="summary">
    <div><strong>Starting balance:</strong> {{ starting_balance|fmt2 }}</div>
    <div><strong>Remaining:</strong> {{ remaining_balance|fmt2 }}</div>
  </div>

  <div class="table-wrap">
    <table class="print-table">
      <thead>
        <tr>
          <th class="center" style="width:130px;">Date</th>
          <th>Description</th>
          <th class="num" style="width:120px;">Hours (±)</th>
          <th class="num" style="width:140px;">Running Balance</th>
        </tr>
      </thead>
      <tbody>
        {% for row in ledger %}
          <tr>
            <td class="mono center">{% if row.date %}{{ row.date.strftime("%b %d, %Y") }}{% endif %}</td>
            <td>{% if row.kind == 'start' %}<em>{{ row.desc }}</em>{% else %}{{ row.desc }}{% endif %}</td>
            <td class="num mono">{% if row.delta != '' %}{{ row.delta|fmt2 }}{% endif %}</td>
            <td class="num mono">{{ row.balance|fmt2 }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="footer">
    Generated on {{ (request.state.now or None) and request.state.now.strftime("%b %d, %Y %I:%M %p") or "" }}
  </div>
</div>

<script>
  window.addEventListener('load', function () {
    setTimeout(function () { window.print(); }, 150);
  });
  window.addEventListener('afterprint', function () { window.close(); });
</script>
{% endblock %}