/* Reports page: the controls use the site theme; the report sheet itself is always white (it is a PDF). */
.rp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 900px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-panel { background: #141416; border: 1px solid var(--t-input, #5c0f14); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.rp-panel h3 { margin: 0; font-size: 20px; }
.rp-label { font-size: 13px; color: #aaa; font-weight: 600; margin-bottom: -6px; }
.rp-tabs, .rp-months, .rp-years { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-tabs button, .rp-months button, .rp-years button {
    min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--t-dark, #7a0c14);
    background: transparent; color: #ddd; font: 600 15px system-ui, sans-serif; cursor: pointer;
}
.rp-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rp-months button { padding: 0; border-radius: 12px; }
@media (max-width: 520px) { .rp-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rp-tabs button:hover:not(:disabled), .rp-months button:hover:not(:disabled), .rp-years button:hover:not(:disabled) { border-color: var(--t-base, #e01b24); color: #fff; }
.rp-tabs button.on, .rp-months button.on, .rp-years button.on { background: var(--t-base, #e01b24); border-color: var(--t-base, #e01b24); color: #fff; }
.rp-months button:disabled { opacity: .3; cursor: default; }
.rp-pick { min-height: 96px; display: flex; flex-direction: column; gap: 10px; }
.rp-pick label { font-size: 13px; color: #aaa; font-weight: 600; }
.rp-pick input[type=date] { min-height: 46px; width: 240px; max-width: 100%; box-sizing: border-box; padding: 0 12px; border-radius: 12px;
    border: 1px solid var(--t-input, #5c0f14); background: #0b0b0c; color: #fff; font: 16px system-ui, sans-serif; color-scheme: dark; }
.rp-pick .hint { font-size: 14px; color: #cfcfcf; padding: 14px 16px; border: 1px dashed #444; border-radius: 12px; line-height: 1.5; }
.rp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 15px; color: #eee; }
.rp-opts label { display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
.rp-opts input { width: 18px; height: 18px; accent-color: var(--t-base, #e01b24); }
.rp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.rp-primary, .rp-ghost { min-height: 50px; padding: 0 24px; border-radius: 14px; font: 600 16px system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.rp-primary { background: var(--t-base, #e01b24); border: 0; color: #fff; }
.rp-ghost { background: transparent; border: 1px solid #555; color: #eee; }
.rp-primary:hover { filter: brightness(1.12); }
.rp-ghost:hover { border-color: var(--t-base, #e01b24); }
.rp-primary:disabled, .rp-ghost:disabled { opacity: .5; cursor: default; }
.rp-sel { font-size: 14px; color: #aaa; }
.rp-sel b { color: #fff; }
.rp-msg { min-height: 20px; margin: 0; font-size: 14px; color: #ffb703; }
.rp-msg.ok { color: #4cff7a; }
.rp-saved { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 520px; overflow: auto; }
.rp-saved li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #2a2a2e; border-radius: 14px; background: #0f0f11; }
.rp-saved .ic { flex: none; width: 42px; height: 42px; border-radius: 11px; background: #2a0b0e; color: #ff5a60; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.rp-saved .tx { flex: 1; min-width: 0; }
.rp-saved .tx b { display: block; font-size: 16px; color: #fff; }
.rp-saved .tx span { font-size: 13px; color: #aaa; }
.rp-saved button { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #444; background: transparent; color: #eee; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.rp-saved button:hover { border-color: var(--t-base, #e01b24); }
.rp-saved button.del { width: 40px; padding: 0; color: #aaa; }
.rp-empty { color: #aaa; font-size: 14px; padding: 18px; border: 1px dashed #444; border-radius: 12px; }
.rp-note { margin: auto 0 0; font-size: 13px; color: #aaa; line-height: 1.6; border-top: 1px solid #2a2a2e; padding-top: 14px; }

/* preview */
.rp-preview { margin-top: 22px; background: #141416; border: 1px solid var(--t-input, #5c0f14); border-radius: 18px; padding: 18px; }
.rp-prevbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #fff; }
.rp-prevbar span { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-view { overflow-x: auto; background: #2a2a2e; border-radius: 12px; padding: 18px; }
#rpPages { width: 794px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* the sheet (A4 at 96dpi = 794 x 1123) */
.rp-page { width: 794px; height: 1123px; box-sizing: border-box; background: #fff; color: #16161a; font-family: 'DM Sans', system-ui, sans-serif;
    display: flex; flex-direction: column; overflow: hidden; flex: none; }
.rp-page * { box-sizing: border-box; }
.rp-top { background: #0b0b0c; color: #fff; position: relative; flex: none; }
.rp-top::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 8px; background: #e01b24; }
.rp-top.big { padding: 38px 48px 28px; }
.rp-top.small { padding: 24px 48px 16px; display: flex; justify-content: space-between; align-items: center; }
.rp-kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #ff7a80; font-weight: 700; }
.rp-title { font-family: 'Sora', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin-top: 8px; }
.rp-sub { font-size: 15px; color: #c4c4cc; margin-top: 6px; }
.rp-who { text-align: right; font-size: 14px; color: #c4c4cc; line-height: 1.5; }
.rp-who b { color: #fff; font-size: 16px; }
.rp-body { flex: 1; min-height: 0; overflow: hidden; padding: 26px 48px 0; display: flex; flex-direction: column; gap: 24px; }
.rp-foot { flex: none; margin: 0 48px; padding: 12px 0 22px; border-top: 1px solid #e4e4e7; display: flex; justify-content: space-between; font-size: 12px; color: #71717a; }
.rp-h { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 600; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rp-h small { font: 400 13px 'DM Sans', sans-serif; color: #52525b; }
.rp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rp-kpi { border: 1px solid #e4e4e7; border-radius: 14px; padding: 12px 16px; }
.rp-kpi.hl { border-top: 4px solid #e01b24; }
.rp-kpi .k { font-size: 13px; color: #52525b; font-weight: 500; }
.rp-kpi .v { font-family: 'Sora', sans-serif; font-size: 24px; font-weight: 700; margin-top: 2px; }
.rp-kpi .n { font-size: 13px; color: #52525b; margin-top: 2px; }
.rp-up { color: #15803d !important; font-weight: 700; }
.rp-down { color: #b91c1c !important; font-weight: 700; }
.rp-tasks { display: grid; grid-template-columns: 150px minmax(0, 1fr) 185px; align-items: center; gap: 9px 14px; font-size: 14px; }
.rp-tasks .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-track { height: 16px; background: #f4f4f5; border-radius: 8px; }
.rp-fill { height: 16px; border-radius: 8px; }
.rp-tasks .vl { text-align: right; white-space: nowrap; }
.rp-page .rp-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; background: transparent !important; border: 0 !important; margin: 0; box-shadow: none; }
.rp-page .rp-tbl th, .rp-page .rp-tbl td { background: transparent !important; color: #16161a; border: 0 !important; border-radius: 0; text-shadow: none; text-transform: none; letter-spacing: 0; font-family: 'DM Sans', system-ui, sans-serif; }
.rp-page .rp-tbl th { font-size: 11.5px; font-weight: 700; color: #52525b; text-align: right; padding: 7px 4px; border-bottom: 2px solid #16161a !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-page .rp-tbl td { font-size: 13px; text-align: right; padding: 6px 4px; border-bottom: 1px solid #e4e4e7 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-page .rp-tbl th:first-child, .rp-page .rp-tbl td:first-child { text-align: left; font-weight: 600; width: 74px; }
.rp-page .rp-tbl tr.tot td { font-weight: 700; border-bottom: 0 !important; border-top: 2px solid #16161a !important; background: #fafafa !important; }
.rp-page .rp-tbl td.rp-up { color: #15803d; font-weight: 700; }
.rp-page .rp-tbl td.rp-down { color: #b91c1c; font-weight: 700; }
.rp-ins { background: #fff5f5; border: 1px solid #fecaca; border-radius: 16px; padding: 16px 20px; }
.rp-ins ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.rp-heat { display: grid; grid-template-columns: 34px repeat(31, minmax(0, 1fr)); gap: 3px; align-items: center; font-size: 11px; color: #52525b; }
.rp-heat i { display: block; height: 16px; border-radius: 3px; }
.rp-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-act { border: 1px solid #e4e4e7; border-radius: 12px; padding: 10px 14px; font-size: 14px; }
.rp-act b { display: flex; justify-content: space-between; margin-bottom: 4px; }
.rp-act div { color: #3f3f46; line-height: 1.5; }
.rp-badge { margin-top: 14px; display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #ff7a80; color: #ff9aa0; border-radius: 999px; padding: 3px 12px; }
.rp-empty-rep { padding: 40px 0; text-align: center; color: #52525b; font-size: 16px; }