/* Monthly SLA report (view/report.templ). The report is a light "paper"
   document wherever it appears: inside the dark app (/reports), on a
   client's share link (/s/{token}/reports/…) and printed to PDF. Loaded
   by the app shell and by the public report page. */

.report-doc{
  --rd-ink:#141726;
  --rd-ink-2:#4A5068;
  --rd-ink-3:#6B7189;
  --rd-line:#E3E5EE;
  --rd-soft:#F5F6FA;
  --rd-up:#14855E;
  --rd-up-soft:#E3F4EC;
  --rd-down:#C8363B;
  --rd-down-soft:#FBE7E8;
  --rd-accent:#5B5FEF;
  background:#FFFFFF; color:var(--rd-ink);
  font-family:'Prompt','Noto Sans Thai','Plus Jakarta Sans','Inter',-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.55;
  border-radius:14px; padding:36px 40px; max-width:1040px; margin:0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.18);
}
.report-doc *{ box-sizing:border-box; }
.report-doc a{ color:var(--rd-accent); }

.rd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:2px solid var(--rd-ink); }
.rd-kicker{ margin:0; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--rd-ink-3); }
.rd-title{ margin:4px 0 0; font-size:26px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.rd-month{ margin:2px 0 0; font-size:16px; font-weight:600; color:var(--rd-ink-2); }
.rd-brand{ text-align:right; }
.rd-logo{ height:28px; width:auto; }
.rd-asof{ margin:6px 0 0; font-size:12px; color:var(--rd-ink-3); }
.rd-empty{ margin:28px 0 8px; color:var(--rd-ink-2); }

.rd-kpis{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:12px; margin:24px 0 8px; }
.rd-kpi{ background:var(--rd-soft); border:1px solid var(--rd-line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rd-kpi-label{ font-size:12px; font-weight:600; color:var(--rd-ink-3); }
.rd-kpi-value{ font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; overflow-wrap:anywhere; }
.rd-kpi-note{ font-size:12.5px; font-weight:600; }
.rd-kpi-main.is-met{ background:var(--rd-up-soft); border-color:#B9E2CF; }
.rd-kpi-main.is-met .rd-kpi-value, .rd-kpi-main.is-met .rd-kpi-note{ color:var(--rd-up); }
.rd-kpi-main.is-missed{ background:var(--rd-down-soft); border-color:#F0C2C4; }
.rd-kpi-main.is-missed .rd-kpi-value, .rd-kpi-main.is-missed .rd-kpi-note{ color:var(--rd-down); }

.rd-section{ margin-top:28px; break-inside:avoid; }
.rd-h2{ margin:0 0 10px; font-size:15px; font-weight:700; }
.rd-muted{ margin:0; color:var(--rd-ink-3); }

.rd-table-wrap{ overflow-x:auto; }
.rd-table{ width:100%; border-collapse:collapse; font-size:13px; }
.rd-table th, .rd-table td{ padding:9px 10px; border-bottom:1px solid var(--rd-line); text-align:left; vertical-align:top; }
.rd-table thead th{ font-size:11.5px; font-weight:600; color:var(--rd-ink-3); border-bottom:1.5px solid var(--rd-ink-3); white-space:nowrap; }
.rd-table tbody th{ font-weight:600; }
.rd-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rd-strong{ font-weight:700; }
.rd-table .is-missed{ color:var(--rd-down); }
.rd-site{ display:block; overflow-wrap:anywhere; }
.rd-url{ display:block; font-size:12px; font-weight:400; color:var(--rd-ink-3); overflow-wrap:anywhere; }
.rd-incidents td:last-child{ min-width:180px; }
.rd-ongoing{ display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; font-size:11px; font-weight:600; background:var(--rd-down-soft); color:var(--rd-down); }

.rd-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* Day-by-day strip: one square per day, shaded by downtime. */
.rd-days{ display:grid; grid-template-columns:repeat(auto-fill, minmax(28px, 1fr)); gap:4px; }
.rd-day{ aspect-ratio:1; border-radius:5px; display:flex; align-items:center; justify-content:center; }
.rd-day-n{ font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.lv0{ background:var(--rd-up-soft); color:var(--rd-up); }
.lv1{ background:#FCEBC7; color:#8A5A00; }
.lv2{ background:#F6B9AE; color:#7A1E15; }
.lv3{ background:var(--rd-down); color:#FFFFFF; }
.lv-nd{ background:var(--rd-soft); color:#A3A8BC; border:1px dashed var(--rd-line); }
.rd-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:10px 0 0; font-size:11.5px; color:var(--rd-ink-3); }
.rd-sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px; }

/* Weekday x hour heatmap of downtime. */
.rd-heat{ display:grid; grid-template-columns:30px repeat(24, minmax(0, 1fr)); gap:2px; align-items:center; }
.rd-heat-h{ font-size:10px; color:var(--rd-ink-3); }
.rd-heat-d{ font-size:11px; font-weight:600; color:var(--rd-ink-2); }
.rd-cell{ aspect-ratio:1; border-radius:2px; min-width:0; }
.rd-cell.lv0{ background:var(--rd-soft); }

.rd-notes{ margin-top:30px; padding-top:14px; border-top:1px solid var(--rd-line); font-size:11.5px; color:var(--rd-ink-3); }
.rd-notes p{ margin:0 0 4px; }
.rd-powered{ margin-top:10px !important; font-weight:600; }

/* ---- In the app (/reports) ---- */
.rep-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; margin-bottom:12px; }
.rep-tools{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 24px; margin:0 0 18px; }
.rep-target{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:13px; }
.rep-target label{ display:inline-flex; align-items:center; gap:8px; }
.rep-target input{
  width:92px; height:34px; padding:0 10px; border-radius:8px; font:inherit; font-size:13px;
  background:var(--surface-2, #1A1D2B); border:1px solid var(--border-strong, #2E3247); color:var(--text, #F4F5FA);
}
.rep-target input:focus{ outline:none; border-color:var(--accent, #8B8FF5); box-shadow:0 0 0 3px rgba(91,95,239,.2); }
.rep-hidden{ margin:0 0 12px; font-size:12.5px; color:var(--warn, #DD9917); }
.rep-target .field-hint{ flex-basis:100%; }
.rep-share{ margin:0; max-width:460px; font-size:12.5px; color:var(--text-3, #878BA2); }
.rep-share a{ font-weight:600; }

/* ---- Public page (/s/{token}/reports/…) ---- */
body.rp{ margin:0; min-height:100vh; background:#EEF0F6; color:#141726; font-family:'Prompt','Plus Jakarta Sans',system-ui,sans-serif; }
.rp-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px;
  max-width:1040px; margin:0 auto; padding:18px 16px 14px; }
.rp-back{ color:#4A5068; font-weight:600; text-decoration:none; font-size:14px; }
.rp-back:hover{ color:#141726; }
.rp-pickers{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rp-pick select, .rp-print{
  font:inherit; font-size:14px; height:38px; padding:0 12px; border-radius:9px;
  border:1px solid #CDD1DF; background:#FFFFFF; color:#141726; cursor:pointer;
}
.rp-print{ background:#5B5FEF; border-color:#5B5FEF; color:#FFFFFF; font-weight:600; }
.rp-main{ padding:0 16px 40px; }
.rp-main .report-doc{ box-shadow:0 1px 2px rgba(20,23,38,.06), 0 8px 28px rgba(20,23,38,.08); }
.rp-cta{ max-width:1040px; margin:18px auto 0; text-align:center; font-size:14px; color:#4A5068; }
.rp-cta a{ font-weight:700; color:#5B5FEF; }
body.rp .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 760px){
  .report-doc{ padding:22px 18px; border-radius:12px; }
  .rd-kpis{ grid-template-columns:1fr 1fr; }
  .rd-kpi-main{ grid-column:1 / -1; }
  .rd-cols{ grid-template-columns:1fr; }
  .rd-brand{ text-align:left; }
  /* Tables keep a readable width and scroll sideways in .rd-table-wrap
     rather than wrapping a site's name a letter per line. */
  .rd-table{ min-width:640px; }
  .rd-incidents{ min-width:560px; }
}

/* ---- Print / save as PDF: only the paper, on A4 ---- */
@page{ size:A4; margin:12mm; }
@media print{
  body:has(.report-doc) .sidebar,
  body:has(.report-doc) .sidebar-backdrop,
  body:has(.report-doc) .topbar,
  body:has(.report-doc) .page-head,
  body:has(.report-doc) .skip-link,
  body:has(.report-doc) #toast-root,
  .no-print{ display:none !important; }
  html, body:has(.report-doc), body:has(.report-doc) .shell, body:has(.report-doc) .main, body:has(.report-doc) .content{
    display:block !important; background:#FFFFFF !important; margin:0 !important; padding:0 !important;
    min-height:0 !important; height:auto !important; overflow:visible !important; width:auto !important;
  }
  .report-doc{ box-shadow:none !important; border-radius:0; padding:0; max-width:none; font-size:12px; }
  /* A4 is narrower than the small-screen breakpoint: keep the four
     summary cards on one row, as on a desktop. */
  .rd-kpis{ grid-template-columns:1.4fr repeat(3, 1fr) !important; }
  .rd-kpi-main{ grid-column:auto !important; }
  .rd-kpi-value{ font-size:20px; }
  .rd-table-wrap{ overflow:visible; }
  .rd-table, .rd-incidents{ min-width:0 !important; }
  .rd-table tr, .rd-kpi, .rd-section{ break-inside:avoid; }
  .report-doc *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}