/* DisplayMint venue-readiness UI hardening.
   Loaded last so legacy/feature styles cannot reintroduce broken controls. */

*,*::before,*::after{box-sizing:border-box}

/* Keep the backoffice viewport stable even when old feature panels are wider. */
.dm-v2-shell,
.dm-v2-shell .main,
.dm-v2-shell .content,
.dm-v2-shell #page,
.dm-v2-shell .panel,
.dm-v2-shell .card,
.dm-v2-shell .table-wrap,
.dm-v2-shell .dm-workspace-page,
.dm-v2-shell .dm-workspace-canvas,
.dm-v2-shell .dm-studio-shell,
.dm-v2-shell .dm-studio-main,
.dm-v2-shell .dm-studio-sequence{min-width:0}
.dm-v2-shell .content{overflow-x:hidden}
.dm-v2-shell img,.dm-v2-shell video{max-width:100%}

/* Native choice controls must never inherit text-input dimensions. */
.dm-v2-shell input[type="checkbox"],
.dm-v2-shell input[type="radio"],
body>.modal-backdrop input[type="checkbox"],
body>.modal-backdrop input[type="radio"]{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  width:17px!important;
  min-width:17px!important;
  max-width:17px!important;
  height:17px!important;
  min-height:17px!important;
  max-height:17px!important;
  padding:0!important;
  margin:0!important;
  border-radius:4px!important;
  box-shadow:none!important;
  flex:0 0 17px!important;
  accent-color:#1f8f78!important;
  cursor:pointer!important;
}
.dm-v2-shell input[type="radio"],
body>.modal-backdrop input[type="radio"]{border-radius:50%!important}

.dm-v2-shell .check,
body>.modal-backdrop .check{
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  line-height:1.35!important;
  cursor:pointer!important;
  user-select:none!important;
}
body>.modal-backdrop .check{
  min-height:40px!important;
  padding:9px 10px!important;
  border:1px solid #dce3ea!important;
  border-radius:7px!important;
  background:#f8fafb!important;
  color:#344054!important;
}
body>.modal-backdrop .check>span{min-width:0!important}

/* Colour pickers should look like colour pickers, not thin browser stripes. */
.dm-v2-shell input[type="color"],
body>.modal-backdrop input[type="color"]{
  width:100%!important;
  min-height:42px!important;
  height:42px!important;
  padding:4px!important;
  border:1px solid #cfd8e1!important;
  border-radius:7px!important;
  background:#fff!important;
  cursor:pointer!important;
}
.dm-v2-shell input[type="color"]::-webkit-color-swatch-wrapper,
body>.modal-backdrop input[type="color"]::-webkit-color-swatch-wrapper{padding:0!important}
.dm-v2-shell input[type="color"]::-webkit-color-swatch,
body>.modal-backdrop input[type="color"]::-webkit-color-swatch{
  border:0!important;
  border-radius:4px!important;
}
.dm-v2-shell input[type="color"]::-moz-color-swatch,
body>.modal-backdrop input[type="color"]::-moz-color-swatch{
  border:0!important;
  border-radius:4px!important;
}

