/* ==========================================================================
   ClassKit Global - 100-Chart & Number Grids Stylesheet
   Calibrated for high-precision A4 & US Letter printing
   Strict Decoupling: Under 400 lines
   ========================================================================== */

.hundred-sheet {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  page-break-after: always;
  break-after: page;
  padding: 8mm 10mm 6mm 10mm;
}

/* Directive Banner */
.hundred-directive-banner {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-left: 4px solid #059669;
  padding: 5px 10px;
  font-size: 8pt;
  line-height: 1.35;
  color: #1E293B;
  border-radius: 4px;
  margin-bottom: 3.5mm;
  box-sizing: border-box;
}

/* Main Grid Container */
.hundred-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.hundred-grid-frame {
  width: 100%;
  max-width: 178mm;
  background: #FFFFFF;
  border: 2px solid #0F172A;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hundred-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 100%;
  box-sizing: border-box;
}

.hundred-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 13pt;
  font-weight: 800;
  color: #0F172A;
  border-right: 1px solid #CBD5E1;
  border-bottom: 1px solid #CBD5E1;
  box-sizing: border-box;
  user-select: none;
  background: #FFFFFF;
  transition: background-color 0.1s ease;
}

.hundred-cell:nth-child(10n) {
  border-right: none;
}

.hundred-cell:nth-last-child(-n+10) {
  border-bottom: none;
}

/* Column 10 Highlight */
.hundred-cell.col-10 {
  background: #F8FAFC;
}

/* Missing Cell */
.hundred-cell.is-missing {
  background: #FFFFFF;
  color: transparent !important;
  position: relative;
}

.hundred-cell.is-missing::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 50%;
  height: 1.5px;
  border-bottom: 1.5px dotted #94A3B8;
}

/* Highlighted Cell (Skip Counting) */
.hundred-cell.is-highlighted {
  background: #ECFDF5 !important;
  color: #065F46;
  font-weight: 900;
}

/* Blank Grid Mode */
.hundred-cell.is-blank {
  color: transparent !important;
}

/* Sheet Footer */
.sheet-footer-block {
  margin-top: auto;
  padding-top: 2mm;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 7pt;
  color: #64748B;
  box-sizing: border-box;
}

.footer-brand-tag {
  font-weight: 700;
  color: #0F172A;
}

/* Print Specific */
@media print {
  .studio-header,
  .studio-sidebar,
  .pro-modal-backdrop {
    display: none !important;
  }

  .studio-body {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  .studio-viewport {
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
  }

  .a4-wrapper {
    transform: none !important;
  }

  .hundred-sheet {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-after: always !important;
    break-after: page !important;
    width: 100% !important;
  }

  .hundred-grid-frame {
    border-color: #000000 !important;
  }

  .hundred-cell {
    border-color: #000000 !important;
  }

  .hundred-cell.is-highlighted {
    background: #E2E8F0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}