/* Composants de l'application réelle : dialogues natifs, éditeur de champs, page de signature */
.badge.bad { background: #fee2e2; color: #b91c1c; }
.badge.info { background: #dbeafe; color: #1d4ed8; }
.badge.plain::before { display: none; }
.kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; padding: .55rem 0; border-top: 1px solid #f4f4f5; }
.kv:first-child { border-top: 0; }
.status-dot { width: 8px; height: 8px; border-radius: 99px; background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.18); display: inline-block; }
.status-dot.warn { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.status-dot.down { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.2); }
.admin-tag { font-size: .6rem; font-weight: 800; letter-spacing: .08em; background: #FBBF24; color: #0B0B0F; padding: .15rem .45rem; border-radius: .4rem; }
.seg { height: 10px; border-radius: 99px; overflow: hidden; display: flex; background: #f4f4f5; }
.seg > i { display: block; height: 100%; }

/* <dialog> */
dialog.modal-dlg { border: 0; border-radius: 1.1rem; padding: 0; width: calc(100% - 2rem); max-width: 480px; max-height: 90vh; box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
dialog.modal-dlg::backdrop { background: rgba(11,11,15,.55); backdrop-filter: blur(3px); }
dialog.modal-dlg[open] { animation: dlgin .18s ease; }
@keyframes dlgin { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.pill-tab { text-decoration: none; display: inline-block; }
.menu { animation: dlgin .12s ease; }
.switch { border: 0; padding: 0; }

/* Éditeur de préparation */
.rec-item { border: 1.5px solid #ececf0; border-radius: .8rem; padding: .6rem; cursor: pointer; background: #fff; }
.rec-item.active { border-color: #FBBF24; box-shadow: 0 0 0 3px rgba(251,191,36,.2); }
.pal-item { display: flex; align-items: center; gap: .5rem; border: 1.5px solid #e4e4e7; border-radius: .7rem; padding: .55rem .6rem; font-size: .72rem; font-weight: 600; text-align: left; background: #fff; cursor: grab; transition: all .15s; }
.pal-item:hover, .pal-item.on { border-color: #0B0B0F; background: #fafafa; }
.pal-item.on { background: #FBBF24; border-color: #FBBF24; }
#viewer.armed .ov { cursor: crosshair; }
.pg { position: relative; background: #fff; margin: 0 auto 1.25rem; box-shadow: 0 6px 24px -8px rgba(0,0,0,.25); }
.pg canvas { display: block; }
.pg .ov { position: absolute; inset: 0; }
.pg-n { position: absolute; bottom: -1.05rem; right: 0; font-size: .65rem; color: #71717a; }
.fld { position: absolute; border: 2px solid; border-radius: 5px; cursor: move; touch-action: none; user-select: none; display: flex; align-items: center; justify-content: center; }
.fld.sel { box-shadow: 0 0 0 3px rgba(251,191,36,.7); z-index: 5; }
.fld-tag { position: absolute; left: -2px; top: -1.15rem; font-size: 10px; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 4px 4px 0 0; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .15s; }
.fld:hover .fld-tag, .fld.sel .fld-tag { opacity: 1; }
.fld-ic { opacity: .7; pointer-events: none; }
.fld-h { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #fff; border: 2px solid #0B0B0F; border-radius: 3px; cursor: nwse-resize; }
.fld:not(.sel) .fld-h { display: none; }

/* Page de signature */
.sf { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.sf.mine { border: 2px dashed #F59E0B; background: rgba(251,191,36,.18); }
.sf.mine.done { border: 2px solid #10B981; background: rgba(16,185,129,.10); }
.sf.other { border: 1px dashed #d4d4d8; background: rgba(244,244,245,.5); }
.sf.flash { animation: flash .5s ease 3; }
@keyframes flash { 50% { box-shadow: 0 0 0 6px rgba(251,191,36,.7); } }
.sf-sig { width: 100%; height: 100%; font-weight: 700; color: #92400e; display: flex; align-items: center; justify-content: center; gap: .3rem; cursor: pointer; }
.sf-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; }
.sf-in { width: 100%; height: 100%; background: transparent; border: 0; outline: none; padding: 0 4px; font: inherit; color: #1e3a8a; }
.sf-txt { padding: 0 4px; color: #1e3a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-ghost, .sf-tag { font-size: .75em; color: #71717a; }
.sf-tag { color: #059669; font-weight: 700; }
.sf-cb { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; color: #0B0B0F; background: #fff; border-radius: 3px; }
.sf-radio { border-radius: 99px; }
.chip { font-size: .72rem; border: 1.5px solid #e4e4e7; border-radius: 99px; padding: .3rem .7rem; background: #fff; transition: all .15s; }
.chip:hover { border-color: #0B0B0F; }
.font-opt { display: block; border: 1.5px solid #e4e4e7; border-radius: .8rem; padding: .35rem .9rem; cursor: pointer; }
.font-opt.on { border-color: #FBBF24; background: #fffbeb; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }