/* QLCV v7.5.42 - KPI cá nhân: rõ ràng, cân đối, responsive */
.performance-shell{gap:14px}
.performance-person.card{padding:15px 17px;border-color:#d9e5ef;background:linear-gradient(135deg,#ffffff 0%,#f5faff 100%);box-shadow:0 5px 18px rgba(15,76,129,.055)}
.performance-avatar{width:56px;height:56px;border-radius:16px;box-shadow:0 6px 14px rgba(15,76,129,.18)}
.performance-person h3{font-size:18px;letter-spacing:-.015em}
.performance-person p{font-size:12px;margin-top:4px}
.performance-view-note{padding:7px 11px;border:1px solid #cfe4f6;background:#f5faff}

.performance-shell .kpi-score-panel,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel{position:relative;overflow:hidden;border:1px solid #e4d9a8;border-left:5px solid #f79009;border-radius:15px;padding:16px 18px;box-shadow:0 7px 22px rgba(85,69,18,.06)}
.performance-shell .kpi-score-panel::before,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel::before{content:'';position:absolute;right:-46px;top:-70px;width:180px;height:180px;border-radius:50%;background:rgba(247,144,9,.06);pointer-events:none}
.performance-shell .kpi-score-panel.finalized,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel.finalized{border-color:#b7e6ce;border-left-color:#12b76a;background:linear-gradient(135deg,#f4fdf8,#fff)}
.performance-shell .kpi-score-panel.nodata,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel.nodata{border-color:#d8e1ea;border-left-color:#98a2b3;background:#fbfcfd}
.performance-shell .kpi-score-main,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-main{min-width:170px;padding-right:20px}
.performance-shell .kpi-score-main>b,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-main>b{font-size:42px;letter-spacing:-.035em;margin:5px 0 4px}
.performance-shell .kpi-score-label,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-label{font-size:10px;letter-spacing:.09em}
.performance-shell .kpi-score-copy h3,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-copy h3{font-size:17px}
.performance-shell .kpi-score-copy p,
#dlg:has(.kpi-detail-dialog-head) .kpi-score-copy p{font-size:11px;max-width:520px}

.performance-shell .kpi-source-strip,
#dlg:has(.kpi-detail-dialog-head) .kpi-source-strip{gap:7px;padding:9px 11px;border:1px solid #e7edf3;background:#fbfcfe;border-radius:11px;font-size:10px}
.performance-shell .kpi-source-strip span,
#dlg:has(.kpi-detail-dialog-head) .kpi-source-strip span{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:3px 7px;border:1px solid #e8edf2;border-radius:999px;background:#fff}

.performance-shell .kpi-breakdown-grid{gap:10px}
.performance-shell .kpi-breakdown-item,
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item{position:relative;min-height:124px;padding:13px 14px;border-radius:13px;border-color:#dde6ee;box-shadow:0 3px 12px rgba(15,76,129,.045);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.performance-shell .kpi-breakdown-item:nth-child(1),
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item:nth-child(1){border-top:3px solid #2e90fa}
.performance-shell .kpi-breakdown-item:nth-child(2),
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item:nth-child(2){border-top:3px solid #f79009}
.performance-shell .kpi-breakdown-item:nth-child(3),
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item:nth-child(3){border-top:3px solid #12b76a}
.performance-shell .kpi-breakdown-item:nth-child(4),
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item:nth-child(4){border-top:3px solid #6172f3}
.performance-shell .kpi-breakdown-item:nth-child(5),
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item:nth-child(5){border-top:3px solid #7f56d9}
.performance-shell .kpi-breakdown-name b,
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-name b{font-size:11px;line-height:1.35;min-height:30px}
.performance-shell .kpi-breakdown-name span,
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-name span{font-size:9px}
.performance-shell .kpi-breakdown-score>b,
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-score>b{font-size:26px;letter-spacing:-.025em}
.performance-shell .kpi-breakdown-score small,
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-score small{font-size:9px;line-height:1.35}

.v7510-kpi-drill::after{content:'Xem chi tiết nguồn  ›';display:inline-flex!important;align-items:center;justify-content:center;margin-top:10px;padding:5px 9px;border-radius:999px;background:#eff6ff;color:#175cd3;font-size:10px;font-weight:800;letter-spacing:.01em}
.v7510-kpi-drill:hover{border-color:#84adff!important;box-shadow:0 8px 22px rgba(15,76,129,.10)!important;transform:translateY(-2px)!important}
.v7510-kpi-drill:focus-visible{outline:3px solid rgba(46,144,250,.22);outline-offset:2px}

.performance-indicators{gap:10px}
.performance-indicator{min-height:108px;padding:14px 16px;border-radius:13px;border-color:#dfe7ee;background:linear-gradient(150deg,#fff,#f8fbff);box-shadow:0 3px 12px rgba(15,76,129,.035)}
.performance-indicator small{font-size:10px;font-weight:700;color:#667085}
.performance-indicator b{font-size:30px;letter-spacing:-.03em;margin:6px 0 4px}
.performance-indicator span{font-size:10px;color:#7b8794}

.performance-section.card{border-color:#e0e8ef;box-shadow:0 3px 12px rgba(15,76,129,.035)}
.performance-section h3{font-size:15px}
.performance-stat-grid>div{min-height:62px;padding:9px 10px;border-radius:9px}
.performance-stat-grid span{font-size:9.5px}
.performance-stat-grid b{font-size:19px}
.performance-timeline-item.v7514-clickable{padding:9px 7px}

/* Hộp thoại Chi tiết KPI: mở rộng trên desktop, giữ gọn trên tablet/mobile */
#dlg:has(.kpi-detail-dialog-head){width:min(1180px,calc(100vw - 32px));max-width:1180px;max-height:92vh;background:#f7fafc}
#dlg:has(.kpi-detail-dialog-head) .dlghead{padding:13px 18px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px)}
#dlg:has(.kpi-detail-dialog-head) #dlgBody{padding:16px 18px 22px}
#dlg:has(.kpi-detail-dialog-head) .form{padding:0}
#dlg:has(.kpi-detail-dialog-head) .kpi-detail-dialog-head{padding:2px 2px 4px;margin-bottom:11px}
#dlg:has(.kpi-detail-dialog-head) .kpi-detail-dialog-head>b{font-size:17px}
#dlg:has(.kpi-detail-dialog-head) .kpi-detail-dialog-head>span{padding:5px 9px;border-radius:999px;background:#eef5fb;color:#475467;font-size:11px;font-weight:700}
#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel{grid-template-columns:180px minmax(0,1fr);margin-bottom:11px}
#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}

/* Hộp thoại nguồn KPI */
#dlg:has(.v7510-kpi-source-dialog){width:min(1120px,calc(100vw - 32px));max-width:1120px;max-height:92vh;background:#f7fafc}
#dlg:has(.v7510-kpi-source-dialog) #dlgBody{padding:15px 18px 22px}
.v7510-kpi-source-dialog{min-width:0!important;padding:0!important}
.v7510-source-head{padding:2px 1px 10px;border-bottom:1px solid #e5ebf0}
.v7510-source-list{gap:10px}
.v7510-source-row{border-radius:13px!important;padding:12px 13px!important;border-color:#dfe7ee!important;box-shadow:0 3px 10px rgba(15,76,129,.035)}
.v7510-source-row>.primary{min-width:102px;white-space:nowrap}
.v7510-events span{background:#f5f8fb!important;border:1px solid #e7edf3}

/* Trạng thái tích hợp bị tắt: không hiển thị như lỗi lưu dữ liệu */
.v7515-integration-disabled{opacity:.78}
.v7515-integration-disabled small{display:block;margin:4px 0 0 26px;color:#667085;font-weight:500;line-height:1.4}

@media(max-width:1180px){
  #dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .performance-shell .kpi-breakdown-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .performance-shell .kpi-score-panel,#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel{grid-template-columns:150px minmax(0,1fr)}
  .performance-shell .kpi-score-main,#dlg:has(.kpi-detail-dialog-head) .kpi-score-main{min-width:0}
  #dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-grid,.performance-shell .kpi-breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .performance-timeline{grid-column:1/-1!important}
}
@media(max-width:640px){
  .performance-shell{gap:10px}
  .performance-person.card{padding:12px;grid-template-columns:48px minmax(0,1fr)}
  .performance-avatar{width:46px;height:46px;border-radius:13px;font-size:20px}
  .performance-person h3{font-size:16px}
  .performance-view-note{grid-column:1/-1;justify-self:start}
  .performance-shell .kpi-score-panel,#dlg:has(.kpi-detail-dialog-head) .kpi-score-panel{grid-template-columns:1fr;padding:13px 14px}
  .performance-shell .kpi-score-main,#dlg:has(.kpi-detail-dialog-head) .kpi-score-main{border-right:0;border-bottom:1px solid #e6e9ed;padding:0 0 10px}
  .performance-shell .kpi-score-main>b,#dlg:has(.kpi-detail-dialog-head) .kpi-score-main>b{font-size:38px}
  .performance-shell .kpi-breakdown-grid,#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-grid{grid-template-columns:1fr}
  .performance-shell .kpi-breakdown-item,#dlg:has(.kpi-detail-dialog-head) .kpi-breakdown-item{min-height:0}
  .performance-indicators{grid-template-columns:1fr!important}
  .performance-grid{grid-template-columns:1fr!important}
  #dlg:has(.kpi-detail-dialog-head),#dlg:has(.v7510-kpi-source-dialog){width:100vw;max-width:100vw;max-height:95vh;margin:auto 0 0;border-radius:18px 18px 0 0}
  #dlg:has(.kpi-detail-dialog-head) #dlgBody,#dlg:has(.v7510-kpi-source-dialog) #dlgBody{padding:12px}
  .v7510-source-row{grid-template-columns:1fr!important}
  .v7510-source-row>.primary{width:100%}
}