.kpi-head .head-actions { margin-top: 4px; }
.kpi-period-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; background: linear-gradient(115deg, #0b357d, #0645f5); color: #fff; border: 0; }
.kpi-period-bar .eyebrow, .kpi-period-bar small { color: rgba(255,255,255,.7); }
.kpi-period-bar strong, .kpi-period-bar small { display: block; }
.kpi-period-bar strong { font-size: 20px; letter-spacing: -.04em; }
.kpi-period-bar small { margin-top: 3px; font-size: 10px; }
.kpi-period-bar label { color: #fff; font-size: 10px; }
.kpi-period-bar select { display: block; min-width: 190px; margin-top: 5px; border: 0; color: #172c55; background: #fff; }
.kpi-metrics { grid-template-columns: repeat(4, 1fr); }
.kpi-score-card { background: linear-gradient(135deg, #fff, #eef5ff) !important; }
.kpi-score-card b { color: var(--blue); }
.kpi-metric b { color: var(--blue); }
.kpi-metric a { color: var(--blue); font-weight: 800; }
.kpi-metric em { font-size: 14px; color: var(--muted); font-style: normal; letter-spacing: 0; }
.progress-track { height: 9px; width: 100%; background: #e8edf5; border-radius: 99px; overflow: hidden; }
.progress-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #31c8e5, var(--blue)); transition: width .35s ease; }
.progress-track i.excellent { background: linear-gradient(90deg, #36c98a, #117a55); }
.progress-track i.attention { background: linear-gradient(90deg, #ffc95b, #db7c16); }
.kpi-bar-row, .kpi-indicator-row { display: grid; grid-template-columns: minmax(175px, 1.1fr) 2fr 54px; align-items: center; gap: 12px; margin: 17px 0; }
.kpi-bar-label b, .kpi-bar-label small, .kpi-indicator-row b, .kpi-indicator-row small { display: block; }
.kpi-bar-label b, .kpi-indicator-row b { font-size: 11px; }
.kpi-bar-label small, .kpi-indicator-row small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.kpi-bar-row strong, .kpi-indicator-row strong { text-align: right; font-size: 11px; color: var(--blue); }
.kpi-trend-chart { height: 222px; display: flex; align-items: end; justify-content: space-around; gap: 14px; padding: 20px 6px 4px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 43px, #eef2f7 44px); }
.trend-column { height: 100%; flex: 1; min-width: 45px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 5px; }
.trend-column span { color: var(--blue); font-size: 10px; font-weight: 800; }
.trend-column i { width: min(44px, 100%); min-height: 6px; display: block; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--cyan), var(--blue)); box-shadow: 0 5px 14px rgba(6,69,245,.14); }
.trend-column small { color: var(--muted); font-size: 9px; }
.kpi-ranking { display: grid; gap: 5px; }
.ranking-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ranking-row:last-child { border-bottom: 0; }
.ranking-place { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: #eef3ff; font-size: 10px; font-weight: 800; }
.ranking-row b, .ranking-row small { display: block; }
.ranking-row b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-row small { color: var(--muted); font-size: 9px; margin: 1px 0 5px; }
.ranking-row strong { width: 44px; color: var(--blue); font-size: 11px; text-align: right; }
.process-panel { margin-bottom: 16px; }
.process-panel .panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 11px; max-width: 620px; }
.process-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 15px; }
.process-step { display: flex; gap: 9px; min-height: 125px; padding: 13px 14px; border: 1px solid var(--line); border-right: 0; background: #fbfcff; position: relative; }
.process-step:first-child { border-radius: 10px 0 0 10px; }
.process-step:last-child { border-right: 1px solid var(--line); border-radius: 0 10px 10px 0; }
.process-step:not(:last-child):after { content: '›'; position: absolute; right: -9px; top: 43%; z-index: 2; width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; font-size: 16px; }
.process-index { flex: 0 0 auto; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 800; }
.process-step small { display: block; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; font-size: 8px; font-weight: 800; }
.process-step b { display: block; margin-top: 4px; font-size: 10px; line-height: 1.35; }
.process-step p { margin: 4px 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.process-step em { display: block; color: var(--green); font-size: 9px; font-style: normal; line-height: 1.35; }
.kpi-assignments-panel { margin-bottom: 16px; }
.kpi-table { min-width: 1120px; }
.kpi-table td { vertical-align: top; }
.assignment-progress { min-width: 125px; display: flex; align-items: center; gap: 7px; }
.assignment-progress b { width: 42px; color: var(--blue); font-size: 10px; }
.kpi-update-form { display: grid; grid-template-columns: 74px 115px 125px auto; align-items: center; gap: 4px; }
.kpi-update-form input { min-width: 0; min-height: 29px; padding: 6px 7px; font-size: 9px; }
.kpi-update-form .link-button { white-space: nowrap; }
.kpi-auto-note{display:inline-block;max-width:130px;color:#197357;background:#eaf8f1;border-radius:8px;padding:6px 8px;font-size:10px;font-weight:800;line-height:1.2}.kpi-manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.kpi-manage-card,.kpi-assignment-card{padding:22px}.form-stack{display:grid;gap:10px}.form-stack label,.kpi-assignment-form label{display:grid;gap:5px;color:#60708b;font-size:11px;font-weight:800}.form-stack textarea{min-height:64px;resize:vertical}.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.form-row:has(label:nth-child(3)){grid-template-columns:1fr .8fr .8fr}.kpi-manage-list{display:grid;gap:6px;margin-top:17px;padding-top:13px;border-top:1px solid var(--line);max-height:240px;overflow:auto}.kpi-period-item,.kpi-indicator-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf0f5}.kpi-period-item:last-child,.kpi-indicator-item:last-child{border:0}.kpi-period-item b,.kpi-period-item small,.kpi-indicator-item b,.kpi-indicator-item small{display:block}.kpi-period-item b,.kpi-indicator-item b{font-size:12px}.kpi-period-item small,.kpi-indicator-item small{margin-top:2px;color:var(--muted);font-size:10px}.kpi-indicator-item>span{color:var(--blue);font-size:11px;font-weight:800;white-space:nowrap}.kpi-assignment-card{margin-bottom:16px}.kpi-assignment-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.kpi-assignment-form>label{min-width:0}.kpi-assignment-form select,.kpi-assignment-form input{width:100%;min-width:0}.kpi-assignment-form button{height:40px;min-width:0}.kpi-manage-card .panel-head{margin-bottom:13px}
@media(max-width:1100px) { .kpi-metrics { grid-template-columns: repeat(2,1fr); } .process-flow { grid-template-columns: repeat(2,1fr); } .process-step:nth-child(2) { border-right: 1px solid var(--line); border-radius: 0 10px 10px 0; } .process-step:nth-child(2):after { display: none; } .process-step:nth-child(3) { border-radius: 10px 0 0 10px; margin-top: 10px; } .process-step:nth-child(4) { margin-top: 10px; } .kpi-assignment-form{grid-template-columns:repeat(2,1fr)} }
@media(max-width:760px) { .kpi-period-bar { display: block; } .kpi-period-bar form { margin-top: 14px; } .kpi-period-bar select { width: 100%; } .kpi-metrics { grid-template-columns: 1fr; } .kpi-bar-row, .kpi-indicator-row { grid-template-columns: 1fr 56px; gap: 7px; } .kpi-bar-row .progress-track, .kpi-indicator-row .progress-track { grid-column: 1 / -1; grid-row: 2; } .process-flow { grid-template-columns: 1fr; } .process-step, .process-step:nth-child(2), .process-step:nth-child(3), .process-step:nth-child(4) { margin-top: 0; border-right: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; } .process-step:after { display: none; } .kpi-update-form { grid-template-columns: 1fr 1fr; } .kpi-update-form input:nth-child(2), .kpi-update-form input:nth-child(3), .kpi-update-form button { grid-column: 1 / -1; } .kpi-manage-grid,.kpi-assignment-form{grid-template-columns:1fr}.form-row,.form-row:has(label:nth-child(3)){grid-template-columns:1fr}.kpi-manage-card,.kpi-assignment-card{padding:17px} }