.grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
    @media (max-width: 1100px){ .grid3{ grid-template-columns:1fr; } }
    @media (max-width: 980px){
      html, body, #root{ height:auto; overflow:visible; }
      .app{ flex-direction:column; min-height:100vh; height:auto; overflow:visible; }
      .sidebar{ width:100%; height:auto; overflow:visible; }
      .main{ min-height:0; height:auto; padding:18px; overflow:visible; }
      .grid2{ grid-template-columns:1fr; }
    }

    /* Desktop scroll containment: keep the shell and sidebar inside the viewport.
       Page content scrolls only inside .main. Mobile keeps the existing document flow above. */
    @media (min-width: 981px){
      html, body, #root{ height:100%; overflow:hidden; }
      .app{ height:100vh; height:100dvh; min-height:0; overflow:hidden; }
      .sidebar{ flex:0 0 var(--sidebar); height:100%; min-height:0; overflow:hidden; }
      .main{ min-width:0; min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; }
    }
    table{ width:100%; border-collapse:collapse; }
    th,td{ padding:12px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
    th{ background:#f9fafb; font-weight:900; color:#111827; font-size:13px; }
    tr:hover td{ background:#fcfcfc; }
    .btn{ border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-size:14px; font-weight:900; }
    .btnPrimary{ background:var(--primary); color:#fff; }
    .btnPrimary:hover{ background:var(--primary-dark); }
    .btnOutline{ background:#fff; border:1px solid var(--border); color:#374151; }
    .btnOutline:hover{ background:#f3f4f6; }
    .btnSm{ padding:7px 10px; font-size:12px; border-radius:10px; }
    .btn:disabled{ opacity:.55; cursor:not-allowed; }
    .input{ width:100%; padding:12px; border:1px solid var(--border); border-radius:10px; font-size:14px; background:#fff; color:var(--text); caret-color:var(--text); }
    .input::placeholder{ color:var(--muted); }
    input.input:-webkit-autofill,
    input.input:-webkit-autofill:hover,
    input.input:-webkit-autofill:focus,
    textarea.input:-webkit-autofill,
    select.input:-webkit-autofill{
      -webkit-text-fill-color: var(--text) !important;
      box-shadow: 0 0 0px 1000px #fff inset !important;
    }
    .input:focus{ outline:none; border-color:rgba(76,175,80,.65); box-shadow:0 0 0 2px rgba(76,175,80,.15); }
    select.input{ background-color:#fff; cursor:pointer; }
    .chipWrap{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .chip{ display:inline-flex; align-items:center; padding:7px 10px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.06); font-size:12px; font-weight:900; color:#111827; }
    .badge{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid var(--border); }
    .badgeReq{ background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.35); color:#92400e; }
    .badgeWarn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.32); color:#92400e; }
    .badgeReady{ background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.28); color:#166534; }
    .badgeLbl{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.28); color:#1d4ed8; }
    .badgeAdmin{ background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.28); color:#5b21b6; }
    .badgeStaff{ background:rgba(2,132,199,.12); border-color:rgba(2,132,199,.25); color:#075985; }

    /* modal */