/* MCPL responsive / usability fixes from the responsive audit (presentation only).
   No original rule, script, id, handler or data flow is changed. */

/* R1 (high) Add Member form taller than short laptop / zoomed windows: header and
   Cancel / Save were cut off and unreachable. The card now fits the window and
   scrolls inside itself. */
.modal-backdrop>.modal-card{max-height:calc(100vh - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;overscroll-behavior:contain}

/* R2 (medium) Phones / small tablets: the original reserves a 60-68 px empty strip
   on the left for a ".sidebar" element that does not exist (the sidebar is hidden
   below 800 px and the bottom navigation is used). Content now uses the full width. */
@media(max-width:800px){
 .app>.main{margin-left:0!important;width:100%!important;max-width:100%!important}
}

/* R3 (low) Touch screens: table action buttons ("Open", "Edit", ...) were 23 px tall,
   under the 24 px minimum target size. */
@media(pointer:coarse){
 .tablewrap td button{min-height:32px;min-width:44px}
}

/* R4 (low) Text contrast below 4.5:1 - same hues, text darkened just enough. */
.pill.completed{color:#067c44!important}
.pill.pending{color:#946200!important}
.pill.overdue{color:#c62235!important}
td.yes{color:#0e8451!important}
.kpi-percent{color:#128050!important}
#viewOverdueBtn{background:#bd5600!important}
.chart-sub{color:#61768a!important}

/* R5 (low) Phones: the signed-in role under the user name was 9 px. */
@media(max-width:800px){.who small{font-size:11px!important}}

/* R6 (high) Short, wide windows (landscape phones, 150% zoom): the login card is
   centred vertically while taller than the window, so its top was cut off and
   could not be scrolled to. It now starts at the top and the screen scrolls. */
@media(min-width:801px) and (max-height:620px){
 #login .login-card{top:12px!important;transform:none!important}
 /* the artwork and hero layers stay in place while the card scrolls */
 #login.login::before,#login .mcplh-stage{position:fixed!important}
}