/* ==========================================================================
   sheet.css — statement / report sheet styles
   Shared by the on-screen preview and the printed page.
   ========================================================================== */

.paper {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: clamp(18px, 3vw, 34px);
  overflow-x: auto;
}

.sheet { width: 100%; max-width: 1040px; margin: 0 auto; color: #1f2a2e; font-size: 12.4px; line-height: 1.5; }
.sheet + .sheet { margin-top: 30px; }

.sheet-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  border-bottom: 2.5px solid #0b8a5f; padding-bottom: 12px; margin-bottom: 16px;
}
.sheet-brand { display: flex; gap: 12px; align-items: flex-start; }
.sheet-brand .logo {
  width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #0e9f6e, #0d9488);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 22px; flex: 0 0 auto;
}
.sheet-brand h1 { font-size: 17.5px; letter-spacing: -.02em; margin: 0; color: #07372c; }
.sheet-brand .sub { font-size: 10.6px; color: #4a5b62; margin-top: 3px; line-height: 1.6; }
.sheet-head-right { text-align: right; }
.sheet-doc { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #065f46; }
.sheet-head-right .meta { font-size: 10.6px; color: #4a5b62; margin-top: 4px; line-height: 1.65; }

.sheet-grid { display: flex; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.sheet-box { flex: 1 1 240px; border: 1px solid #cfd8d6; border-radius: 9px; padding: 11px 13px; background: #fbfdfc; }
.sheet-box h4 { margin: 0 0 6px; font-size: 9.8px; text-transform: uppercase; letter-spacing: .1em; color: #0b8a5f; }
.sheet-box .kv { font-size: 11.6px; line-height: 1.7; }
.sheet-box .kv b { font-weight: 700; color: #16323a; }

.sheet h3 {
  font-size: 11.6px; margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .09em;
  color: #0b8a5f; border-bottom: 1px solid #d7e0de; padding-bottom: 5px;
}

table.sheet-table { width: 100%; border-collapse: collapse; font-size: 11px; }
table.sheet-table th {
  background: #eef5f3; color: #10332a; text-align: left; font-weight: 700;
  padding: 7px 8px; border: 1px solid #cfd8d6; font-size: 9.6px;
  text-transform: uppercase; letter-spacing: .05em;
}
table.sheet-table td { padding: 7px 8px; border: 1px solid #dfe5e4; vertical-align: top; }
table.sheet-table tbody tr:nth-child(even) td { background: #fafcfb; }
table.sheet-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sheet-table tfoot td { font-weight: 800; background: #eef5f3; border: 1px solid #cfd8d6; }
table.sheet-table .strong { font-weight: 700; color: #16323a; }
table.sheet-table .dim { color: #6a7a80; }

.sheet-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.sheet-summary .s { border: 1px solid #cfd8d6; border-radius: 9px; padding: 9px 11px; background: #fff; }
.sheet-summary .s label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #5b6663; font-weight: 700; }
.sheet-summary .s b { font-size: 13.5px; letter-spacing: -.02em; }
.sheet-summary .s.green { background: #eafaf3; border-color: #b6ead1; }
.sheet-summary .s.green b { color: #067a52; }
.sheet-summary .s.red { background: #fff1f4; border-color: #f6c3cd; }
.sheet-summary .s.red b { color: #be123c; }
.sheet-summary .s.amber { background: #fff8ed; border-color: #f6dcb2; }
.sheet-summary .s.amber b { color: #b45309; }

.sheet-note {
  margin-top: 14px; border: 1px dashed #b9c6c3; border-radius: 9px;
  padding: 9px 12px; font-size: 10.8px; color: #33474f; line-height: 1.65; background: #fbfdfc;
}
.sheet-note b { color: #065f46; }

.sign-row { display: flex; justify-content: space-between; gap: 34px; margin-top: 40px; }
.sign { flex: 1 1 0; max-width: 260px; }
.sign .line { border-top: 1px solid #4a5b62; margin-bottom: 5px; }
.sign span { font-size: 10.2px; color: #4a5b62; }

.sheet-foot {
  margin-top: 18px; padding-top: 8px; border-top: 1px solid #dfe5e4;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 9.4px; color: #5b6663;
}

.status-tag {
  display: inline-block; padding: 1.5px 7px; border-radius: 5px; font-size: 9.2px; font-weight: 800;
  border: 1px solid #b9c6c3; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.status-paid { background: #e3f8ee; border-color: #8fd9b9; color: #065f46; }
.status-partial { background: #fff4e0; border-color: #f5ce93; color: #92400e; }
.status-unpaid { background: #ffe9ed; border-color: #f4a9b8; color: #9f1239; }
.status-overdue { background: #fdeaee; border-color: #ef8ba2; color: #881337; }

.sheet .empty-line { padding: 14px; text-align: center; color: #6a7a80; font-size: 11px; border: 1px dashed #dfe5e4; border-radius: 8px; }