/* 1 */

.cc-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  box-sizing:border-box;
}

.cc-table{
  width:100%;
  min-width:0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}

#cc-table-container{
  width:100%;
  max-width:1660px;
  margin:0 auto;
  min-width:0;
  overflow:auto;
}

#cc-table-scroll{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
}

/* 2 */
#cc-table-container.cc-compact-mode #cc-table-scroll{
  max-height:520px;
  overflow-y:auto;
  overflow-x:auto;
  padding-right:4px;
}

/* 3*/
#cc-table-container.cc-compact-mode #cc-table-scroll::-webkit-scrollbar{
  width:10px;
}

#cc-table-container.cc-compact-mode #cc-table-scroll::-webkit-scrollbar-thumb{
  background:#c4c9d4;
  border-radius:999px;
}

#cc-table-container.cc-compact-mode #cc-table-scroll::-webkit-scrollbar-track{
  background:#eef1f5;
  border-radius:999px;
}

/* 4 */

.cc-table thead th{
  background:#f3f4f6;
  color:#1f2937;
  font-weight:800;
  position:sticky;
  top:0;
  z-index:1;
}

/* 5 */

.cc-table th,
.cc-table td{
  border:1px solid var(--cc-border);
  padding:8px;
  text-align:center;
  vertical-align:middle;
  word-break:break-word;
}

/* 6 */

.cc-subject{
  text-align:left;
  font-weight:700;
  min-width:130px;
  max-width:130px;
  background:#ffffff;
  font-size:14px;
  word-break:normal;
  overflow-wrap:normal;
}

.cc-term-col{
  min-width:58px;
}

.cc-term-label{
  font-weight:700;
  color:#374151;
  background:#fafafa;
  min-width:58px;
  max-width:58px;
  font-size:16px;
  text-align:center;
}

/* 7 */

.cc-halfavg,
.cc-halfgrade{
  min-width:72px;
}

.cc-finalgrade{
  min-width:74px;
  max-width:74px;
  line-height:1.1;
}

.cc-avg-term,
.cc-final-term,
.cc-overall-final{
  font-weight:700;
  background:#fafafa;
}

.cc-overall-final{
  font-size:16px;
  background:#f3f4f6;
}

.cc-avg{
  font-weight:800;
}

.cc-overall-cell{
  background:#f8fafc;
  border-left:3px solid #6b7280 !important;
}

.cc-overall-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:88px;
}

.cc-overall-avg{
  font-size:15px;
  font-weight:800;
  color:var(--cc-text);
}

.cc-overall-divider{
  width:28px;
  height:2px;
  background:#cbd5e1;
  border-radius:999px;
}

.cc-overall-final{
  font-size:17px;
}

/*8 */

.cc-table tbody tr.cc-subject-row--term1{
  background:#fcfcff;
}

.cc-table tbody tr.cc-subject-row--term2{
  background:#ffffff;
}

.cc-table tbody tr:hover{
  background:#f3f4f6;
}

/* 9 */
.cc-subject-row--term1 .cc-subject{
  border-bottom:0;
}

.cc-subject-row--term2 .cc-term-label,
.cc-subject-row--term2 .grade-cell,
.cc-subject-row--term2 .cc-avg-term,
.cc-subject-row--term2 .cc-final-term{
  border-top:0;
}

/* 10 */
.cc-subject-row--term1 .cc-subject,
.cc-subject-row--term1 .cc-overall-cell,
.cc-subject-row--term1 .cc-improve-cell,
.cc-subject-row--term2 td{
  border-bottom:3px solid #9ca3af !important;
}

/* 11*/

.grade-cell input{
  width:42px;
  height:34px;
  font-size:14px;
  text-align:center;
  border:1px solid var(--cc-border);
  border-radius:10px;
  outline:none;
  transition:box-shadow .15s, border-color .15s;
  padding:0;
}

.grade-cell input:focus{
  border-color:var(--cc-primary-600);
  box-shadow:0 0 0 6px var(--cc-ring);
}

.grade-cell input.cc-grade-term1-purple{
  color:#7c3aed !important;
  border-color:#7c3aed !important;
  box-shadow:inset 0 0 0 1px rgba(124,58,237,.15);
  font-weight:800;
}

.cc-subject-row--term1.cc-term1-has-term2 .grade-cell input:not(.cc-suggested-grade):not(:placeholder-shown),
.cc-subject-row--term1.cc-term1-has-term2 .grade-cell input[value]{
  color:#7c3aed;
}

.cc-subject-row--term1.cc-term1-has-term2 .cc-term-label{
  color:#7c3aed;
  font-weight:800;
}

/* 12*/
.grade-cell input::-webkit-outer-spin-button,
.grade-cell input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.grade-cell input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

/* 13 */

th.cc-actions-th,
td.cc-actions-cell{
  border:1px solid #d1d5db;
  text-align:center;
  width:44px;
  min-width:44px;
  vertical-align:middle;
  background:#f3f4f6;
}

.cc-actions-cell{
  background:#ffffff;
}

.cc-improve-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
  width:100%;
}

.cc-improve-cell .cc-refresh-btn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:10px !important;
  border:1px solid #111827 !important;
  background:#111827 !important;
  color:#fff !important;

  font-size:22px !important;
  font-weight:700 !important;
  line-height:1 !important;
  box-sizing:border-box !important;

  appearance:none !important;
  -webkit-appearance:none !important;
  box-shadow:0 6px 16px rgba(0,0,0,.16) !important;
  cursor:pointer;
  transition:all .15s ease;
}

.cc-improve-cell .cc-refresh-btn:hover{
  background:#fff !important;
  color:#111827 !important;
  border-color:#111827 !important;
}

.cc-improve-cell .cc-refresh-btn:focus,
.cc-improve-cell .cc-refresh-btn:focus-visible{
  outline:none !important;
}

/* 14 */
.cc-improve-cell .cc-refresh-btn:active{
  transform:translateY(1px);
}

/* 15 */

th.cc-improve-th,
td.cc-improve-cell{
  border:1px solid #d1d5db;
  text-align:center;
  width:110px;
  min-width:110px;
  max-width:110px;
  vertical-align:middle;
  background:#f3f4f6;
  padding:8px;
}

/* 16 */

@media (max-width:1400px){

  .cc-table-scroll{
    width:100%;
    max-width:100%;
    margin:0 auto;
    overflow-x:auto;
    overflow-y:visible;
  }

  .cc-table{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .grade-cell input{
    width:38px;
    font-size:13px;
  }

  .cc-subject{
    min-width:110px;
    max-width:110px;
  }

  #cc-table-container.cc-compact-mode #cc-table-scroll{
    max-height:460px;
  }
}

/* 17 */
.cc-card #cc-table-container{
  width:calc(100% + 36px);
  margin-left:-18px;
  margin-right:-18px;
  max-width:none !important;
}

/* 18 */
.cc-card #cc-table-scroll{
  width:100%;
  max-width:100%;
}

/* 19 */
@media (max-width:900px){
  .cc-card #cc-table-container{
    width:calc(100% + 28px);
    margin-left:-14px;
    margin-right:-14px;
  }
}

/* 20 */
.cc-suggested-metric{
  color:#166534 !important;
  font-weight:800;
  background:#ecfdf5 !important;
}

/* 21 */
.cc-suggested-metric-bg{
  background:#ecfdf5;
}