/* Rafeeq mobile usability 2026-09-27 */
@media (max-width:720px){
.layout>*,.grid>*,.field-grid>*,.row>*,.card,.panel,.metrics>*{min-width:0}
nav.nav[aria-label="أقسام الفريق"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;padding:0;position:static}
nav.nav[aria-label="أقسام الفريق"] button{white-space:normal;min-height:48px;padding:10px 8px;font-size:14px;line-height:1.5;text-align:start}
main button,dialog button,summary{min-height:44px}
summary{padding-block:8px;line-height:1.7}
input:not([type="checkbox"]):not([type="radio"]),select,textarea,dialog.rf-hospital-dialog input:not([type="checkbox"]),dialog.rf-hospital-dialog textarea{font-size:16px}
.card,.panel{overflow-wrap:anywhere}
.actions>*{max-width:100%}
.plan-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
dialog.rf-hospital-dialog{width:calc(100% - 20px);max-width:600px;max-height:90vh;max-height:90dvh;padding:16px;box-sizing:border-box;overscroll-behavior:contain}
dialog.rf-hospital-dialog .rf-hospital-grid{grid-template-columns:minmax(0,1fr)}
dialog.rf-hospital-dialog input[type="file"]{padding:8px;max-width:100%}
.rf-hospital-entry{padding:10px 14px}
.rf-hospital-entry button{min-height:44px}
}

/* Explicit small-screen layout also works on browsers without media range syntax. */
@media (max-width: 900px) {
 .layout {display:block;grid-template-columns:minmax(0,1fr)}
 .layout > .nav {position:static;margin-bottom:18px}
 nav.nav[aria-label="أقسام الفريق"] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
 nav.nav[aria-label="أقسام الفريق"] button {white-space:normal;text-align:start;min-width:0;word-break:normal;overflow-wrap:break-word}
 .layout > div {width:100%;min-width:0}
}
@media (max-width:720px) {
 main {width:100%;max-width:100%;padding-left:12px;padding-right:12px}
 .grid,.field-grid {display:block;grid-template-columns:minmax(0,1fr)}
 .grid > *,.field-grid > * {margin-bottom:12px}
 .card,.panel {width:100%;max-width:100%;padding:16px;word-break:normal;overflow-wrap:break-word}
 .row > *, .actions > * {min-width:0;max-width:100%}
 .row > div {flex:1 1 220px}
 .row > button,.actions > button {flex-shrink:0;max-width:100%;white-space:normal;word-break:normal}
 .stats,.metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
 .stats > *,.metrics > * {min-width:0;word-break:normal;padding:12px}
 input,select,textarea {max-width:100%;min-width:0}
 img {max-width:100%}
 fieldset {min-width:0;padding:12px}
 details {padding:12px}
}
@media (max-width:420px) {
 .stats,.metrics {display:block}
 .stats > *,.metrics > * {margin-bottom:10px}
 .row {align-items:center}
 .row > button {flex:1 1 auto}
}
@media (max-width:720px){
 .row small{display:block;max-width:100%;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word}
}