/*
 * NEKO SOUL — Universal OMR Card Mobile Responsive
 * Reusable across CBT pages.
 *
 * Required structure:
 *   <aside class="omr-card"> ... <div id="question-grid"> ... </div> ... </aside>
 *
 * The CBT JavaScript may continue generating each answer button with
 * its existing Tailwind classes; this stylesheet only controls responsive layout.
 */

/* OMR grid: keep rows compact */
#question-grid {
  align-content: start;
  grid-auto-rows: max-content;
}

/* ============================================================
   MOBILE OMR CARD
   ============================================================ */
@media (max-width: 767px) {
  /*
   * Target the OMR panel without depending on a CBT-specific ID.
   * Add class="omr-card" to the OMR <aside>.
   */
  .omr-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 0.9rem !important;
    overflow: hidden !important;
  }

  /* OMR header */
  .omr-card .omr-card-header {
    padding: 0.75rem 0.75rem !important;
    gap: 0.45rem !important;
  }

  .omr-card .omr-card-header h2 {
    min-width: 0;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
  }

  .omr-card .omr-progress-count {
    flex-shrink: 0;
    font-size: 0.58rem !important;
    padding: 0.2rem 0.4rem !important;
    white-space: nowrap;
  }

  .omr-card .omr-progress-bar {
    height: 0.35rem !important;
  }

  /* Legend */
  .omr-card .omr-legend {
    padding: 0.45rem 0.6rem !important;
    gap: 0.35rem !important;
    font-size: 0.52rem !important;
    line-height: 1.1 !important;
    flex-wrap: wrap;
  }

  .omr-card .omr-legend > span {
    white-space: nowrap;
  }

  .omr-card .omr-legend-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    flex-shrink: 0;
  }

  /* Question number grid */
  .omr-card #question-grid {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.65rem !important;

    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.4rem !important;

    max-height: 330px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    align-content: start !important;
    grid-auto-rows: max-content !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /*
   * OMR buttons are generated by JavaScript.
   * No dependency on the exact Tailwind utility combination.
   */
  .omr-card #question-grid > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0.55rem !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;

    box-sizing: border-box !important;
    position: relative;
  }

  .omr-card #question-grid > button > span:first-child {
    line-height: 1 !important;
  }

  .omr-card #question-grid > button > span:last-child {
    font-size: 0.55rem !important;
    line-height: 1 !important;
  }

  /* Bottom submit area */
  .omr-card .omr-card-footer {
    padding: 0.6rem !important;
    gap: 0.4rem !important;
  }

  .omr-card .omr-card-footer button {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0.55rem 0.65rem !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
  }
}

/* ============================================================
   VERY SMALL PHONES — <= 390px
   ============================================================ */
@media (max-width: 390px) {
  .omr-card {
    border-radius: 0.75rem !important;
  }

  .omr-card .omr-card-header {
    padding: 0.6rem !important;
  }

  .omr-card .omr-card-header h2 {
    font-size: 0.76rem !important;
  }

  .omr-card .omr-progress-count {
    font-size: 0.52rem !important;
    padding: 0.18rem 0.32rem !important;
  }

  .omr-card .omr-legend {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.48rem !important;
  }

  .omr-card #question-grid {
    padding: 0.5rem !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.3rem !important;
    max-height: 300px !important;
  }

  .omr-card #question-grid > button {
    height: 35px !important;
    min-height: 35px !important;
    border-radius: 0.5rem !important;
    font-size: 0.63rem !important;
  }

  .omr-card #question-grid > button > span:last-child {
    font-size: 0.5rem !important;
  }

  .omr-card .omr-card-footer {
    padding: 0.5rem !important;
  }

  .omr-card .omr-card-footer button {
    min-height: 40px !important;
    font-size: 0.58rem !important;
  }
}

/* ============================================================
   OPTIONAL: if the existing CBT does NOT have .omr-card
   Add class="omr-card" to the OMR <aside>.
   The generic #question-grid rules above remain compatible.
   ============================================================ */
