ET data-label="..." sur chaque | . Le thead est caché, chaque td
devient une ligne "label: value" via ::before(attr(data-label)).
Utilisé par : Implants posés, Visites, Questionnaires (et autres). */
body[data-patient-panel-open="true"] .pdt-stack-mobile thead{
display:none !important;
}
body[data-patient-panel-open="true"] .pdt-stack-mobile,
body[data-patient-panel-open="true"] .pdt-stack-mobile tbody,
body[data-patient-panel-open="true"] .pdt-stack-mobile tr,
body[data-patient-panel-open="true"] .pdt-stack-mobile td{
display:block !important;width:100% !important;table-layout:auto !important;
}
body[data-patient-panel-open="true"] .pdt-stack-mobile colgroup,
body[data-patient-panel-open="true"] .pdt-stack-mobile col{
display:none !important;
}
body[data-patient-panel-open="true"] .pdt-stack-mobile tr{
border:1px solid var(--ds-border) !important;border-radius:10px !important;
margin:12px !important;padding:8px 12px !important;
background:var(--ds-bg-elevated);
}
body[data-patient-panel-open="true"] .pdt-stack-mobile td{
padding:6px 0 !important;text-align:left !important;
border:none !important;border-bottom:1px solid var(--ds-border) !important;
display:flex !important;justify-content:space-between !important;align-items:center;
gap:12px;
min-width:0;
}
body[data-patient-panel-open="true"] .pdt-stack-mobile tr td:last-child{
border-bottom:none !important;
}
body[data-patient-panel-open="true"] .pdt-stack-mobile td::before{
content:attr(data-label);
color:var(--ds-fg-muted);font-size:10.5px;
text-transform:uppercase;letter-spacing:0.06em;font-weight:500;
flex-shrink:0;
}
/* td sans data-label = case "vide" → on cache la ligne (évite "Actions ▶ rien") */
body[data-patient-panel-open="true"] .pdt-stack-mobile td:not([data-label]):empty{
display:none !important;
}
/* Classe générique pour cacher une colonne donnée sur mobile uniquement.
Apposable sur | ET | . Utilisé dans Questionnaires (col Score). */
body[data-patient-panel-open="true"] .pdt-hide-mobile{
display:none !important;
}
/* Header "Voir étape" mobile : compresser. Le back devient icône-seule, le
reload + reopen du top sont cachés (déjà disponibles dans le body, en bas
du recap). Le titre prend l'espace libéré et reste visible. */
body[data-patient-panel-open="true"] .pd-stage-header{
padding:10px 14px !important;gap:8px !important;
}
body[data-patient-panel-open="true"] .pd-stage-back-label{
display:none !important;
}
body[data-patient-panel-open="true"] .pd-stage-back-btn{
padding:6px 8px !important;flex-shrink:0;
}
body[data-patient-panel-open="true"] .pd-stage-reload-wrap,
body[data-patient-panel-open="true"] .pd-stage-reopen-wrap{
display:none !important;
}
/* Titre étape : visible, sur 2 lignes max si trop long */
body[data-patient-panel-open="true"] .pd-stage-title-wrap{
text-align:left !important;
overflow:hidden;
}
body[data-patient-panel-open="true"] .pd-stage-title{
font-size:12px !important;
white-space:normal !important;line-height:1.3;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
/* BREAST-Q : table pivotée non stackable. Force scroll horizontal +
fade-edge à droite pour signaler le scroll au doigt. */
body[data-patient-panel-open="true"] .pdt-bq-scroll{
position:relative;
/* Fade-out à droite : signale visuellement qu'il y a du contenu hors-écran */
-webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.3) 100%);
mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), rgba(0,0,0,0.3) 100%);
}
body[data-patient-panel-open="true"] .pdt-bq-scroll table{
font-size:12px !important;
}
body[data-patient-panel-open="true"] .pdt-bq-scroll th,
body[data-patient-panel-open="true"] .pdt-bq-scroll td{
padding:8px 10px !important;
min-width:auto !important;
}
/* Quand le panel patient (z-index:1000) est ouvert, les modales (z-index:500
par défaut) sont rendues sous le panel et invisibles. Bumper au-dessus du
panel pour qu'elles s'affichent. Cas typique : scanner QR implant ouvert
depuis la stage procédure dans le panel. */
body[data-patient-panel-open="true"] .modal-overlay{
z-index:1100 !important;
}
/* ─── Typeform questionnaire (visit-stage-*) ─── */
/* Header compact : padding réduit, cache nom de l'étude (logo seul),
cache l'autosave label texte (icône succès reste via JS), bouton Quitter
icône-seule. */
.tf-header{padding:10px 12px !important;gap:8px !important}
.tf-brand-name{display:none !important}
.tf-progress{gap:8px !important;max-width:none !important;margin:0 !important}
.tf-progress-num{min-width:38px !important;font-size:11px !important}
.tf-autosave{min-width:0 !important;font-size:0 !important}
.tf-autosave .material-symbols-outlined{font-size:18px !important;color:var(--success-700)}
.tf-exit-btn{padding:6px 8px !important;min-height:0 !important}
.tf-exit-label{display:none !important}
/* Question titre plus petit pour tenir sur écrans étroits */
.tf-center{padding:24px 16px !important}
.tf-question-title{font-size:26px !important;line-height:1.2 !important}
/* Footer compact + safe-area pour iOS Safari (la barre d'adresse cache
parfois le footer fixe → bouton Suivant invisible). On force position
sticky bottom + padding-bottom = safe-area-inset-bottom pour que le
footer reste au-dessus de la home indicator + barre Safari rétractable. */
.tf-footer{
padding:12px 14px calc(12px + var(--mob-safe-b, env(safe-area-inset-bottom, 0px))) !important;
position:sticky !important;bottom:0 !important;z-index:50 !important;
background:var(--ds-bg) !important;
}
.tf-keyboard-hint{display:none !important}
.tf-prev-btn,.tf-next-btn{padding:12px 16px !important;min-height:0 !important;min-width:0 !important}
.tf-prev-label{display:none !important}
/* Scale 3/4/5 : sur mobile, on passe en colonne verticale (carte par ligne)
avec icon + label en horizontal, comme les boutons yes/no. Ça résout le
débordement de scale5 (5 × 170px = 938px largeur > 390px viewport). */
.tf-scale-row{
grid-template-columns:1fr !important;
gap:8px !important;
max-width:520px;margin-left:auto;margin-right:auto;
}
.tf-scale-row .tf-face-card{
aspect-ratio:auto !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:14px !important;
padding:12px 16px !important;
text-align:left !important;
}
.tf-scale-row .tf-face-icon{
width:44px !important;height:44px !important;padding:8px !important;
flex-shrink:0;
}
.tf-scale-row .tf-face-card .ds-editorial{
text-align:left !important;
margin-top:0 !important;
font-size:14.5px !important;
flex:1;
}
}
|