/* ===== บทวิเคราะห์แนวโน้มและการประเมินสถานการณ์ (views/site/_sed/_reporttrend.php) — ใช้ร่วมกับ analysis.css ===== */
/* สีชุดข้อมูล (validate_palette ผ่าน: light, พื้น #FFF) — ผลจริง = น้ำเงิน · แผนงาน = ทอง · กรอบเวลา = เทาประ (เส้นอ้างอิง) */
.rt { --rt-actual: #2F6FB5; --rt-plan: #B07A1E; --rt-ref: var(--ink-faint); }

.rt-charts { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rt-fig { margin: 0; }
.rt-fig figcaption { display: flex; flex-direction: column; margin-bottom: 6px; }
.rt-fig figcaption b { font-family: 'Taviraj', serif; font-size: 15.5px; font-weight: 600; color: var(--green-deep); }
.rt-fig figcaption span { font-size: 12px; color: var(--ink-soft); }
.rt-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: 'Sarabun', sans-serif; }

.rt-grid { stroke: var(--rule-soft); stroke-width: 1; }
.rt-grid.base { stroke: var(--rule); }
.rt-ytick { font-size: 10.5px; fill: var(--ink-faint); text-anchor: end; font-family: 'IBM Plex Mono', monospace; }
.rt-xtick { font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.rt-bar { fill: var(--rt-actual); }
.rt-bar.is-open { fill: var(--rt-actual); opacity: .45; }
.rt-ref { stroke: var(--rt-ref); stroke-width: 1.5; stroke-dasharray: 4 4; }
.rt-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-line.k-actual { stroke: var(--rt-actual); }
.rt-line.k-plan { stroke: var(--rt-plan); }
.rt-line.k-time { stroke: var(--rt-ref); stroke-dasharray: 5 4; stroke-width: 1.5; }
.rt-dot { fill: var(--rt-actual); stroke: var(--card); stroke-width: 2; }
.rt-end { font-size: 11px; fill: var(--ink-soft); font-weight: 600; }   /* ข้อความใช้สีหมึก ไม่ใช้สีชุดข้อมูล */
.rt-hit { fill: transparent; cursor: crosshair; }
.rt-hit.on { fill: var(--ink); fill-opacity: .05; }

.rt-legend { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-soft); }
.rt-legend i, .rt-tip-row i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 5px; }
.rt-legend .k-actual, .rt-tip-row .k-actual { border-color: var(--rt-actual); }
.rt-legend .k-plan, .rt-tip-row .k-plan { border-color: var(--rt-plan); }
.rt-legend .k-time, .rt-tip-row .k-time { border-color: var(--rt-ref); border-top-style: dashed; }
.rt-tip-row .k-bar { height: 8px; border: 0; background: var(--rt-actual); border-radius: 2px 2px 0 0; width: 8px; }

.rt-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 190px; padding: 8px 10px; background: var(--card); border: 1px solid var(--rule); border-top: 2px solid var(--green-deep);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14); font-size: 12px; color: var(--ink); }
.rt-tip[hidden] { display: none; }
.rt-tip-h { font-weight: 600; margin-bottom: 4px; }
.rt-tip-row { display: flex; align-items: center; gap: 2px; line-height: 1.7; color: var(--ink-soft); }
.rt-tip-row b { margin-left: auto; padding-left: 10px; color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-weight: 500; }

.rt-table-wrap { padding: 10px 16px; }
.rt-table-wrap summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.rt-table-wrap[open] summary { margin-bottom: 8px; }
.rt-table-wrap tr.is-open td { color: var(--ink-faint); }

@media (max-width: 980px) { .rt-charts { grid-template-columns: 1fr; } }
@media print {
  .rt-hit, .rt-tip { display: none !important; }
  .rt-table-wrap { break-inside: avoid; }
}