/* ===== Report Score Tables: Light mode ===== */ #reportAccordion{ --report-bg:#f4f7fb; --report-surface:#ffffff; --report-surface-alt:#f8fafc; --report-text:#172033; --report-muted:#64748b; --report-border:#dbe3ee; --report-head:#243b64; --report-head-text:#ffffff; --report-day:#dff7ff; --report-day-strong:#bceeff; --report-day-text:#123044; --report-month:#fff7ce; --report-month-strong:#ffe990; --report-month-text:#493b0b; --report-profit:#eee7ff; --report-danger:#ffe3e3; --report-open:#e1f4ff; --report-current:#e5f8df; --report-special:#f0e8ff; --report-total:#dcfce7; --report-total-text:#14532d; --report-hover-border:#3b82f6; --report-hover-filter:brightness(.92) saturate(1.15); --report-shadow:0 8px 24px rgba(15,23,42,.08); --p1-head:#0f766e;--p1-body:#ccfbf1;--p2-head:#0369a1;--p2-body:#e0f2fe; --p3-head:#1d4ed8;--p3-body:#dbeafe;--p4-head:#6d28d9;--p4-body:#ede9fe; --p5-head:#be123c;--p5-body:#ffe4e6;--p6-head:#c2410c;--p6-body:#ffedd5; --p7-head:#4d7c0f;--p7-body:#ecfccb;--t1-head:#a16207;--t1-body:#fef3c7; --t2-head:#b45309;--t2-body:#ffedd5;--t3-head:#b91c1c;--t3-body:#fee2e2; --t4-head:#047857;--t4-body:#d1fae5;--t5-head:#7e22ce;--t5-body:#f3e8ff; color:var(--report-text); } /* Dark mode: */ html.dark-mode #reportAccordion{ --report-bg:#0f172a; --report-surface:#172033; --report-surface-alt:#1d293d; --report-text:#e7edf7; --report-muted:#a8b4c7; --report-border:#334155; --report-head:#111b2e; --report-head-text:#f8fafc; --report-day:#17364a; --report-day-strong:#1c4b63; --report-day-text:#d9f5ff; --report-month:#443b1d; --report-month-strong:#5b4d1e; --report-month-text:#fff2b8; --report-profit:#352956; --report-danger:#512b34; --report-open:#173b52; --report-current:#21452e; --report-special:#392d57; --report-total:#1d4933; --report-total-text:#bbf7d0; --report-hover-border:#60a5fa; --report-hover-filter:brightness(1.22) saturate(1.12); --report-shadow:0 12px 30px rgba(0,0,0,.28); --p1-head:#115e59;--p1-body:#153d3b;--p2-head:#075985;--p2-body:#16384d; --p3-head:#1e40af;--p3-body:#1d315b;--p4-head:#5b21b6;--p4-body:#33265a; --p5-head:#9f1239;--p5-body:#4d2532;--p6-head:#9a3412;--p6-body:#4b2d20; --p7-head:#3f6212;--p7-body:#30401f;--t1-head:#854d0e;--t1-body:#45391e; --t2-head:#92400e;--t2-body:#49301f;--t3-head:#991b1b;--t3-body:#4c2529; --t4-head:#065f46;--t4-body:#1d4035;--t5-head:#6b21a8;--t5-body:#3d2853; } /* Main card รองรับทั้งกรณี #reportAccordion เป็น card และมี card อยู่ด้านใน */ #reportAccordion.report-score-card, #reportAccordion > .card{ overflow:hidden; background:var(--report-surface); border:1px solid var(--report-border); border-radius:14px; box-shadow:var(--report-shadow); } #reportAccordion > .card + .card{margin-top:12px !important;} #reportAccordion .report-filter-header, #reportAccordion > .card > .card-header{ padding:14px 16px; background:var(--report-surface); border-bottom:1px solid var(--report-border); } #reportAccordion .report-filter-form{width:100%;max-width:380px;margin:0;} #reportAccordion .report-filter-form .form-control{ height:38px; background:var(--report-surface-alt); color:var(--report-text); border-color:var(--report-border); } #reportAccordion .report-filter-form .btn{height:38px;padding:0 18px;font-weight:700;} #reportAccordion .card-body{padding:16px;background:var(--report-bg);} #reportAccordion h5{color:var(--report-text);font-weight:700;} #reportAccordion .table-responsive{ margin-bottom:16px; border:1px solid var(--report-border); border-radius:12px; background:var(--report-surface); box-shadow:var(--report-shadow); } #reportAccordion .table-responsive:last-child{margin-bottom:0;} #reportAccordion table.home{ width:100%; min-width:1350px; margin-bottom:0; background:var(--report-surface) !important; color:var(--report-text) !important; border-collapse:separate; border-spacing:0; font-size:.82rem; } #reportAccordion table.home th, #reportAccordion table.home td{ vertical-align:middle !important; padding:9px 10px; border-color:var(--report-border) !important; white-space:nowrap; } #reportAccordion table.home th{ background:var(--report-head) !important; color:var(--report-head-text) !important; font-size:.78rem; font-weight:700; line-height:1.35; letter-spacing:.015em; } #reportAccordion table.home th small{ display:block; margin-top:3px; font-size:.67rem; font-weight:600; opacity:.78; } #reportAccordion table.home tbody td{ background:var(--report-surface) !important; color:var(--report-text); } #reportAccordion table.home tbody tr:hover:not(.sum-color) td{ filter:var(--report-hover-filter); box-shadow: inset 0 2px 0 var(--report-hover-border), inset 0 -2px 0 var(--report-hover-border); transition:filter .15s ease,box-shadow .15s ease; } /* Header groups */ #reportAccordion table.home th.report-head-day, #reportAccordion table.home th.report-head-personal{ background:var(--report-day-strong) !important; color:var(--report-day-text) !important; } #reportAccordion table.home th.report-head-month, #reportAccordion table.home th.report-head-team{ background:var(--report-month-strong) !important; color:var(--report-month-text) !important; } #reportAccordion table.home th.report-head-profit, #reportAccordion table.home th.report-head-special{ background:var(--report-special) !important; color:var(--report-text) !important; } #reportAccordion table.home th.report-head-danger{background:var(--report-danger) !important;color:var(--report-text) !important;} #reportAccordion table.home th.report-head-open{background:var(--report-open) !important;color:var(--report-text) !important;} #reportAccordion table.home th.report-head-current{background:var(--report-current) !important;color:var(--report-text) !important;} #reportAccordion table.home th.report-head-star{background:var(--report-month) !important;color:var(--report-month-text) !important;} #reportAccordion table.home th.report-head-branch{ background:linear-gradient(135deg,#f59e0b,#fbbf24) !important; color:#2d2104 !important; font-size:.92rem; padding:12px; } /* Score report data cells */ #reportAccordion table.home tbody td.report-cell-day, #reportAccordion table.home tbody td.report-cell-personal{background:var(--report-day) !important;} #reportAccordion table.home tbody td.report-cell-month, #reportAccordion table.home tbody td.report-cell-team{background:var(--report-month) !important;} /* สีแยกตามหัวข้อ: Header เข้ม / Body อ่อน */ #reportAccordion table.home th.score-col-p1{background:var(--p1-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p1{background:var(--p1-body)!important} #reportAccordion table.home th.score-col-p2{background:var(--p2-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p2{background:var(--p2-body)!important} #reportAccordion table.home th.score-col-p3{background:var(--p3-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p3{background:var(--p3-body)!important} #reportAccordion table.home th.score-col-p4{background:var(--p4-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p4{background:var(--p4-body)!important} #reportAccordion table.home th.score-col-p5{background:var(--p5-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p5{background:var(--p5-body)!important} #reportAccordion table.home th.score-col-p6{background:var(--p6-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p6{background:var(--p6-body)!important} #reportAccordion table.home th.score-col-p7{background:var(--p7-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-p7{background:var(--p7-body)!important} #reportAccordion table.home th.score-col-t1{background:var(--t1-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-t1{background:var(--t1-body)!important} #reportAccordion table.home th.score-col-t2{background:var(--t2-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-t2{background:var(--t2-body)!important} #reportAccordion table.home th.score-col-t3{background:var(--t3-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-t3{background:var(--t3-body)!important} #reportAccordion table.home th.score-col-t4{background:var(--t4-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-t4{background:var(--t4-body)!important} #reportAccordion table.home th.score-col-t5{background:var(--t5-head)!important;color:#fff!important} #reportAccordion table.home tbody td.score-col-t5{background:var(--t5-body)!important} #reportAccordion table.home tbody td.report-cell-special, #reportAccordion table.home tbody td.report-cell-action{background:var(--report-special) !important;} #reportAccordion table.home tbody td.report-cell-profit{background:var(--report-profit) !important;} #reportAccordion table.home tbody td.report-cell-danger{background:var(--report-danger) !important;} #reportAccordion table.home tbody td.report-cell-open{background:var(--report-open) !important;} #reportAccordion table.home tbody td.report-cell-current{background:var(--report-current) !important;} #reportAccordion table.home tbody td.report-cell-spare{background:var(--report-surface-alt) !important;color:var(--report-muted);} #reportAccordion table.home .employee-column{min-width:240px;} #reportAccordion table.home td.report-line-cell{ min-width:115px; background:var(--report-special) !important; color:var(--report-text); font-size:.88rem; font-weight:800; } #reportAccordion table.home td.report-employee-cell{ min-width:240px; background:var(--report-surface-alt) !important; } #reportAccordion .report-employee-cell .employee-name{ display:block; width:100%; margin-bottom:8px; color:var(--report-text); font-size:.88rem; font-weight:800; line-height:1.35; white-space:normal; } #reportAccordion .employee-score-highlight{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:0 0 7px; padding:7px 8px; border:1px solid #22c55e; border-radius:9px; background:var(--report-total); box-shadow:0 4px 12px rgba(34,197,94,.2); } #reportAccordion .score-total-label{ display:block; margin:0; color:var(--report-total-text); font-size:.72rem; font-weight:800; } #reportAccordion .score-total-value{ display:flex; align-items:center; justify-content:center; min-width:60px; padding:3px 10px; border:1px solid rgba(34,197,94,.42); border-radius:999px; background:var(--report-surface); color:var(--report-total-text); font-size:1rem; font-weight:900; } #reportAccordion .score-breakdown{ display:flex; align-items:center; justify-content:center; gap:5px; width:100%; margin-top:0; color:var(--report-muted); font-size:.68rem; font-weight:600; } #reportAccordion .score-breakdown b{color:var(--report-text);font-size:.75rem;} #reportAccordion .metric-value{ display:block !important; width:100%; margin:0 0 7px !important; color:var(--report-text); font-size:.92rem; font-weight:900; line-height:1.25; } #reportAccordion .metric-point{ display:block !important; width:max-content; min-width:72px; margin:0 auto !important; padding:4px 9px !important; background:var(--report-head) !important; color:var(--report-head-text) !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:999px; box-shadow:0 3px 9px rgba(15,23,42,.22); font-size:.72rem !important; font-weight:900 !important; line-height:1.2 !important; white-space:nowrap; } /* Badge คะแนนใช้สีเข้มให้สัมพันธ์กับแต่ละคอลัมน์ */ #reportAccordion td.score-col-p1 .metric-point{background:var(--p1-head)!important;} #reportAccordion td.score-col-p2 .metric-point{background:var(--p2-head)!important;} #reportAccordion td.score-col-p3 .metric-point{background:var(--p3-head)!important;} #reportAccordion td.score-col-p4 .metric-point{background:var(--p4-head)!important;} #reportAccordion td.score-col-p5 .metric-point{background:var(--p5-head)!important;} #reportAccordion td.score-col-p6 .metric-point{background:var(--p6-head)!important;} #reportAccordion td.score-col-p7 .metric-point{background:var(--p7-head)!important;} #reportAccordion td.score-col-t1 .metric-point{background:var(--t1-head)!important;} #reportAccordion td.score-col-t2 .metric-point{background:var(--t2-head)!important;} #reportAccordion td.score-col-t3 .metric-point{background:var(--t3-head)!important;} #reportAccordion td.score-col-t4 .metric-point{background:var(--t4-head)!important;} #reportAccordion td.score-col-t5 .metric-point{background:var(--t5-head)!important;} #reportAccordion .report-empty{ padding:28px !important; background:var(--report-surface) !important; color:var(--report-muted) !important; text-align:center; } /* Summary and number states */ #reportAccordion table.home tr.sum-color td{ background:var(--report-total) !important; color:var(--report-total-text) !important; font-weight:800; border-top:2px solid #22c55e !important; } #reportAccordion table.home td.is-danger, #reportAccordion table.home td.value-negative{color:#dc2626 !important;font-weight:800;} #reportAccordion table.home td.is-success{color:#15803d !important;font-weight:700;} html.dark-mode #reportAccordion table.home td.is-danger, html.dark-mode #reportAccordion table.home td.value-negative{color:#ff7b7b !important;} html.dark-mode #reportAccordion table.home td.is-success{color:#6ee7a0 !important;} /* Scrollbar */ #reportAccordion .table-responsive::-webkit-scrollbar{height:10px;width:10px;} #reportAccordion .table-responsive::-webkit-scrollbar-track{background:var(--report-surface-alt);} #reportAccordion .table-responsive::-webkit-scrollbar-thumb{ background:#94a3b8; border:2px solid var(--report-surface-alt); border-radius:999px; } @media (max-width:767.98px){ #reportAccordion .card-body{padding:8px !important;} #reportAccordion .report-filter-header{padding:10px;} #reportAccordion .report-filter-form{max-width:none;} #reportAccordion table.home{font-size:.76rem;} #reportAccordion table.home th, #reportAccordion table.home td{padding:7px 8px;} } /* ========================================================= FALLBACK OVERRIDE ใช้งานได้แม้ CSS เดิม/Bootstrap มี specificity สูงกว่า ========================================================= */ .score-report-table .metric-value, table.score-report-table .metric-value{ display:block !important; width:100% !important; margin:0 0 8px !important; font-size:.92rem !important; font-weight:900 !important; line-height:1.2 !important; } .score-report-table .metric-point, table.score-report-table small.metric-point, td .metric-point{ display:block !important; float:none !important; clear:both !important; position:relative !important; width:fit-content !important; min-width:74px !important; margin:0 auto !important; padding:5px 10px !important; border:1px solid rgba(255,255,255,.35) !important; border-radius:999px !important; background:#243b64 !important; color:#fff !important; box-shadow:0 3px 10px rgba(0,0,0,.28) !important; font-size:.72rem !important; font-weight:900 !important; line-height:1.2 !important; white-space:nowrap !important; } /* Header และ Body แยกสีแต่ละหัวข้อ โดยไม่ต้องพึ่ง #reportAccordion */ .score-report-table th.score-col-p1{background:#0f766e!important;color:#fff!important}.score-report-table td.score-col-p1{background:#ccfbf1!important;color:#172033!important}.score-report-table td.score-col-p1 .metric-point{background:#0f766e!important} .score-report-table th.score-col-p2{background:#0369a1!important;color:#fff!important}.score-report-table td.score-col-p2{background:#e0f2fe!important;color:#172033!important}.score-report-table td.score-col-p2 .metric-point{background:#0369a1!important} .score-report-table th.score-col-p3{background:#1d4ed8!important;color:#fff!important}.score-report-table td.score-col-p3{background:#dbeafe!important;color:#172033!important}.score-report-table td.score-col-p3 .metric-point{background:#1d4ed8!important} .score-report-table th.score-col-p4{background:#6d28d9!important;color:#fff!important}.score-report-table td.score-col-p4{background:#ede9fe!important;color:#172033!important}.score-report-table td.score-col-p4 .metric-point{background:#6d28d9!important} .score-report-table th.score-col-p5{background:#be123c!important;color:#fff!important}.score-report-table td.score-col-p5{background:#ffe4e6!important;color:#172033!important}.score-report-table td.score-col-p5 .metric-point{background:#be123c!important} .score-report-table th.score-col-p6{background:#c2410c!important;color:#fff!important}.score-report-table td.score-col-p6{background:#ffedd5!important;color:#172033!important}.score-report-table td.score-col-p6 .metric-point{background:#c2410c!important} .score-report-table th.score-col-p7{background:#4d7c0f!important;color:#fff!important}.score-report-table td.score-col-p7{background:#ecfccb!important;color:#172033!important}.score-report-table td.score-col-p7 .metric-point{background:#4d7c0f!important} .score-report-table th.score-col-t1{background:#a16207!important;color:#fff!important}.score-report-table td.score-col-t1{background:#fef3c7!important;color:#172033!important}.score-report-table td.score-col-t1 .metric-point{background:#a16207!important} .score-report-table th.score-col-t2{background:#b45309!important;color:#fff!important}.score-report-table td.score-col-t2{background:#ffedd5!important;color:#172033!important}.score-report-table td.score-col-t2 .metric-point{background:#b45309!important} .score-report-table th.score-col-t3{background:#b91c1c!important;color:#fff!important}.score-report-table td.score-col-t3{background:#fee2e2!important;color:#172033!important}.score-report-table td.score-col-t3 .metric-point{background:#b91c1c!important} .score-report-table th.score-col-t4{background:#047857!important;color:#fff!important}.score-report-table td.score-col-t4{background:#d1fae5!important;color:#172033!important}.score-report-table td.score-col-t4 .metric-point{background:#047857!important} .score-report-table th.score-col-t5{background:#7e22ce!important;color:#fff!important}.score-report-table td.score-col-t5{background:#f3e8ff!important;color:#172033!important}.score-report-table td.score-col-t5 .metric-point{background:#7e22ce!important} html.dark-mode .score-report-table td.score-col-p1{background:#153d3b!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p2{background:#16384d!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p3{background:#1d315b!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p4{background:#33265a!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p5{background:#4d2532!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p6{background:#4b2d20!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-p7{background:#30401f!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-t1{background:#45391e!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-t2{background:#49301f!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-t3{background:#4c2529!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-t4{background:#1d4035!important;color:#e7edf7!important} html.dark-mode .score-report-table td.score-col-t5{background:#3d2853!important;color:#e7edf7!important} /* ===== Final color adjustment ===== Body ใช้สีเดียวกับ Header และ Badge ใช้สีตัดกัน */ .score-report-table td.score-col-p1{background:#0f766e!important;color:#fff!important} .score-report-table td.score-col-p2{background:#0369a1!important;color:#fff!important} .score-report-table td.score-col-p3{background:#1d4ed8!important;color:#fff!important} .score-report-table td.score-col-p4{background:#6d28d9!important;color:#fff!important} .score-report-table td.score-col-p5{background:#be123c!important;color:#fff!important} .score-report-table td.score-col-p6{background:#c2410c!important;color:#fff!important} .score-report-table td.score-col-p7{background:#4d7c0f!important;color:#fff!important} .score-report-table td.score-col-t1{background:#a16207!important;color:#fff!important} .score-report-table td.score-col-t2{background:#b45309!important;color:#fff!important} .score-report-table td.score-col-t3{background:#b91c1c!important;color:#fff!important} .score-report-table td.score-col-t4{background:#047857!important;color:#fff!important} .score-report-table td.score-col-t5{background:#7e22ce!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p1{background:#115e59!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p2{background:#075985!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p3{background:#1e40af!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p4{background:#5b21b6!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p5{background:#9f1239!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p6{background:#9a3412!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-p7{background:#3f6212!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-t1{background:#854d0e!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-t2{background:#92400e!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-t3{background:#991b1b!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-t4{background:#065f46!important;color:#fff!important} html.dark-mode .score-report-table td.score-col-t5{background:#6b21a8!important;color:#fff!important} /* ค่าหลักใน Body เป็นสีขาว */ .score-report-table td[class*="score-col-"] .metric-value{ color:#fff!important; text-shadow:0 1px 2px rgba(0,0,0,.25); } /* คะแนนรวมแบบเล็ก ขนาดเดียวกับ Badge คะแนนทั่วไป */ #reportAccordion .employee-score-highlight, .score-report-table .employee-score-highlight{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; width:auto!important; min-width:0!important; margin:0 auto 6px!important; padding:5px 10px!important; background:#0f172a!important; color:#f8fafc!important; border:1px solid rgba(255,255,255,.4)!important; border-radius:999px!important; box-shadow:0 3px 9px rgba(0,0,0,.28)!important; } #reportAccordion .employee-score-highlight .score-total-label, .score-report-table .employee-score-highlight .score-total-label{ display:inline!important; margin:0!important; color:inherit!important; font-size:.7rem!important; font-weight:800!important; } #reportAccordion .employee-score-highlight .score-total-value, .score-report-table .employee-score-highlight .score-total-value{ display:inline!important; min-width:0!important; padding:0!important; background:transparent!important; color:#86efac!important; border:0!important; border-radius:0!important; font-size:.76rem!important; font-weight:900!important; line-height:1.2!important; } html:not(.dark-mode) .score-report-table .employee-score-highlight{ background:#ffffff!important; color:#172033!important; border-color:rgba(15,23,42,.3)!important; } html:not(.dark-mode) .score-report-table .employee-score-highlight .score-total-value{ color:#15803d!important; } /* ===== Group color layout ===== พื้นหลัง Header/Body ใช้สีตามกลุ่ม ส่วน Badge คงสีเดิมรายหัวข้อ */ :root{ --score-personal-group:#1f5a70; --score-team-group:#665719; } html.dark-mode{ --score-personal-group:#194b5f; --score-team-group:#564916; } /* คะแนนส่วนบุคคล: p1-p7 ใช้พื้นหลังเดียวกับหัวกลุ่ม */ .score-report-table th.report-head-personal, .score-report-table th.score-col-p1, .score-report-table th.score-col-p2, .score-report-table th.score-col-p3, .score-report-table th.score-col-p4, .score-report-table th.score-col-p5, .score-report-table th.score-col-p6, .score-report-table th.score-col-p7, .score-report-table td.score-col-p1, .score-report-table td.score-col-p2, .score-report-table td.score-col-p3, .score-report-table td.score-col-p4, .score-report-table td.score-col-p5, .score-report-table td.score-col-p6, .score-report-table td.score-col-p7{ background:var(--score-personal-group)!important; color:#fff!important; } /* คะแนนทีม: t1-t5 ใช้พื้นหลังเดียวกับหัวกลุ่ม */ .score-report-table th.report-head-team, .score-report-table th.score-col-t1, .score-report-table th.score-col-t2, .score-report-table th.score-col-t3, .score-report-table th.score-col-t4, .score-report-table th.score-col-t5, .score-report-table td.score-col-t1, .score-report-table td.score-col-t2, .score-report-table td.score-col-t3, .score-report-table td.score-col-t4, .score-report-table td.score-col-t5{ background:var(--score-team-group)!important; color:#fff!important; } /* Badge คะแนนคงสีเดิมของแต่ละหัวข้อ */ .score-report-table td.score-col-p1 .metric-point{background:#0f766e!important;color:#fff!important} .score-report-table td.score-col-p2 .metric-point{background:#0369a1!important;color:#fff!important} .score-report-table td.score-col-p3 .metric-point{background:#1d4ed8!important;color:#fff!important} .score-report-table td.score-col-p4 .metric-point{background:#6d28d9!important;color:#fff!important} .score-report-table td.score-col-p5 .metric-point{background:#be123c!important;color:#fff!important} .score-report-table td.score-col-p6 .metric-point{background:#c2410c!important;color:#fff!important} .score-report-table td.score-col-p7 .metric-point{background:#4d7c0f!important;color:#fff!important} .score-report-table td.score-col-t1 .metric-point{background:#a16207!important;color:#fff!important} .score-report-table td.score-col-t2 .metric-point{background:#b45309!important;color:#fff!important} .score-report-table td.score-col-t3 .metric-point{background:#b91c1c!important;color:#fff!important} .score-report-table td.score-col-t4 .metric-point{background:#047857!important;color:#fff!important} .score-report-table td.score-col-t5 .metric-point{background:#7e22ce!important;color:#fff!important} /* ===== Priority group palette ===== Selector ชุดนี้อยู่ท้ายไฟล์และมี specificity สูงกว่า CSS เดิม */ html body #reportAccordion table.home.score-report-table th.report-head-personal{ background:#1f5a70!important; color:#fff!important; } html body #reportAccordion table.home.score-report-table th.score-col-p1, html body #reportAccordion table.home.score-report-table th.score-col-p2, html body #reportAccordion table.home.score-report-table th.score-col-p3, html body #reportAccordion table.home.score-report-table th.score-col-p4, html body #reportAccordion table.home.score-report-table th.score-col-p5, html body #reportAccordion table.home.score-report-table th.score-col-p6, html body #reportAccordion table.home.score-report-table th.score-col-p7{ background:#2b6f85!important; color:#fff!important; } html body #reportAccordion table.home.score-report-table td.score-col-p1, html body #reportAccordion table.home.score-report-table td.score-col-p2, html body #reportAccordion table.home.score-report-table td.score-col-p3, html body #reportAccordion table.home.score-report-table td.score-col-p4, html body #reportAccordion table.home.score-report-table td.score-col-p5, html body #reportAccordion table.home.score-report-table td.score-col-p6, html body #reportAccordion table.home.score-report-table td.score-col-p7{ background:#245768!important; color:#f0fbff!important; } html body #reportAccordion table.home.score-report-table td.score-col-p1 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p2 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p3 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p4 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p5 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p6 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p7 .metric-point{ background:#3b8498!important; color:#fff!important; border-color:#75c5d8!important; } html body #reportAccordion table.home.score-report-table th.report-head-team{ background:#665719!important; color:#fff!important; } html body #reportAccordion table.home.score-report-table th.score-col-t1, html body #reportAccordion table.home.score-report-table th.score-col-t2, html body #reportAccordion table.home.score-report-table th.score-col-t3, html body #reportAccordion table.home.score-report-table th.score-col-t4, html body #reportAccordion table.home.score-report-table th.score-col-t5{ background:#806d25!important; color:#fff!important; } html body #reportAccordion table.home.score-report-table td.score-col-t1, html body #reportAccordion table.home.score-report-table td.score-col-t2, html body #reportAccordion table.home.score-report-table td.score-col-t3, html body #reportAccordion table.home.score-report-table td.score-col-t4, html body #reportAccordion table.home.score-report-table td.score-col-t5{ background:#62562c!important; color:#fffbea!important; } html body #reportAccordion table.home.score-report-table td.score-col-t1 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t2 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t3 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t4 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t5 .metric-point{ background:#9b863b!important; color:#fff!important; border-color:#d7c36d!important; } /* Dark mode: โทนเดิมแต่ลดความสว่างลงเล็กน้อย */ html.dark-mode body #reportAccordion table.home.score-report-table th.report-head-personal{background:#194b5f!important} html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p1, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p2, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p3, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p4, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p5, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p6, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-p7{background:#28677b!important} html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p1, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p2, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p3, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p4, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p5, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p6, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-p7{background:#204d5d!important} html.dark-mode body #reportAccordion table.home.score-report-table th.report-head-team{background:#564916!important} html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-t1, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-t2, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-t3, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-t4, html.dark-mode body #reportAccordion table.home.score-report-table th.score-col-t5{background:#716020!important} html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-t1, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-t2, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-t3, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-t4, html.dark-mode body #reportAccordion table.home.score-report-table td.score-col-t5{background:#574c27!important} /* ===== Theme-aware final palette ===== */ #reportAccordion{ --personal-group-head:#155e75; --personal-detail-head:#c8edf5; --personal-detail-body:#e8f7fa; --personal-detail-text:#123b49; --personal-badge:#a9deea; --personal-badge-text:#123b49; --personal-border:#86cad9; --team-group-head:#6b5715; --team-detail-head:#f4e7aa; --team-detail-body:#fff7d6; --team-detail-text:#493b0b; --team-badge:#e9d176; --team-badge-text:#493b0b; --team-border:#d3b84f; } html.dark-mode #reportAccordion{ --personal-group-head:#163f51; --personal-detail-head:#245d70; --personal-detail-body:#265a6d; --personal-detail-text:#e3f8fc; --personal-badge:#1e4b59; --personal-badge-text:#f0fbff; --personal-border:#55a2b5; --team-group-head:#4d4117; --team-detail-head:#6a5921; --team-detail-body:#4c4327; --team-detail-text:#fff5c7; --team-badge:#8b7636; --team-badge-text:#fffbea; --team-border:#b49a48; } /* หัวกลุ่ม */ html body #reportAccordion table.home.score-report-table th.report-head-personal{ background:var(--personal-group-head)!important; color:#fff!important; } html body #reportAccordion table.home.score-report-table th.report-head-team{ background:var(--team-group-head)!important; color:#fff!important; } /* หัวข้อย่อยคะแนนส่วนบุคคล */ html body #reportAccordion table.home.score-report-table th.score-col-p1, html body #reportAccordion table.home.score-report-table th.score-col-p2, html body #reportAccordion table.home.score-report-table th.score-col-p3, html body #reportAccordion table.home.score-report-table th.score-col-p4, html body #reportAccordion table.home.score-report-table th.score-col-p5, html body #reportAccordion table.home.score-report-table th.score-col-p6, html body #reportAccordion table.home.score-report-table th.score-col-p7{ background:var(--personal-detail-head)!important; color:var(--personal-detail-text)!important; border-color:var(--personal-border)!important; } /* Body คะแนนส่วนบุคคล */ html body #reportAccordion table.home.score-report-table td.score-col-p1, html body #reportAccordion table.home.score-report-table td.score-col-p2, html body #reportAccordion table.home.score-report-table td.score-col-p3, html body #reportAccordion table.home.score-report-table td.score-col-p4, html body #reportAccordion table.home.score-report-table td.score-col-p5, html body #reportAccordion table.home.score-report-table td.score-col-p6, html body #reportAccordion table.home.score-report-table td.score-col-p7{ background:var(--personal-detail-body)!important; color:var(--personal-detail-text)!important; border-color:var(--personal-border)!important; } /* Badge คะแนนส่วนบุคคล */ html body #reportAccordion table.home.score-report-table td.score-col-p1 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p2 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p3 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p4 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p5 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p6 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-p7 .metric-point{ background:var(--personal-badge)!important; color:var(--personal-badge-text)!important; border-color:var(--personal-border)!important; box-shadow:0 3px 8px rgba(15,94,117,.2)!important; } /* หัวข้อย่อยคะแนนทีม */ html body #reportAccordion table.home.score-report-table th.score-col-t1, html body #reportAccordion table.home.score-report-table th.score-col-t2, html body #reportAccordion table.home.score-report-table th.score-col-t3, html body #reportAccordion table.home.score-report-table th.score-col-t4, html body #reportAccordion table.home.score-report-table th.score-col-t5{ background:var(--team-detail-head)!important; color:var(--team-detail-text)!important; border-color:var(--team-border)!important; } /* Body คะแนนทีม */ html body #reportAccordion table.home.score-report-table td.score-col-t1, html body #reportAccordion table.home.score-report-table td.score-col-t2, html body #reportAccordion table.home.score-report-table td.score-col-t3, html body #reportAccordion table.home.score-report-table td.score-col-t4, html body #reportAccordion table.home.score-report-table td.score-col-t5{ background:var(--team-detail-body)!important; color:var(--team-detail-text)!important; border-color:var(--team-border)!important; } /* Badge คะแนนทีม */ html body #reportAccordion table.home.score-report-table td.score-col-t1 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t2 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t3 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t4 .metric-point, html body #reportAccordion table.home.score-report-table td.score-col-t5 .metric-point{ background:var(--team-badge)!important; color:var(--team-badge-text)!important; border-color:var(--team-border)!important; box-shadow:0 3px 8px rgba(107,87,21,.2)!important; } /* ค่า Metric ต้องเปลี่ยนสีตาม Theme ด้วย */ html body #reportAccordion table.home.score-report-table td[class*="score-col-"] .metric-value{ color:inherit!important; text-shadow:none!important; } /* Dark-mode specificity override */ html.dark-mode body #reportAccordion table.home.score-report-table th:is(.score-col-p1,.score-col-p2,.score-col-p3,.score-col-p4,.score-col-p5,.score-col-p6,.score-col-p7){ background:var(--personal-detail-head)!important; color:var(--personal-detail-text)!important; border-color:var(--personal-border)!important; } html.dark-mode body #reportAccordion table.home.score-report-table td:is(.score-col-p1,.score-col-p2,.score-col-p3,.score-col-p4,.score-col-p5,.score-col-p6,.score-col-p7){ background:var(--personal-detail-body)!important; color:var(--personal-detail-text)!important; border-color:var(--personal-border)!important; } html.dark-mode body #reportAccordion table.home.score-report-table td:is(.score-col-p1,.score-col-p2,.score-col-p3,.score-col-p4,.score-col-p5,.score-col-p6,.score-col-p7) .metric-point{ background:var(--personal-badge)!important; color:var(--personal-badge-text)!important; border-color:var(--personal-border)!important; } html.dark-mode body #reportAccordion table.home.score-report-table th:is(.score-col-t1,.score-col-t2,.score-col-t3,.score-col-t4,.score-col-t5){ background:var(--team-detail-head)!important; color:var(--team-detail-text)!important; border-color:var(--team-border)!important; } html.dark-mode body #reportAccordion table.home.score-report-table td:is(.score-col-t1,.score-col-t2,.score-col-t3,.score-col-t4,.score-col-t5){ background:var(--team-detail-body)!important; color:var(--team-detail-text)!important; border-color:var(--team-border)!important; } html.dark-mode body #reportAccordion table.home.score-report-table td:is(.score-col-t1,.score-col-t2,.score-col-t3,.score-col-t4,.score-col-t5) .metric-point{ background:var(--team-badge)!important; color:var(--team-badge-text)!important; border-color:var(--team-border)!important; }