/* dep8.css — 1.7 สรุปผลงานฯ แยกรายหน่วยงาน (views/site/index8.php) ; โทนสีจาก t1-pro.css (--t1p-*) */

.dep8 .d8-tabs { flex-wrap: wrap; margin: 0 0 14px; }
.dep8 .d8-filters { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.dep8 .d8-filters .pg-tabs { margin: 0; }
.dep8 .d8-zone { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--t1p-faint, #7C877D); }
.dep8 .d8-zone select { min-width: 220px; padding: 6px 8px; border: 1px solid var(--t1p-rule, #CFDACB); background: #fff; font-size: 13.5px; }

/* แถบสถานะสะสม + คำอธิบาย */
.dep8 .d8-stack { display: flex; height: 10px; min-width: 90px; overflow: hidden; border-radius: 5px; background: var(--t1p-band, #EEF2EA); }
.dep8 .d8-stack i { display: block; height: 100%; }
.dep8 .d8-stack.is-empty { opacity: .6; }
.dep8 .d8-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11.5px; color: var(--t1p-soft, #4B5B4F); }
.dep8 .d8-leg { display: inline-flex; align-items: center; gap: 4px; }
.dep8 .d8-leg span, .dep8 .d8-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.dep8 .d8-dot { margin-right: 4px; vertical-align: middle; }
.dep8 .d8-leg b { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--t1p-ink, #17251C); }

/* การ์ด */
.dep8 .d8-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.dep8 .d8-card { position: relative; display: flex; flex-direction: column; gap: 9px; border-top: 3px solid var(--t1p-green, #1F6D45); transition: box-shadow .15s, transform .15s; }
.dep8 .d8-card:hover { box-shadow: 0 6px 18px rgba(18, 59, 39, .12); transform: translateY(-1px); }
.dep8 .d8-card .d8-link::after { content: ''; position: absolute; inset: 0; }
.dep8 .d8-card:focus-within { outline: 2px solid var(--t1p-focus, #A97D2F); outline-offset: 2px; }
.dep8 .d8-card.is-sel, .dep8 .d8-row.is-sel, .dep8 tr.is-sel td { background: #FBF6EA; }
.dep8 .d8-card.is-sel { border-top-color: var(--t1p-gold, #A97D2F); box-shadow: 0 0 0 2px var(--t1p-gold, #A97D2F); }
.dep8 .d8-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dep8 .d8-nums span { display: flex; flex-direction: column; }
.dep8 .d8-nums b { font: 600 17px/1.2 'IBM Plex Mono', monospace; color: var(--t1p-green-deep, #123B27); }
.dep8 .d8-nums small { font-size: 11px; color: var(--t1p-faint, #7C877D); }
.dep8 .d8-row .dv-row-val small { display: block; font-size: 11px; color: var(--t1p-faint, #7C877D); font-weight: 400; }
.dep8 .dv-tbl tfoot th { background: var(--t1p-band, #EEF2EA); font-weight: 600; }

/* แผงสรุปหน่วยงาน (?DEP=) */
.dep8 .d8-feature { margin: 0 0 20px; padding: 18px 22px; background: #fff; border: 1px solid var(--t1p-rule, #CFDACB); border-left: 5px solid var(--t1p-gold, #A97D2F);
  display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.dep8 .d8-feature-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dep8 .d8-feature-title { margin: 2px 0 0; font: 700 clamp(20px, 2.2vw, 26px)/1.3 'Taviraj', serif; color: var(--t1p-green-deep, #123B27); }
.dep8 .d8-close { padding: 2px 9px; border: 1px solid var(--t1p-rule, #CFDACB); color: var(--t1p-soft, #4B5B4F) !important; text-decoration: none !important; }
.dep8 .d8-close:hover { border-color: var(--t1p-green, #1F6D45); }
.dep8 .d8-feature-stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--t1p-rule-soft, #E3EAE0); width: fit-content; max-width: 100%; }
.dep8 .d8-feature-stats > div { display: flex; flex-direction: column; padding: 10px 20px; border-right: 1px solid var(--t1p-rule-soft, #E3EAE0); }
.dep8 .d8-feature-stats > div:last-child { border-right: 0; }
.dep8 .d8-feature-stats small { font-size: 12px; color: var(--t1p-faint, #7C877D); }
.dep8 .d8-feature-stats b { font: 600 24px/1.15 'IBM Plex Mono', monospace; color: var(--t1p-green-deep, #123B27); }
.dep8 .d8-feature .d8-stack { height: 14px; }
.dep8 .d8-years td .d8-stack { min-width: 140px; }
.dep8 .d8-years tr.is-cur td { font-weight: 600; background: #FBF6EA; }

@media (max-width: 640px) {
  .dep8 .d8-grid { grid-template-columns: 1fr; }
  .dep8 .d8-zone select { min-width: 0; width: 100%; }
  .dep8 .d8-feature { padding: 14px; }
}