/* Shared responsive safeguards for every MCT page */
*,*::before,*::after{box-sizing:border-box}
html{width:100%;overflow-x:clip;scroll-padding-top:1rem}
body{width:100%;max-width:100%;overflow-x:clip}
main,section,article,header,footer,nav,form,dialog,[class*="grid"],[class*="card"],[class*="wrap"],[class*="shell"]{min-width:0}
img,picture,video,canvas,iframe,svg{max-width:100%}
input,select,textarea,button{max-width:100%;min-width:0}
h1,h2,h3,h4,p,li,a,label,small,strong{overflow-wrap:anywhere}
table{max-width:100%}
:where(button,a,input,select,textarea):focus-visible{scroll-margin-block:1rem}

/* Project admin: reflow requests as cards instead of forcing a wide table */
@media(max-width:700px){
  .request-card{overflow:hidden}
  .request-list{width:100%;min-width:0}
  .request-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 12px;
    align-items:start;
    min-width:0;
    padding:16px;
  }
  .request-row>.project-cell{grid-column:1/-1;min-width:0}
  .request-row>.project-cell strong{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .request-row>.contact-cell,
  .request-row>div:nth-child(3),
  .request-row>.date-cell,
  .request-row>.action-cell{min-width:0}
  .request-row>div:nth-child(3)::before,
  .request-row>.date-cell::before,
  .request-row>.action-cell::before{
    display:block;
    margin-bottom:7px;
    color:#60759c;
    font:700 8px/1.3 "Space Grotesk",sans-serif;
    letter-spacing:1.3px;
  }
  .request-row>div:nth-child(3)::before{content:"STATUS"}
  .request-row>.date-cell::before{content:"DATE"}
  .request-row>.action-cell::before{content:"ACTIONS"}
  .request-row .status-select{width:100%;min-width:0}
  .request-row .action-cell{flex-wrap:wrap}
}
@media(max-width:420px){
  .request-row{gap:12px 9px;padding:14px}
  .request-row>.contact-cell strong{font-size:10px;overflow-wrap:anywhere}
  .request-row .status-select{padding-inline:5px;font-size:8px;letter-spacing:.3px}
  .details-modal{width:100%;max-width:100%;max-height:calc(100dvh - 20px);padding:24px 16px}
  .modal-backdrop{padding:10px}
}
@media(max-width:360px){
  .request-row{grid-template-columns:minmax(0,1fr)}
  .request-row>.project-cell{grid-column:auto}
}
@media(max-width:520px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}