/* krdep.css — ค่าเป้าหมาย/ผลของ KR รายหน่วยงาน (views/site/index_by_id.php) ; โทนสีจาก t1-pro.css (--t1p-*) ; --c = สีสถานะ */

.krdep .kd-n { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: 10px; background: var(--t1p-band, #EEF2EA);
  color: var(--t1p-soft, #4B5B4F); font: 600 11px/18px 'IBM Plex Mono', monospace; text-align: center; }
.krdep .kd-tabs { flex-wrap: wrap; margin: 0 0 14px; }
.krdep .kd-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.krdep .kd-tabs a.is-active .kd-n { background: rgba(255, 255, 255, .22); color: inherit; }

/* สัดส่วนสถานะ */
.krdep .kd-dist { margin: 18px 0 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--t1p-rule, #CFDACB); }
.krdep .kd-dist-bar { display: flex; height: 26px; overflow: hidden; border-radius: 3px; background: var(--t1p-band, #EEF2EA); }
.krdep .kd-dist-bar a { display: flex; align-items: center; justify-content: center; min-width: 4px; color: #fff !important;
  font: 600 12px 'IBM Plex Mono', monospace; text-decoration: none !important; transition: filter .15s; }
.krdep .kd-dist-bar a:hover { filter: brightness(1.1); }
.krdep .kd-dist-bar a.is-sel { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); }
.krdep .kd-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.krdep .kd-leg { display: inline-flex; align-items: center; gap: 6px; color: var(--t1p-ink, #17251C) !important; text-decoration: none !important; }
.krdep .kd-leg span { width: 11px; height: 11px; border-radius: 2px; }
.krdep .kd-leg b { font-family: 'IBM Plex Mono', monospace; }
.krdep .kd-leg.is-sel { font-weight: 700; text-decoration: underline !important; }
.krdep .kd-leg.is-zero { opacity: .45; }
.krdep .kd-clear { margin-left: auto; color: var(--t1p-green, #1F6D45) !important; }

/* ป้ายสถานะ + แถบร้อยละ */
.krdep .kd-st { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; line-height: 1.6;
  background: color-mix(in srgb, var(--c) 14%, #fff); color: color-mix(in srgb, var(--c) 75%, #000); white-space: nowrap; }
.krdep .kd-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.krdep .kd-bar { display: block; height: 8px; min-width: 80px; border-radius: 4px; background: var(--t1p-band, #EEF2EA); overflow: hidden; }
.krdep .kd-bar i { display: block; height: 100%; border-radius: 4px; }
.krdep .dv-tbl .kd-bar { display: inline-block; width: 70px; vertical-align: middle; margin-left: 6px; }

/* การ์ด */
.krdep .kd-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.krdep .kd-card { position: relative; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--c); transition: box-shadow .15s, transform .15s; }
.krdep .kd-card:hover { box-shadow: 0 6px 18px rgba(18, 59, 39, .12); transform: translateY(-1px); }
.krdep .kd-card .kd-link::after { content: ''; position: absolute; inset: 0; }
.krdep .kd-card:focus-within { outline: 2px solid var(--t1p-focus, #A97D2F); outline-offset: 2px; }
.krdep .kd-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.krdep .kd-pct { display: flex; align-items: baseline; gap: 6px; }
.krdep .kd-pct b { font: 600 30px/1 'Taviraj', serif; color: var(--t1p-green-deep, #123B27); }
.krdep .kd-pct small { font-size: 12px; color: var(--t1p-faint, #7C877D); }
.krdep .kd-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--t1p-rule-soft, #E3EAE0); }
.krdep .kd-nums span { display: flex; flex-direction: column; }
.krdep .kd-nums small { font-size: 11px; color: var(--t1p-faint, #7C877D); }
.krdep .kd-nums b { font: 600 14px 'IBM Plex Mono', monospace; color: var(--t1p-ink, #17251C); }
.krdep .kd-nums b.is-unit { font: 500 13px 'Sarabun', sans-serif; }

.krdep .kd-row { border-left: 3px solid var(--c); }
.krdep .dv-tbl tfoot th { background: var(--t1p-band, #EEF2EA); font-weight: 600; }

/* รายละเอียดตัววัดผล */
.krdep .kd-det { margin: 0 0 8px; background: #fff; border: 1px solid var(--t1p-rule, #CFDACB); }
.krdep .kd-det summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: var(--t1p-green-deep, #123B27); }
.krdep .kd-det > div { padding: 0 14px 14px; font-size: 14px; line-height: 1.75; color: var(--t1p-ink, #17251C); }

/* จัดอันดับ (views/site/index_by_ranking.php) */
.krdep .kd-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px;
  background: var(--t1p-band, #EEF2EA); color: var(--t1p-green-deep, #123B27); font: 600 13px/1 'IBM Plex Mono', monospace; }
.krdep .kd-rank.is-top { color: #fff; }
.krdep .kd-rank.is-r1 { background: #B8862B; }
.krdep .kd-rank.is-r2 { background: #8A9399; }
.krdep .kd-rank.is-r3 { background: #A0643A; }
.krdep .kd-rklist .dv-row-ic { background: transparent; }
.krdep .kd-head-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.krdep .dv-tbl .kd-rank { min-width: 26px; height: 24px; font-size: 12px; }

.krdep .kd-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 16px; }
.krdep .kd-pod-col { padding: 12px 14px; background: #fff; border: 1px solid var(--t1p-rule, #CFDACB); border-top: 3px solid var(--t1p-green, #1F6D45); }
.krdep .kd-pod-col.is-low { border-top-color: #C8553D; }
.krdep .kd-pod-head { margin: 0 0 8px; font: 600 14px 'Sarabun', sans-serif; color: var(--t1p-green-deep, #123B27); }
.krdep .kd-pod-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--t1p-rule-soft, #E3EAE0);
  color: var(--t1p-ink, #17251C) !important; text-decoration: none !important; }
.krdep .kd-pod-item:first-of-type { border-top: 0; }
.krdep .kd-pod-item:hover .kd-pod-name { text-decoration: underline; }
.krdep .kd-pod-name { flex: 1; min-width: 0; font-size: 14px; }
.krdep .kd-pod-item b { font: 600 14px 'IBM Plex Mono', monospace; color: color-mix(in srgb, var(--c) 80%, #000); white-space: nowrap; }
.krdep .kd-pod-note { margin: 6px 0 0; font-size: 12px; color: var(--t1p-faint, #7C877D); }

.krdep .kd-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.krdep .kd-filters .kd-tabs { margin: 0; }
.krdep .kd-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.krdep .kd-sort span { color: var(--t1p-soft, #4B5B4F); margin-right: 4px; }
.krdep .kd-sort a { padding: 4px 12px; border: 1px solid var(--t1p-rule, #CFDACB); border-radius: 16px; background: #fff;
  color: var(--t1p-ink, #17251C) !important; text-decoration: none !important; }
.krdep .kd-sort a.is-active { background: var(--t1p-green, #1F6D45); border-color: var(--t1p-green, #1F6D45); color: #fff !important; }

@media (max-width: 640px) {
  .krdep .kd-grid { grid-template-columns: 1fr; }
  .krdep .kd-clear { margin-left: 0; }
  .krdep .kd-podium { grid-template-columns: 1fr; }
  .krdep .kd-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .krdep .kd-tabs a { white-space: nowrap; }
}