/* ==========================================================================
   ClassKit Global - Multiplication & Times Table Grids Stylesheet
   ========================================================================== */

.mult-sheet {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 16mm 16mm 14mm;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  position: relative;
  page-break-after: always;
  break-after: page;
}

.mult-directive-banner {
  background: #F8FAFC;
  border-left: 4px solid #059669;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #334155;
  margin-bottom: 14px;
  line-height: 1.4;
}

.mult-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.mult-grid-frame {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mult-grid {
  display: grid;
  width: 100%;
  border: 2px solid #0F172A;
  background: #FFFFFF;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.mult-grid.grid-10 {
  grid-template-columns: repeat(11, 1fr);
}

.mult-grid.grid-12 {
  grid-template-columns: repeat(13, 1fr);
}

.mult-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-right: 1px solid #CBD5E1;
  border-bottom: 1px solid #CBD5E1;
  font-size: 13.5px;
  font-weight: 600;
  color: #1E293B;
  box-sizing: border-box;
}

.mult-grid.grid-12 .mult-cell {
  font-size: 11.5px;
}

/* Header Cells (Multiplier row & column) */
.mult-cell.is-header {
  background-color: #0F172A;
  color: #FFFFFF;
  font-weight: 800;
  border-color: #334155;
}

.mult-cell.is-corner {
  background-color: #059669;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 900;
}

/* Special Highlighting */
.mult-cell.is-square {
  background-color: #FEF3C7;
  color: #92400E;
  font-weight: 800;
}

.mult-cell.is-highlighted {
  background-color: #ECFDF5;
  color: #065F46;
  font-weight: 700;
}

.mult-cell.is-missing {
  background-color: #FFFFFF;
  position: relative;
}

.mult-cell.is-missing::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed #94A3B8;
  border-radius: 4px;
  background-color: #F8FAFC;
}

.mult-cell.is-blank {
  background-color: #FFFFFF;
}

/* Print Overrides */
@media print {
  .mult-sheet {
    padding: 12mm 12mm 10mm !important;
  }

  .mult-grid {
    box-shadow: none !important;
    border-width: 1.5pt !important;
  }

  .mult-cell {
    border-color: #94A3B8 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .mult-cell.is-header {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
  }

  .mult-cell.is-corner {
    background-color: #059669 !important;
    color: #FFFFFF !important;
  }

  .mult-cell.is-square {
    background-color: #FEF3C7 !important;
  }

  .mult-cell.is-highlighted {
    background-color: #E2E8F0 !important;
  }
}