/*
 * Atlas shared interaction system — ONE backoffice, all sectors.
 * Reuses brand-neutral Atlas UI; marketing landing pages are intentionally unaffected.
 * Consistent 44px targets, matching heights and equal action widths, including iOS Safari.
 */
#appShell{
  --atlas-control-height:44px;
  --atlas-control-radius:11px;
  --atlas-action-gap:9px;
}
#appShell :is(.btn,.opsBtn,a.btn,button.btn){
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  min-height:var(--atlas-control-height);
  height:auto;
  max-width:100%;
  padding:10px 14px !important;
  border-radius:var(--atlas-control-radius);
  font-size:13px !important;
  line-height:1.3;
  font-weight:700;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
#appShell :is(.btn,.opsBtn,a.btn,button.btn):focus-visible,
#appShell button:focus-visible,
#appShell select:focus-visible{
  outline:3px solid #4cb8a7;
  outline-offset:2px;
}
/* Pair or group adjacent actions with identical widths and baseline. */
#appShell :is(
  .opsActions,
  .opsQuickActions,
  .opsWidgetControls,
  .opsMessageActions,
  .atlasClientVehicleActions,
  .atlasConsentActions,
  .atlasSeatMemberTools
){
  gap:var(--atlas-action-gap);
}
#appShell :is(.opsActions,.opsQuickActions,.opsWidgetControls,.opsMessageActions,.atlasClientVehicleActions,.atlasConsentActions)
  > :is(.btn,.opsBtn,a.btn,button.btn){
  flex:1 1 110px;
  min-width:0;
}
#appShell .opsMessageActions{
  display:inline-flex;
  flex-wrap:wrap;
  width:min(100%,420px);
  align-items:stretch;
}
#appShell .opsMessageActions > :is(.btn,.opsBtn,a.btn,button.btn){
  flex:1 1 95px;
}
/* Avoid varying vertical heights where form cards have both select and buttons. */
#appShell :is(.opsForm,.stack,.formgrid) :is(button.btn,a.btn,.opsBtn){
  min-height:var(--atlas-control-height);
}
#appShell :is(.opsForm,.stack,.formgrid,.opsAgendaFilters) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
  select
){
  min-height:var(--atlas-control-height);
  box-sizing:border-box;
}
/* Agenda navigation has a distinct compact shape, but an identical tap target. */
#appShell .opsAgendaViewTabs button,
#appShell .opsAgendaPeriod > button,
#appShell .opsAgendaToday,
#appShell .opsNewBooking{
  min-height:var(--atlas-control-height);
}
#appShell .opsAgendaPeriod > button:not(.opsAgendaToday){
  width:44px;
  height:44px;
  flex:none;
}
#appShell .opsAgendaViewTabs{max-width:100%;min-width:0}
#appShell .opsAgendaViewTabs button{min-width:0;box-sizing:border-box}
/* Tiny controls remain visually compact but are safe to touch on mobile. */
@media(max-width:740px){
  #appShell{--atlas-control-height:44px;--atlas-action-gap:8px}
  #appShell :is(
    .opsActions,
    .opsQuickActions,
    .opsWidgetControls,
    .atlasClientVehicleActions,
    .atlasConsentActions
  ){display:flex;align-items:stretch;flex-wrap:wrap}
  #appShell :is(
    .opsActions,
    .opsQuickActions,
    .opsWidgetControls,
    .atlasClientVehicleActions,
    .atlasConsentActions
  ) > :is(.btn,.opsBtn,a.btn,button.btn){
    flex:1 1 calc(50% - 8px);
    min-width:min(108px,100%);
  }
  #appShell .opsMessageActions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  #appShell .opsMessageActions > :is(.btn,.opsBtn,a.btn,button.btn){
    width:100%;min-width:0;padding-inline:6px !important;
  }
  #appShell .opsAgendaTopRow{
    align-items:stretch;
    min-width:0;
  }
  #appShell .opsAgendaViewTabs{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
  }
  #appShell .opsAgendaViewTabs button{
    width:100%;min-height:44px;padding:10px 5px;
  }
  #appShell .opsNewBooking{width:100%}
  #appShell .opsAgendaFilters{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  #appShell .opsAgendaFilters .field{width:100%;min-width:0;max-width:100%}
  #appShell .opsAgendaFilters :is(input[type="date"],select){
    width:100%;min-width:0;max-width:100%;font-size:16px;
  }
  #appShell .atlasSeatMemberTools{align-items:stretch}
  #appShell .atlasSeatMemberTools > :is(button.btn,.opsBtn){width:100%}
  #appShell .opsAppointment .opsActions>.btn{min-height:44px}
  #appShell .opsOrderActions button,
  #appShell .atlasMobileDrawerTitle button{
    min-width:44px;min-height:44px;
  }
  #appShell .atlasDetailBar button{min-width:44px;min-height:44px}
}
@media(max-width:360px){
  #appShell .opsMessageActions{grid-template-columns:repeat(2,minmax(0,1fr))}
  #appShell .opsActions > :is(.btn,.opsBtn,a.btn,button.btn){flex-basis:100%}
}