/* Shared mobile containment: keep cards and form controls inside their owning panel. */
@media (max-width:800px){
  html,body{width:100%;max-width:100%;overflow-x:clip}
  main{width:100%;max-width:100%;min-width:0}
  main :where(div,section,article,form,fieldset,label){min-width:0}
  main>*,main .card,main section,main article,main form,main fieldset{max-width:100%}
  main :where(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
  main input[type=radio],main input[type=checkbox]{flex:0 0 20px;width:20px!important;min-width:20px!important;max-width:20px!important;height:20px;margin:0;padding:0}
  main .switch-control input{position:absolute;flex:0 0 1px;width:1px!important;min-width:1px!important;max-width:1px!important;height:1px}
  main .color-choice input{position:absolute;flex:0 0 1px;width:1px!important;min-width:1px!important;max-width:1px!important;height:1px}
  main :where(img,svg,canvas,video){max-width:100%}
  main :where(.grid,.filters,.form,.title){min-width:0;max-width:100%}
  .title{flex-wrap:wrap}
  .title>*{min-width:0;max-width:100%}
  .title h1,.title h2,.title p,.card h1,.card h2,.card h3{overflow-wrap:anywhere}
  button,.button{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .table-wrap,.hotel-admin-table-wrap,.hotel-admin-wide-wrap,.user-table,.flight-pdf-preview,.gantt-shell{max-width:100%;overscroll-behavior-x:contain}
  dialog{width:calc(100% - 12px)!important;max-width:calc(100% - 12px)!important;margin-left:auto!important;margin-right:auto!important}
  dialog>*{min-width:0;max-width:100%}
  .dialog-head>div,.board-edit-head>div,.hotel-dialog-head>div{min-width:0}
  .package-company-selector{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px!important}
  .package-company-selector>strong{grid-column:1/-1}
  .package-company-selector label{min-width:0;max-width:100%;gap:7px!important;overflow-wrap:anywhere}
  .gantt-mode-select,.guide-choice-item>label,.board-guide-languages label,.same-day-arrival-check,.hotel-breakfast-field>span,.board-check-label{min-width:0;max-width:100%}
}

@media (max-width:480px){
  main{padding-left:10px;padding-right:10px}
  .card{padding:16px 14px}
  .title h1{font-size:clamp(24px,8vw,32px)}
  .dialog-head,.board-edit-head{gap:10px}
  .dialog-head p,.board-edit-head p{overflow-wrap:anywhere}
  .dialog-actions,.board-edit-actions,.hotel-form-actions{max-width:100%}
  .package-company-selector{grid-template-columns:minmax(0,1fr)}
}

/* Final narrow-screen form guard: no editable control may establish a width
   larger than the content box that owns it. */
@media (max-width:600px){
  main :where(form,fieldset,section,article,div,label){
    min-inline-size:0;max-inline-size:100%;box-sizing:border-box;
  }
  main :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea,output){
    display:block;width:100%!important;min-width:0!important;max-width:100%!important;
    inline-size:100%!important;min-inline-size:0!important;max-inline-size:100%!important;
    box-sizing:border-box!important;
  }
  .schedule-edit-form,.schedule-edit-form>*{
    width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  }
  .schedule-edit-form .edit-basic{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    width:100%;min-width:0;max-width:100%;overflow:hidden;
  }
  .schedule-edit-form .edit-basic>*{
    grid-column:1!important;width:100%;min-width:0;max-width:100%;overflow:hidden;
  }
  .schedule-edit-form :where(.hotel-fields,.transport-fields,.vehicle-details,.selected-guide-dates,.board-edit-date-row){
    grid-template-columns:minmax(0,1fr)!important;width:100%;min-width:0;max-width:100%;
  }
  .schedule-edit-form :where(.hotel-item,.transport-item,.selected-guide-card,.arrival-date-field,.hotel-date-field){
    width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;
  }
}