/* kr2569.css — สรุปผลการดำเนินงานทุก OKRs ปี 2569 (views/lutkeyresult2569/index.php) ; โทนสีจาก t1-pro.css (--t1p-*) */

.kr2569 .kr-tabs { flex-wrap: wrap; margin: 0 0 14px; }
.kr2569 .kr-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.kr2569 .kr-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; }
.kr2569 .kr-tabs a.is-active .kr-n { background: rgba(255, 255, 255, .22); color: inherit; }

.kr2569 .kr-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kr2569 .kr-card { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--t1p-green, #1F6D45); }
.kr2569 .kr-card .t1-acts { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--t1p-rule-soft, #E3EAE0); }
.kr2569 .kr-head { display: flex; align-items: center; gap: 8px; }
.kr2569 .kr-logo { width: 28px; height: 28px; object-fit: contain; flex: none; }
.kr2569 .kr-logo.is-text { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--t1p-band, #EEF2EA); color: var(--t1p-soft, #4B5B4F); font: 600 11px 'IBM Plex Mono', monospace; }
.kr2569 .dv-row-ic .kr-logo { width: 32px; height: 32px; }

.kr2569 .kr-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--t1p-soft, #4B5B4F); }
.kr2569 .kr-figure b { font: 600 26px/1.1 'Taviraj', serif; color: var(--t1p-green-deep, #123B27); }
.kr2569 .kr-figure small { flex-basis: 100%; font-size: 11.5px; color: var(--t1p-faint, #7C877D); }

.kr2569 .kr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.kr2569 .kr-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 8px; border: 1px solid var(--t1p-rule, #CFDACB);
  border-radius: 12px; background: #fff; font-size: 12px; line-height: 1.5; }
.kr2569 .kr-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.kr2569 .kr-chip b { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--t1p-green-deep, #123B27); }
.kr2569 .kr-chip.is-sel { border-color: var(--t1p-gold, #A97D2F); background: #FBF6EA; }
.kr2569 .kr-chip.is-more { color: var(--t1p-faint, #7C877D); background: var(--t1p-band, #EEF2EA); border-color: transparent; }

.kr2569 .kr-all summary { cursor: pointer; font-size: 12.5px; color: var(--t1p-green, #1F6D45); font-weight: 600; }
.kr2569 .kr-all ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 240px; overflow: auto; border: 1px solid var(--t1p-rule-soft, #E3EAE0); }
.kr2569 .kr-all li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; font-size: 12.5px; border-bottom: 1px solid var(--t1p-rule-soft, #E3EAE0); }
.kr2569 .kr-all li:last-child { border-bottom: 0; }
.kr2569 .kr-all li.is-dist { background: #FAFBF8; }
.kr2569 .kr-all li b { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

.kr2569 .kr-row .dv-row-val small { display: block; font-size: 11px; color: var(--t1p-faint, #7C877D); font-weight: 400; }
.kr2569 .kr-row .kr-chips { margin-top: 4px; }

@media (max-width: 640px) {
  .kr2569 .kr-grid { grid-template-columns: 1fr; }
  .kr2569 .kr-chip > span { max-width: 140px; }
}