/* EDUHUNT R419 — PRINCIPAL ONLY — mobile/tablet Execution Status + Exams hub spacing
   Scope: Principal Portal, <=1024px only. Desktop is intentionally untouched. */
@media (max-width:1024px){
  /* ---------------------------------------------------------
     1) CDF execution workflow: EXACTLY 4 workflow cells in 2x2.
        Test Date already appears in the CDF heading row, so the
        duplicate Test Date workflow cell is hidden on mobile/tablet.
     --------------------------------------------------------- */
  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:8px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
  }

  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-cdf-mobile-head{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:center !important;
    min-height:52px !important;
    margin:0 0 2px !important;
    border-radius:10px !important;
    overflow:hidden !important;
  }

  /* Desktop identity columns are duplicated by the compact CDF header. */
  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-identity{
    display:none !important;
  }

  /* Test date is already the 3rd item in the compact CDF heading. */
  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > [data-mobile-label="Test Date"]{
    display:none !important;
  }

  /* Remaining four: Dispatch / School Received / Test Conducted / Result Uploaded. */
  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-cell:not([data-mobile-label="Test Date"]){
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:66px !important;
    margin:0 !important;
    padding:10px 8px !important;
    border-radius:10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-cell:not([data-mobile-label="Test Date"])::before{
    content:attr(data-mobile-label) !important;
    position:static !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    font-size:9px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    text-transform:uppercase !important;
    opacity:.9 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-cell:not([data-mobile-label="Test Date"]) > b{
    display:block !important;
    width:100% !important;
    font-size:17px !important;
    line-height:1.15 !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
  }

  /* Remove inherited separators that make the 2x2 cells appear joined. */
  body[data-portal-role="PRINCIPAL"] .exam-v3-principal-table-row.is-cdf > .exam-v3-principal-cell{
    border-right:0 !important;
    border-bottom:0 !important;
  }

  /* ---------------------------------------------------------
     2) Principal Exams hub: retain 3 per row, add visible gaps.
     --------------------------------------------------------- */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:8px !important;
    row-gap:8px !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item{
    width:100% !important;
    min-width:0 !important;
    min-height:108px !important;
    height:108px !important;
    margin:0 !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item:active,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item:hover{
    transform:none !important;
  }
}

@media (max-width:560px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-grid{
    column-gap:7px !important;
    row-gap:7px !important;
    gap:7px !important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub--exams .principal-hub-item{
    min-height:102px !important;
    height:102px !important;
    padding:9px 5px !important;
  }
}