/* Modal system: no horizontal scrollbar, consistent spacing, responsive forms. */
body>.modal-backdrop{
  overflow:hidden!important;
  padding:18px!important;
}
body>.modal-backdrop .modal,
body>.modal-backdrop .modal.modal-wide{
  max-width:calc(100vw - 36px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable!important;
}
body>.modal-backdrop .modal>*,
body>.modal-backdrop .modal-body,
body>.modal-backdrop .modal-body>form,
body>.modal-backdrop .modal form,
body>.modal-backdrop .field,
body>.modal-backdrop .field-grid,
body>.modal-backdrop .field-grid>*{
  min-width:0!important;
  max-width:100%!important;
}
body>.modal-backdrop .modal-body{
  overflow-x:hidden!important;
  padding:18px!important;
}
body>.modal-backdrop .modal-head{
  gap:12px!important;
}
body>.modal-backdrop .modal-head h3{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
body>.modal-backdrop .modal .field-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  gap:14px!important;
}
body>.modal-backdrop .modal label.field,
body>.modal-backdrop .modal .field{
  display:grid!important;
  gap:6px!important;
}
body>.modal-backdrop .modal input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body>.modal-backdrop .modal select,
body>.modal-backdrop .modal textarea{
  min-width:0!important;
  max-width:100%!important;
}
body>.modal-backdrop .modal textarea{
  min-height:92px!important;
  resize:vertical!important;
  line-height:1.45!important;
}
body>.modal-backdrop .modal-actions{
  position:sticky!important;
  bottom:-18px!important;
  z-index:5!important;
  width:100%!important;
  margin:18px 0 -18px!important;
  padding:12px 0 18px!important;
  border-top:1px solid #e5eaf0!important;
  background:#fff!important;
  box-shadow:0 -8px 18px rgba(255,255,255,.96)!important;
}
body>.modal-backdrop .modal-actions .btn{flex:0 0 auto!important}
body>.modal-backdrop .modal .close{flex:0 0 auto!important}

/* Long labels/values should wrap rather than force panels wider. */
.dm-v2-shell .field,
.dm-v2-shell label,
.dm-v2-shell td,
.dm-v2-shell .card,
.dm-v2-shell .suite-row,
.dm-v2-shell .dm-resource-card,
body>.modal-backdrop label,
body>.modal-backdrop .field{overflow-wrap:anywhere}
.dm-v2-shell .dm-row-actions,
.dm-v2-shell .card-actions,
.dm-v2-shell .top-actions{
  min-width:0!important;
  flex-wrap:wrap!important;
}

/* Tables remain usable on laptop screens without widening the whole application. */
.dm-v2-shell .table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.dm-v2-shell table{max-width:none}
.dm-v2-shell th,.dm-v2-shell td{vertical-align:middle}

/* Playlist studio: make inputs/editing and drag handles clearly separate. */
.dm-v2-shell .dm-studio-item{overflow:hidden}
.dm-v2-shell .dm-studio-item .ux-drag{
  cursor:grab!important;
  user-select:none!important;
  touch-action:none!important;
}
.dm-v2-shell .dm-studio-item .ux-drag:active{cursor:grabbing!important}
.dm-v2-shell .dm-studio-item input,
.dm-v2-shell .dm-studio-item select,
.dm-v2-shell .dm-studio-item button,
.dm-v2-shell .dm-studio-item details{touch-action:auto!important}

/* Common disabled states should be visibly disabled. */
.dm-v2-shell button:disabled,
.dm-v2-shell input:disabled,
.dm-v2-shell select:disabled,
body>.modal-backdrop button:disabled,
body>.modal-backdrop input:disabled,
body>.modal-backdrop select:disabled{
  opacity:.52!important;
  cursor:not-allowed!important;
}

/* Focus visibility for keyboards/remotes/accessibility. */
.dm-v2-shell button:focus-visible,
.dm-v2-shell a:focus-visible,
.dm-v2-shell input:focus-visible,
.dm-v2-shell select:focus-visible,
.dm-v2-shell textarea:focus-visible,
body>.modal-backdrop button:focus-visible,
body>.modal-backdrop input:focus-visible,
body>.modal-backdrop select:focus-visible,
body>.modal-backdrop textarea:focus-visible{
  outline:2px solid #1f8f78!important;
  outline-offset:2px!important;
}

/* Prevent very tall dialogs becoming awkward on venue laptops. */
@media(max-height:760px){
  body>.modal-backdrop{padding:10px!important}
  body>.modal-backdrop .modal,
  body>.modal-backdrop .modal.modal-wide{max-height:calc(100vh - 20px)!important}
}
@media(max-width:820px){
  body>.modal-backdrop{padding:10px!important}
  body>.modal-backdrop .modal,
  body>.modal-backdrop .modal.modal-wide{max-width:calc(100vw - 20px)!important}
  body>.modal-backdrop .modal .field-grid{grid-template-columns:1fr!important}
  body>.modal-backdrop .modal-actions{
    bottom:-18px!important;
    flex-wrap:wrap!important;
  }
  body>.modal-backdrop .modal-actions .btn{flex:1 1 140px!important}
}
@media(max-width:520px){
  .dm-v2-shell .top-actions,
  .dm-v2-shell .card-actions,
  .dm-v2-shell .dm-row-actions{width:100%}
  body>.modal-backdrop .modal-head h3{font-size:13px!important}
}

body>.modal-backdrop .dm-confirm-check>span{display:grid!important;gap:2px!important;min-width:0!important}
body>.modal-backdrop .dm-confirm-check strong{color:#344054!important;font-size:11px!important}
body>.modal-backdrop .dm-confirm-check small{color:#7d8998!important;font-size:9.5px!important;font-weight:500!important}

/* Control-panel device licences */
.dm-v2-shell .dm-control-device-section,
.dm-v2-shell .dm-control-actions-section{
  min-width:0!important;
}
.dm-v2-shell .dm-control-device-section{
  margin-bottom:18px!important;
  padding-bottom:18px!important;
  border-bottom:1px solid #e8edf1!important;
}
.dm-v2-shell .dm-control-device-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:8px!important;
}
.dm-v2-shell .dm-control-device-head strong{
  display:block!important;
  color:#172233!important;
  font-size:11px!important;
}
.dm-v2-shell .dm-control-device-head span{
  display:block!important;
  margin-top:2px!important;
}
.dm-v2-shell .dm-control-device-list .dm-control-device-row{
  min-width:0!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:10px 0!important;
  border-bottom:1px solid #edf1f4!important;
}
.dm-v2-shell .dm-control-device-list .dm-control-device-row:last-child{border-bottom:0!important}
.dm-v2-shell .dm-control-device-row>div{min-width:0!important}
.dm-v2-shell .dm-control-device-row strong{
  display:block!important;
  overflow:hidden!important;
  color:#344054!important;
  font-size:11px!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.dm-v2-shell .dm-control-device-row span{
  display:block!important;
  margin-top:3px!important;
  color:#7b8794!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}
.dm-v2-shell .dm-control-device-row .btn{flex:0 0 auto!important}
@media(max-width:700px){
  .dm-v2-shell .dm-control-device-list .dm-control-device-row{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .dm-v2-shell .dm-control-device-row .btn{width:100%!important}
}